11個 Javascript 小技巧幫你提升代碼質(zhì)量

轉(zhuǎn)自：掘金 - alanyf

Javascript 常用代碼優(yōu)化和重構(gòu)的方法

簡介

主要介紹以下幾點：

1. 提煉函數(shù)
2. 合并重復(fù)的條件片段
3. 把條件分支語句提煉成函數(shù)
4. 合理使用循環(huán)
5. 提前讓函數(shù)退出代替嵌套條件分支
6. 傳遞對象參數(shù)代替過長的參數(shù)列表
7. 少用三目運算符
8. 合理使用鏈?zhǔn)秸{(diào)用
9. 分解大型類
10. 活用位操作符
11. 純函數(shù)

本文會不斷更新，不足之處歡迎補充。

1. 提煉函數(shù)

好處：

• 避免出現(xiàn)超大函數(shù)。
• 獨立出來的函數(shù)有助于代碼復(fù)用。
• 獨立出來的函數(shù)更容易被覆寫。
• 獨立出來的函數(shù)如果擁有一個良好的命名，它本身就起到了注釋的作用。
• 語義化將多段分離的邏輯放在不同的函數(shù)中實現(xiàn)，可以使代碼邏輯清晰，清楚的看到每一步在做什么。

代碼舉例：

實現(xiàn)獲取數(shù)據(jù)，然后操作dom顯示數(shù)據(jù)，最后添加事件

• 函數(shù)提煉前

//?邏輯都寫在一起，需要將所有邏輯看完才知道這段代碼是干嘛的，局部邏輯無法復(fù)用
function?main()?{
????$.ajax.get('/getData').then((res)?=>?{
????????const?ul?=?document.getElementById('ul');
????????ul.innerHTML?=?res.list.map(text?=>?`${text}`).join('\n');
????????const?list?=?document.getElementsByClassName('li');
????????for?(let?i?=?0;?i?????????????list[i].addEventListener('focus',?()?=>?{
????????????????//?do?something
????????????});
????????}
????});
}

• 函數(shù)提煉后

function?getData()?{
????return?$.ajax.get('/getData').then((res)?=>?res.data.list);
}
function?showList(list)?{
????const?ul?=?document.getElementById('ul');
????ul.innerHTML?=?list.map(text?=>?`${text}`).join('\n');
}
function?addEvent()?{
????const?list?=?document.getElementsByClassName('li');
????for?(let?i?=?0;?i?????????list[i].addEventListener('focus',?()?=>?{
????????????//?do?something
????????});
????}
}
//?邏輯清晰，一眼讀懂每一步在做什么，某些提煉出來的函數(shù)還可以被復(fù)用
async?function?main()?{
????const?list?=?await?getData();?//?獲取數(shù)據(jù)
????showList(list);?//?顯示頁面
????addEvent();?//?添加事件
}

2. 合并重復(fù)的條件片段

如果一個函數(shù)體內(nèi)有一些條件分支語句，而這些條件分支語句內(nèi)部散布了一些重復(fù)的代碼，那么就有必要進(jìn)行合并去重工作。

//?合并前
function?main(?currPage?){
????if?(?currPage?<=?0?){
????????currPage?=?0;
????????jump(?currPage?);?//?跳轉(zhuǎn)
????}else?if?(?currPage?>=?totalPage?){
????????currPage?=?totalPage;
????????jump(?currPage?);?//?跳轉(zhuǎn)
????}else{
????????jump(?currPage?);?//?跳轉(zhuǎn)
????}
};

//?合并后
function?main(?currPage?){
????if?(?currPage?<=?0?){
????????currPage?=?0;
????}else?if?(?currPage?>=?totalPage?){
????????currPage?=?totalPage;
????}
????jump(?currPage?);?//?把jump?函數(shù)獨立出來
};

3. 把條件分支語句提煉成函數(shù)

復(fù)雜的條件分支語句是導(dǎo)致程序難以閱讀和理解的重要原因，而且容易導(dǎo)致一個龐大的函數(shù)。有時可以將條件分支語句提煉成語義化的函數(shù)，使代碼更加直觀，邏輯清晰。

//?根據(jù)不同季節(jié)決定打折力度
function?getPrice(?price?){
????var?date?=?new?Date();
????if?(?date.getMonth()?>=?6?&&?date.getMonth()?<=?9?){?//?夏天
????????return?price?*?0.8;
????}
????return?price;
};


//?是否是夏天
function?isSummer(){
????var?date?=?new?Date();
????return?date.getMonth()?>=?6?&&?date.getMonth()?<=?9;
};
//?提煉條件后
function?getPrice(?price?){
????if?(?isSummer()?){
????????return?price?*?0.8;
????}
????return?price;
};

4. 合理使用循環(huán)

如果多段代碼實際上負(fù)責(zé)的是一些重復(fù)性的工作，那么可以用循環(huán)代替，使代碼量更少。

//?判斷是什么瀏覽器
function?getBrowser(){
????const?str?=?navigator.userAgent;
????if?(str.includes('QQBrowser'))?{
?return?'qq';
????}?else?if?(str.includes('Chrome'))?{
?return?'chrome';
????}?else?if?(str.includes('Safari'))?{
????????return?'safri';
????}?else?if?(str.includes('Firefox'))?{
????????return?'firefox';
????}?else?if(explorer.indexOf('Opera')?>=?0){
????????return?'opera';
????}?else?if?(str.includes('msie'))?{
????????return?'ie';
????}?else?{
????????return?'other';
????}
};


//?循環(huán)判斷，將對應(yīng)關(guān)系抽象為配置，更加清晰明確
function?getBrowser(){
????const?str?=?navigator.userAgent;
????const?list?=?[
????????{key:?'QQBrowser',?browser:?'qq'},
????????{key:?'Chrome',?browser:?'chrome'},
????????{key:?'Safari',?browser:?'safari'},
????????{key:?'Firefox',?browser:?'firefox'},
????????{key:?'Opera',?browser:?'opera'},
????????{key:?'msie',?browser:?'ie'},
????];
????for?(let?i?=?0;?i?????????const?item?=?list[i];
????????if?(str.includes(item.key))?{return?item.browser};
????}
????return?'other';
}

5. 提前讓函數(shù)退出代替嵌套條件分支

讓函數(shù)變成多出口提前返回，替換嵌套條件分支。

function?del(?obj?){
????var?ret;
????if?(?!obj.isReadOnly?){?//?不為只讀的才能被刪除
????????if?(?obj.isFolder?){?//?如果是文件夾
????????????ret?=?deleteFolder(?obj?);
????????}else?if?(?obj.isFile?){?//?如果是文件
????????????ret?=?deleteFile(?obj?);
????????}
????}
????return?ret;
};

function?del(?obj?){
????if?(?obj.isReadOnly?){?//?反轉(zhuǎn)if?表達(dá)式
????????return;
????}
????if?(?obj.isFolder?){
????????return?deleteFolder(?obj?);
????}
????if?(?obj.isFile?){
????????return?deleteFile(?obj?);
????}
};

6. 傳遞對象參數(shù)代替過長的參數(shù)列表

函數(shù)參數(shù)過長那么就增加出錯的風(fēng)險，想保證傳遞的順序正確就是一件麻煩的事，代碼可讀性也會變差，盡量保證函數(shù)的參數(shù)不會太長。如果必須傳遞多個參數(shù)的話，建議使用對象代替。

一般來說，函數(shù)參數(shù)最好不要超過3個

function?setUserInfo(?id,?name,?address,?sex,?mobile,?qq?){
????console.log(?'id=?'?+?id?);
????console.log(?'name=?'?+name?);
????console.log(?'address=?'?+?address?);
????console.log(?'sex=?'?+?sex?);
????console.log(?'mobile=?'?+?mobile?);
????console.log(?'qq=?'?+?qq?);
};
setUserInfo(?1314,?'sven',?'shenzhen',?'male',?'137********',?377876679?);

function?setUserInfo(?obj?){
????console.log(?'id=?'?+?obj.id?);
????console.log(?'name=?'?+?obj.name?);
????console.log(?'address=?'?+?obj.address?);
????console.log(?'sex=?'?+?obj.sex?);
????console.log(?'mobile=?'?+?obj.mobile?);
????console.log(?'qq=?'?+?obj.qq?);
};
setUserInfo({
????id:?1314,
????name:?'sven',
????address:?'shenzhen',
????sex:?'male',
????mobile:?'137********',
????qq:?377876679
});

7. 少用三目運算符

三目運算符性能高，代碼量少。

但不應(yīng)該濫用三目運算符，我們應(yīng)該在簡單邏輯分支使用，在復(fù)雜邏輯分支避免使用。

//?簡單邏輯可以使用三目運算符
var?global?=?typeof?window?!==?"undefined"???window?:?this;

//?復(fù)雜邏輯不適合使用
var?ok?=?isString???(isTooLang???2?:?(isTooShort???1?:?0))?:?-1;

8. 合理使用鏈?zhǔn)秸{(diào)用

優(yōu)點：?鏈?zhǔn)秸{(diào)用使用簡單，代碼量少。

缺點：?鏈?zhǔn)秸{(diào)用帶來的壞處就是在調(diào)試不方便，如果我們知道一條鏈中有錯誤出現(xiàn)，必須得先把這條鏈拆開才能加上一些調(diào)試 log 或者增加斷點，這樣才能定位錯誤出現(xiàn)的地方。

如果該鏈條的結(jié)構(gòu)相對穩(wěn)定，后期不易發(fā)生修改，可以使用鏈?zhǔn)健?/p>

