11個(gè)JavaScript代碼重構(gòu)最佳實(shí)踐

模式和重構(gòu)之間有著一種與生俱來(lái)的關(guān)系。從某種角度來(lái)看，設(shè)計(jì)模式的目的就是為許多重構(gòu)行為提供目標(biāo)。

1.提煉函數(shù)

在JavaScript開(kāi)發(fā)中，我們大部分時(shí)間都在與函數(shù)打交道，所以我們希望這些函數(shù)有著良好的命名，函數(shù)體內(nèi)包含的邏輯清晰明了。如果一個(gè)函數(shù)過(guò)長(zhǎng)，不得不加上若干注釋才能讓這個(gè)函數(shù)顯得易讀一些，那這些函數(shù)就很有必要進(jìn)行重構(gòu)。

如果在函數(shù)中有一段代碼可以被獨(dú)立出來(lái)，那我們最好把這些代碼放進(jìn)另外一個(gè)獨(dú)立的函數(shù)中。這是一種很常見(jiàn)的優(yōu)化工作，這樣做的好處主要有以下幾點(diǎn)。

• 避免出現(xiàn)超大函數(shù)。

• 獨(dú)立出來(lái)的函數(shù)有助于代碼復(fù)用。

• 獨(dú)立出來(lái)的函數(shù)更容易被覆寫。

• 獨(dú)立出來(lái)的函數(shù)如果擁有一個(gè)良好的命名，它本身就起到了注釋的作用。

比如在一個(gè)負(fù)責(zé)取得用戶信息的函數(shù)里面，我們還需要打印跟用戶信息有關(guān)的log，那么打印log的語(yǔ)句就可以被封裝在一個(gè)獨(dú)立的函數(shù)里：

var?getUserInfo?=?function(){
????ajax(?'http://?xxx.com/userInfo',?function(?data?){
????????console.log(?'userId:?'?+?data.userId?);
????????console.log(?'userName:?'?+?data.userName?);
????????console.log(?'nickName:?'?+?data.nickName?);
????});
};

改成：

var?getUserInfo?=?function(){
????ajax(?'http://?xxx.com/userInfo',?function(?data?){
????????printDetails(?data?);
????});
};

var?printDetails?=?function(?data?){
????console.log(?'userId:?'?+?data.userId?);
????console.log(?'userName:?'?+?data.userName?);
????console.log(?'nickName:?'?+?data.nickName?);
};

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

如果一個(gè)函數(shù)體內(nèi)有一些條件分支語(yǔ)句，而這些條件分支語(yǔ)句內(nèi)部散布了一些重復(fù)的代碼，那么就有必要進(jìn)行合并去重工作。假如我們有一個(gè)分頁(yè)函數(shù)paging，該函數(shù)接收一個(gè)參數(shù)currPage，currPage表示即將跳轉(zhuǎn)的頁(yè)碼。在跳轉(zhuǎn)之前，為防止currPage傳入過(guò)小或者過(guò)大的數(shù)字，我們要手動(dòng)對(duì)它的值進(jìn)行修正，詳見(jiàn)如下偽代碼：

var?paging?=?function(?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)
????}
};

可以看到，負(fù)責(zé)跳轉(zhuǎn)的代碼jump( currPage )在每個(gè)條件分支內(nèi)都出現(xiàn)了，所以完全可以把這句代碼獨(dú)立出來(lái)：

var?paging?=?function(?currPage?){
????if?(?currPage?<=?0?){
????????currPage?=?0;
????}else?if?(?currPage?>=?totalPage?){
????????currPage?=?totalPage;
????}
????jump(?currPage?);????//?把jump函數(shù)獨(dú)立出來(lái)
};

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

在程序設(shè)計(jì)中，復(fù)雜的條件分支語(yǔ)句是導(dǎo)致程序難以閱讀和理解的重要原因，而且容易導(dǎo)致一個(gè)龐大的函數(shù)。假設(shè)現(xiàn)在有一個(gè)需求是編寫一個(gè)計(jì)算商品價(jià)格的getPrice函數(shù)，商品的計(jì)算只有一個(gè)規(guī)則：如果當(dāng)前正處于夏季，那么全部商品將以8折出售。代碼如下：

