摘要:訪問原文地址對原本代碼邏輯進行提煉,提高代碼的閱讀性。增強代碼的和特性。再邏輯還不算太復雜的時候,早點修訂一些規(guī)范。
訪問原文地址
Why對原本代碼邏輯進行提煉,提高代碼的閱讀性。
增強代碼的Object Oriented和Functional Programming特性。
再邏輯還不算太復雜的時候,早點修訂一些Coding規(guī)范。
重構要點Construct HTML using template strings.
Eliminate if/else blocks with hash maps.
Collapse multiple arguments with a config object.
Pre-bind arguments to make point-free functions.
Break complex conditionals with intention revealing .variables.
Inline IIFE for complex initialization.
Use hoisting/composed-method to focus on important code.
1.使用ES6的template string來替換不好用的html文本var html = "2.用hash-map來替換復雜的if/else判斷條件" + ""; //使用template直接就可以像些angular的模板一樣在js代碼中插入html let tmp_html = `" + title + "" + "" + "`;${title}
function getSomething(type) { if (type === "boy") { return "/img/bog.jpg" } else if (type === "man") { return "/img/man.jpg" } else if (type === "girl") { return "/img/girl.jpg" } else (type === "woman") { return "/img/woman.jpg" } } //hash-map function getSomething(type) { var typeMap = { boy: "/img/bog.jpg", man: "/img/man.jpg", girl: "/img/girl.jpg", woman: "/img/woman.jpg", } return typeMap[type] || "/img/default.jpg"; } //當condition或者type條件很復雜的時候,可以把他們提取出來,以便維護 import typeMap from "./conditions";3.減少函數(shù)入?yún)ⅲ肙bject來代替。
function formatNumber(value, decimals, asPercent, prefix, suffix) { var formattedNumber = value; //do something return formattedNumber; } formatNumber(10,2,false,"","%"); //利用ES6默認值特性,以及對象定義參數(shù) function formatNumber({value=0, decimals=0, asPercent=false, prefix=‘’, suffix=‘’}){} var num = 20; formatNumber({value: num, suffix:"%"});4.使用bind方法,將一個函數(shù)分離成多個更好理解的函數(shù)
function doOperation(name="default", args=[]) { // 這是一個通過name來決定操作方法的函數(shù) } function findSome() { return Promise.resolve("LS460h"); } function getCarList() { return Promise.resolve({size:4800, seats:5, output:6.0}); } findSome().then(args => { doOperation("searchCar", args); }); getCarList().then(args => { doOperation("buyLexus", args); }); //修改過程 //先通過bind函數(shù),將操作方法從參數(shù)導入的方式分離成2個函數(shù) var play = doOperation.bind(null, "searchCar"); var buy = doOperation.bind(null, "buyLexus"); findSome().then(play); getCarList().then(buy);5.使用array的some方法來重構條件判斷語句
import _ from "lodash"; var age, gamer = [], adNetworks = [], specialAchievements = []; function showGame() { /* do something */ } if((age > 0 && age <0) || gamer.isFirstTime || _.some(adNetworks, function(n) { return gamer.network === n; }) || _.some(specialAchievements, function(ach) { return gamer.specialAchievement = ach; })) { showGame(); }
把conditions提煉成Array,并使用箭頭函數(shù)
var conditions = [ () => { return age > 0 && age <0; }, () => gamer.isFirstTime, () => { return _.some(adNetworks, n => gamer.network === n); }, () => { return _.some(specialAchievements, ach => gamer.specialAchievement === ach); }, //加入新的條件,就變得很輕松 () => specialAchievements.length > 0 ]; let matches = _.some(conditions, c=>c()); if(matches) { showGame(); }6.使用IIFE(Immediately-Invoked Function Expression)做復雜初始化
var settings = readSettings(); var apiUrl = `https://${settings.apiDomain}:${settings.apiPort}/api`; var defaultConfig = { apiUrl:apiUrl, timezone: settings.timezone, account: settings.account, theme: settings.theme } // IIFE var defaultConfig = (() => { var settings = readSettings(); var apiUrl = `https://${settings.apiDomain}:${settings.apiPort}/api`; var defaultConfig = { apiUrl:apiUrl, timezone: settings.timezone, account: settings.account, theme: settings.theme } })();7.把回調的邏輯抽取成函數(shù),隱藏邏輯,讓代碼語義更清晰。
_fetchData(url) .then(data => { //do something }) .then(transactions => { //do something }) //after import {processData, renderHtml} from "./doSomething" _fetchData(url) .then(processData) .then(renderHtml);
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80876.html
摘要:以下兩個要點將會對任何微服務重構策略產生重大影響。批量替換通過批發(fā)更換,您可以一次性重構整個應用程序,直接從單體式轉移到一組微服務器。如果您通過使用破解您的微服務器,那么每個域將圍繞一個用例,或者更常見的,一組相互關聯(lián)的用例。 在決定使用微服務之后,為了將微服務付諸實踐,也許你已經(jīng)開始重構你的應用程序或把重構工作列入了待辦事項清單。 無論是哪種情況,如果這是你第一次重構應用程序,那么您...
摘要:重構總共耗時個工作日。第一個重構原因就是沒有引入靜態(tài)類型,導致查看一個對象結構需要翻來覆去在多個文件中查找。第三是各個狀態(tài)模塊耦合度高,加大了代碼維護難度。但如果耦合度過高,往往是因為模塊沒有細分到位。這個項目也不列外。 showImg(https://segmentfault.com/img/remote/1460000019660483); 不知不覺已是2019年的7月,恍惚之間已...
摘要:對象有狀態(tài)對象具有狀態(tài),同一對象可能處于不同狀態(tài)之下。中對象獨有的特色對象具有高度的動態(tài)性,這是因為賦予了使用者在運行時為對象添改狀態(tài)和行為的能力。小結由于的對象設計跟目前主流基于類的面向對象差異非常大,導致有不是面向對象這樣的說法。 筆記說明 重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄,每天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些...
閱讀 3596·2020-12-03 17:42
閱讀 2768·2019-08-30 15:54
閱讀 2223·2019-08-30 15:44
閱讀 571·2019-08-30 14:08
閱讀 970·2019-08-30 14:00
閱讀 1103·2019-08-30 13:46
閱讀 2784·2019-08-29 18:33
閱讀 2886·2019-08-29 14:11