var?User?=?{
????id:?null,
????name:?null,
????setId:?function(?id?){
????????this.id?=?id;
????????return?this;
????},
????setName:?function(?name?){
????????this.name?=?name;
????????return?this;
????}
};
User
??.setId(?1314?)
??.setName(?'sven'?);

var?user?=?new?User();
user.setId(?1314?);
user.setName(?'sven'?);

9. 分解大型類

大型類的分解和函數(shù)的提煉很像，類太大會出現(xiàn)邏輯不清晰，難以理解和維護(hù)的問題。

合理的大類分解可以使類的邏輯清晰，且子模塊可以方便復(fù)用。

10. 活用位操作符

編程語言計算乘除的性能都不高，但是某些情況使用位操作符可以提升乘除等運算的性能。

11. 純函數(shù)

純函數(shù)是指不依賴于且不改變它作用域之外的變量狀態(tài)的函數(shù)。

純函數(shù)的返回值只由它調(diào)用時的參數(shù)決定，它的執(zhí)行不依賴于系統(tǒng)的狀態(tài)（執(zhí)行上下文）。

相同的輸入?yún)?shù)，一定會得到相同的輸出，也就是內(nèi)部不含有會影響輸出的隨機變量。

不屬于純函數(shù)的特點：

• 更改文件系統(tǒng)
• 往數(shù)據(jù)庫插入記錄
• 發(fā)送一個 http 請求
• 可變數(shù)據(jù)
• 打印/log
• 獲取用戶輸入
• DOM 查詢
• 訪問系統(tǒng)狀態(tài)

純函數(shù)的作用：

• 可靠性：函數(shù)返回永遠(yuǎn)和預(yù)期一致
• 可緩存性：因為只要輸入一樣輸出一定一樣，因此可將輸入作為key，輸出作為值，使用對象緩存已經(jīng)計算的結(jié)果
• 可移植性：因為沒有外部依賴，所以移植到任何環(huán)境都可正確運行
• 可測試性：方便針對函數(shù)做單元測試
• 可并行性：對一些復(fù)雜計算，可以并行計算（例如使用nodejs多個子進(jìn)程同時并行計算多個任務(wù)，提高計算速度）

應(yīng)用場景：

• 工具函數(shù)最好使用純函數(shù)
• 多平臺使用的代碼（nodejs、瀏覽器、微信小程序、native客戶端等）
• 相對獨立的功能

var?a?=?1;
//?非純函數(shù)
function?sum(b)?{
????return?a?+?b;
}
//?非純函數(shù)
function?sum(b)?{
????a?=?2;
????return?b;
}
//?非純函數(shù)
function?sum(b)?{
????return?b?+?Math.random();
}


//?純函數(shù)
function?sum?(b,?c)?{
????return?b?+?c;
}