var?getPrice?=?function(?price?){
????var?date?=?new?Date();
????if?(?date.getMonth()?>=?6?&&?date.getMonth()?<=?9?){????//?夏天
????????return?price?*?0.8;
????}
????return?price;
};

觀察這句代碼：

if?(?date.getMonth()?>=?6?&&?date.getMonth()?<=?9?){
????//?...
}

這句代碼要表達(dá)的意思很簡(jiǎn)單，就是判斷當(dāng)前是否正處于夏天（7~10月）。盡管這句代碼很短小，但代碼表達(dá)的意圖和代碼自身還存在一些距離，閱讀代碼的人必須要多花一些精力才能明白它傳達(dá)的意圖。其實(shí)可以把這句代碼提煉成一個(gè)單獨(dú)的函數(shù)，既能更準(zhǔn)確地表達(dá)代碼的意思，函數(shù)名本身又能起到注釋的作用。代碼如下：

var?isSummer?=?function(){
????var?date?=?new?Date();
????return?date.getMonth()?>=?6?&&?date.getMonth()?<=?9;
};

var?getPrice?=?function(?price?){
????if?(?isSummer()?){????//?夏天
????????return?price?*?0.8;
????}
????return?price;
};

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

在函數(shù)體內(nèi)，如果有些代碼實(shí)際上負(fù)責(zé)的是一些重復(fù)性的工作，那么合理利用循環(huán)不僅可以完成同樣的功能，還可以使代碼量更少。下面有一段創(chuàng)建XHR對(duì)象的代碼，為了簡(jiǎn)化示例，我們只考慮版本9以下的IE瀏覽器，代碼如下：

var?createXHR?=?function(){
????var?xhr;
????try{
????????xhr?=?new?ActiveXObject(?'MSXML2.XMLHttp.6.0'?);
????}catch(e){
????????try{
????????????xhr?=?new?ActiveXObject(?'MSXML2.XMLHttp.3.0'?);
????????}catch(e){
????????????xhr?=?new?ActiveXObject(?'MSXML2.XMLHttp'?);
????????}
????}
????return?xhr;
};

var?xhr?=?createXHR();

下面我們靈活地運(yùn)用循環(huán)，可以得到跟上面代碼一樣的效果：

var?createXHR?=?function(){
var?versions=?[?'MSXML2.XMLHttp.6.0ddd',?'MSXML2.XMLHttp.3.0',?'MSXML2.XMLHttp'?];
????for?(?var?i?=?0,?version;?version?=?versions[?i++?];?){
????????try{
????????????return?new?ActiveXObject(?version?);
????????}catch(e){

????????}
????}
};

var?xhr?=?createXHR();

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

許多程序員都有這樣一種觀念：“每個(gè)函數(shù)只能有一個(gè)入口和一個(gè)出口?！爆F(xiàn)代編程語(yǔ)言都會(huì)限制函數(shù)只有一個(gè)入口。但關(guān)于“函數(shù)只有一個(gè)出口”，往往會(huì)有一些不同的看法。

下面這段偽代碼是遵守“函數(shù)只有一個(gè)出口的”的典型代碼：

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

嵌套的條件分支語(yǔ)句絕對(duì)是代碼維護(hù)者的噩夢(mèng)，對(duì)于閱讀代碼的人來(lái)說(shuō)，嵌套的if、else語(yǔ)句相比平鋪的if、else，在閱讀和理解上更加困難，有時(shí)候一個(gè)外層if分支的左括號(hào)和右括號(hào)之間相隔500米之遠(yuǎn)。用《重構(gòu)》里的話說(shuō)，嵌套的條件分支往往是由一些深信“每個(gè)函數(shù)只能有一個(gè)出口的”程序員寫出的。但實(shí)際上，如果對(duì)函數(shù)的剩余部分不感興趣，那就應(yīng)該立即退出。引導(dǎo)閱讀者去看一些沒(méi)有用的else片段，只會(huì)妨礙他們對(duì)程序的理解。

于是我們可以挑選一些條件分支，在進(jìn)入這些條件分支之后，就立即讓這個(gè)函數(shù)退出。要做到這一點(diǎn)，有一個(gè)常見(jiàn)的技巧，即在面對(duì)一個(gè)嵌套的if分支時(shí)，我們可以把外層if表達(dá)式進(jìn)行反轉(zhuǎn)。重構(gòu)后的del函數(shù)如下：

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

6.傳遞對(duì)象參數(shù)代替過(guò)長(zhǎng)的參數(shù)列表

有時(shí)候一個(gè)函數(shù)有可能接收多個(gè)參數(shù)，而參數(shù)的數(shù)量越多，函數(shù)就越難理解和使用。使用該函數(shù)的人首先得搞明白全部參數(shù)的含義，在使用的時(shí)候，還要小心翼翼，以免少傳了某個(gè)參數(shù)或者把兩個(gè)參數(shù)搞反了位置。如果我們想在第3個(gè)參數(shù)和第4個(gè)參數(shù)之中增加一個(gè)新的參數(shù)，就會(huì)涉及許多代碼的修改，代碼如下：

var?setUserInfo?=?function(?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?)

;

這時(shí)我們可以把參數(shù)都放入一個(gè)對(duì)象內(nèi)，然后把該對(duì)象傳入setUserInfo 函數(shù)，setUserInfo函數(shù)需要的數(shù)據(jù)可以自行從該對(duì)象里獲取。現(xiàn)在不用再關(guān)心參數(shù)的數(shù)量和順序，只要保證參數(shù)對(duì)應(yīng)的key值不變就可以了：

var?setUserInfo?=?function(?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.盡量減少參數(shù)數(shù)量

如果調(diào)用一個(gè)函數(shù)時(shí)需要傳入多個(gè)參數(shù)，那這個(gè)函數(shù)是讓人望而生畏的，我們必須搞清楚這些參數(shù)代表的含義，必須小心翼翼地把它們按照順序傳入該函數(shù)。而如果一個(gè)函數(shù)不需要傳入任何參數(shù)就可以使用，這種函數(shù)是深受人們喜愛(ài)的。在實(shí)際開(kāi)發(fā)中，向函數(shù)傳遞參數(shù)不可避免，但我們應(yīng)該盡量減少函數(shù)接收的參數(shù)數(shù)量。下面舉個(gè)非常簡(jiǎn)單的示例。有一個(gè)畫圖函數(shù)draw，它現(xiàn)在只能繪制正方形，接收了3個(gè)參數(shù)，分別是圖形的width、heigth以及square：

var?draw?=?function(?width,?height,?square?){};

但實(shí)際上正方形的面積是可以通過(guò)width和height計(jì)算出來(lái)的，于是我們可以把參數(shù)square從draw函數(shù)中去掉：

var?draw?=?function(?width,?height?){
????var?square?=?width?*?height;
};

假設(shè)以后這個(gè)draw函數(shù)開(kāi)始支持繪制圓形，我們需要把參數(shù)width和height換成半徑radius， 但圖形的面積square始終不應(yīng)該由客戶傳入，而是應(yīng)該在draw函數(shù)內(nèi)部，由傳入的參數(shù)加上一定的規(guī)則計(jì)算得來(lái)。此時(shí)，我們可以使用策略模式，讓draw函數(shù)成為一個(gè)支持繪制多種圖形的函數(shù)。

8.少用三目運(yùn)算符

有一些程序員喜歡大規(guī)模地使用三目運(yùn)算符，來(lái)代替?zhèn)鹘y(tǒng)的if、else。理由是三目運(yùn)算符性能高，代碼量少。不過(guò)，這兩個(gè)理由其實(shí)都很難站得住腳。

即使我們假設(shè)三目運(yùn)算符的效率真的比if、else高，這點(diǎn)差距也是完全可以忽略不計(jì)的。在實(shí)際的開(kāi)發(fā)中，即使把一段代碼循環(huán)一百萬(wàn)次，使用三目運(yùn)算符和使用if、else的時(shí)間開(kāi)銷處在同一個(gè)級(jí)別里。

同樣，相比損失的代碼可讀性和可維護(hù)性，三目運(yùn)算符節(jié)省的代碼量也可以忽略不計(jì)。讓JS文件加載更快的辦法有很多種，如壓縮、緩存、使用CDN和分域名等。把注意力只放在使用三目運(yùn)算符節(jié)省的字符數(shù)量上，無(wú)異于一個(gè)300斤重的人把超重的原因歸罪于頭皮屑。

如果條件分支邏輯簡(jiǎn)單且清晰，這無(wú)礙我們使用三目運(yùn)算符：

var?global?=?typeof?window?!==?"undefined"???window?:?this;

但如果條件分支邏輯非常復(fù)雜，如下段代碼所示，那我們最好的選擇還是按部就班地編寫if、else。if、else語(yǔ)句的好處很多，一是閱讀相對(duì)容易，二是修改的時(shí)候比修改三目運(yùn)算符周圍的代碼更加方便：

if?(?!aup?||?!bup?)?{
????return?a?===?doc???-1?:
????????b?===?doc???1?:
????????aup???-1?:
????????bup???1?:
????????sortInput??
????????(?indexOf.call(?sortInput,?a?)?-?indexOf.call(?sortInput,?b?)?)?:
????????0;
}

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

經(jīng)常使用jQuery的程序員相當(dāng)習(xí)慣鏈?zhǔn)秸{(diào)用方法，在JavaScript中，可以很容易地實(shí)現(xiàn)方法的鏈?zhǔn)秸{(diào)用，即讓方法調(diào)用結(jié)束后返回對(duì)象自身，如下代碼所示：

var?User?=?function(){
????this.id?=?null;
????this.name?=?null;
};

User.prototype.setId?=?function(?id?){
????this.id?=?id;
????return?this;
};

User.prototype.setName?=?function(?name?){
????this.name?=?name;
????return?this;
};

console.log(?new?User().setId(?1314?).setName(?'sven'?)?);

或者：

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

console.log(?User.setId(?1314?).setName(?'sven'?)?);

使用鏈?zhǔn)秸{(diào)用的方式并不會(huì)造成太多閱讀上的困難，也確實(shí)能省下一些字符和中間變量，但節(jié)省下來(lái)的字符數(shù)量同樣是微不足道的。鏈?zhǔn)秸{(diào)用帶來(lái)的壞處就是在調(diào)試的時(shí)候非常不方便，如果我們知道一條鏈中有錯(cuò)誤出現(xiàn)，必須得先把這條鏈拆開(kāi)才能加上一些調(diào)試log或者增加斷點(diǎn)，這樣才能定位錯(cuò)誤出現(xiàn)的地方。

如果該鏈條的結(jié)構(gòu)相對(duì)穩(wěn)定，后期不易發(fā)生修改，那么使用鏈?zhǔn)秸{(diào)用無(wú)可厚非。但如果該鏈條很容易發(fā)生變化，導(dǎo)致調(diào)試和維護(hù)困難，那么還是建議使用普通調(diào)用的形式：

var?user?=?new?User();

user.setId(?1314?);
user.setName(?'sven'?);

10.分解大型類

在HTML5版“街頭霸王”的第一版代碼中，負(fù)責(zé)創(chuàng)建游戲人物的Spirit 類非常龐大，不僅要負(fù)責(zé)創(chuàng)建人物精靈，還包括了人物的攻擊、防御等動(dòng)作方法，代碼如下：

var?Spirit?=?function(?name?){
????this.name?=?name;
};

Spirit.prototype.attack?=?function(?type?){????//?攻擊
????if?(?type?===?'waveBoxing'?){
????????console.log(?this.name?+?':?使用波動(dòng)拳'?);
????}else?if(?type?===?'whirlKick'?){
????????console.log(?this.name?+?':?使用旋風(fēng)腿'?);
????}
};

var?spirit?=?new?Spirit(?'RYU'?);

spirit.attack(?'waveBoxing'?);??????//?輸出：RYU:?使用波動(dòng)拳
spirit.attack(?'whirlKick'?);????//?輸出：RYU:?使用旋風(fēng)腿

后來(lái)發(fā)現(xiàn)，Spirit.prototype.attack這個(gè)方法實(shí)現(xiàn)是太龐大了，實(shí)際上它完全有必要作為一個(gè)單獨(dú)的類存在。面向?qū)ο笤O(shè)計(jì)鼓勵(lì)將行為分布在合理數(shù)量的更小對(duì)象之中：

var?Attack?=?function(?spirit?){
????this.spirit?=?spirit;
};

Attack.prototype.start?=?function(?type?){
????return?this.list[?type?].call(?this?);
};

Attack.prototype.list?=?{
????waveBoxing:?function(){
????????console.log(?this.spirit.name?+?':?使用波動(dòng)拳'?);
????},
????whirlKick:?function(){
????????console.log(?this.spirit.name?+?':?使用旋風(fēng)腿'?);
????}
};

現(xiàn)在的Spirit類變得精簡(jiǎn)了很多，不再包括各種各樣的攻擊方法，而是把攻擊動(dòng)作委托給Attack類的對(duì)象來(lái)執(zhí)行，這段代碼也是策略模式的運(yùn)用之一：

var?Spirit?=?function(?name?){
????this.name?=?name;
????this.attackObj?=?new?Attack(?this?);
};

Spirit.prototype.attack?=?function(?type?){????//?攻擊
????this.attackObj.start(?type?);
};

var?spirit?=?new?Spirit(?'RYU'?);

spirit.attack(?'waveBoxing'?);????//?輸出：RYU:?使用波動(dòng)拳
spirit.attack(?'whirlKick'?);????//?輸出：RYU:?使用旋風(fēng)

11.用return退出多重循環(huán)

假設(shè)在函數(shù)體內(nèi)有一個(gè)兩重循環(huán)語(yǔ)句，我們需要在內(nèi)層循環(huán)中判斷，當(dāng)達(dá)到某個(gè)臨界條件時(shí)退出外層的循環(huán)。我們大多數(shù)時(shí)候會(huì)引入一個(gè)控制標(biāo)記變量：

var?func?=?function(){
????var?flag?=?false;
????for?(?var?i?=?0;?i?10;?i++?){
????????for?(?var?j?=?0;?j?10;?j++?){
????????????if?(?i?*?j?>30?){
????????????????flag?=?true;
????????????????break;
????????????}
????????}
????????if?(?flag?===?true?){
????????????break;
????????}
????}
};

第二種做法是設(shè)置循環(huán)標(biāo)記：

var?func?=?function(){
????outerloop:
????for?(?var?i?=?0;?i?10;?i++?){
????????innerloop:
????????for?(?var?j?=?0;?j?10;?j++?){
????????????if?(?i?*?j?>30?){
????????????????break?outerloop;
????????????}
????????}
????}
};

這兩種做法無(wú)疑都讓人頭暈?zāi)垦?，更?jiǎn)單的做法是在需要中止循環(huán)的時(shí)候直接退出整個(gè)方法：

var?func?=?function(){
????for?(?var?i?=?0;?i?10;?i++?){
????????for?(?var?j?=?0;?j?10;?j++?){
????????????if?(?i?*?j?>30?){
????????????????return;
????????????}
????????}
????}
};

當(dāng)然用return直接退出方法會(huì)帶來(lái)一個(gè)問(wèn)題，如果在循環(huán)之后還有一些將被執(zhí)行的代碼呢？如果我們提前退出了整個(gè)方法，這些代碼就得不到被執(zhí)行的機(jī)會(huì)：

var?func?=?function(){
????for?(?var?i?=?0;?i?10;?i++?){
????????for?(?var?j?=?0;?j?10;?j++?){
????????????if?(?i?*?j?>30?){
????????????????return;
????????????}
????????}
????}
????console.log(?i?);????//?這句代碼沒(méi)有機(jī)會(huì)被執(zhí)行
};

為了解決這個(gè)問(wèn)題，我們可以把循環(huán)后面的代碼放到return后面，如果代碼比較多，就應(yīng)該把它們提煉成一個(gè)單獨(dú)的函數(shù)：

var?print?=?function(?i?){
????console.log(?i?);
};

var?func?=?function(){
????for?(?var?i?=?0;?i?10;?i++?){
????????for?(?var?j?=?0;?j?10;?j++?){
????????????if?(?i?*?j?>30?){
????????????????return?print(?i?);
????????????}
????????}
????}
};

func();

??愛(ài)心三連擊
1.看到這里了就點(diǎn)個(gè)在看支持下吧，你的「點(diǎn)贊，在看」是我創(chuàng)作的動(dòng)力。
2.關(guān)注公眾號(hào)程序員成長(zhǎng)指北，回復(fù)「1」加入Node進(jìn)階交流群！「在這里有好多 Node 開(kāi)發(fā)者，會(huì)討論 Node 知識(shí)，互相學(xué)習(xí)」！
3.也可添加微信【ikoala520】，一起成長(zhǎng)。

“在看轉(zhuǎn)發(fā)”是最大的支持