模式和重構之間有著一種與生俱來的關系。從某種角度來看，設計模式的目的就是為許多重構行為提供目標。
1.提煉函數
在JavaScript開發中，我們大部分時間都在與函數打交道，所以我們希望這些函數有著良好的命名，函數體內包含的邏輯清晰明了。如果一個函數過長，不得不加上若干注釋才能讓這個函數顯得易讀一些，那這些函數就很有必要進行重構。
如果在函數中有一段代碼可以被獨立出來，那我們最好把這些代碼放進另外一個獨立的函數中。這是一種很常見的優化工作，這樣做的好處主要有以下幾點。
- 避免出現超大函數。
- 獨立出來的函數有助于代碼復用。
- 獨立出來的函數更容易被覆寫。
- 獨立出來的函數如果擁有一個良好的命名，它本身就起到了注釋的作用。
比如在一個負責取得用戶信息的函數里面，我們還需要打印跟用戶信息有關的log，那么打印log的語句就可以被封裝在一個獨立的函數里：
|
1
2
3
4
5
6
7
|
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 ); });}; |
改成：
|
1
2
3
4
5
6
7
8
9
10
11
|
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.合并重復的條件片段
如果一個函數體內有一些條件分支語句，而這些條件分支語句內部散布了一些重復的代碼，那么就有必要進行合并去重工作。假如我們有一個分頁函數paging，該函數接收一個參數currPage，currPage表示即將跳轉的頁碼。在跳轉之前，為防止currPage傳入過小或者過大的數字，我們要手動對它的值進行修正，詳見如下偽代碼：
|
1
2
3
4
5
6
7
8
9
10
11
|
var paging = function( currPage ){ if ( currPage <= 0 ){ currPage = 0; jump( currPage ); // 跳轉 }else if ( currPage >= totalPage ){ currPage = totalPage; jump( currPage ); // 跳轉 }else{ jump( currPage ); // 跳轉 }}; |
可以看到，負責跳轉的代碼jump( currPage )在每個條件分支內都出現了，所以完全可以把這句代碼獨立出來：
|
1
2
3
4
5
6
7
8
|
var paging = function( currPage ){ if ( currPage <= 0 ){ currPage = 0; }else if ( currPage >= totalPage ){ currPage = totalPage; } jump( currPage ); // 把jump函數獨立出來}; |
3.把條件分支語句提煉成函數
在程序設計中，復雜的條件分支語句是導致程序難以閱讀和理解的重要原因，而且容易導致一個龐大的函數。假設現在有一個需求是編寫一個計算商品價格的getPrice函數，商品的計算只有一個規則：如果當前正處于夏季，那么全部商品將以8折出售。代碼如下：
|
1
2
3
4
5
6
7
|
var getPrice = function( price ){var date = new Date();if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){ // 夏天return price * 0.8;}return price;}; |
觀察這句代碼：
|
1
2
3
|
if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){// ...} |
這句代碼要表達的意思很簡單，就是判斷當前是否正處于夏天（7~10月）。盡管這句代碼很短小，但代碼表達的意圖和代碼自身還存在一些距離，閱讀代碼的人必須要多花一些精力才能明白它傳達的意圖。其實可以把這句代碼提煉成一個單獨的函數，既能更準確地表達代碼的意思，函數名本身又能起到注釋的作用。代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
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.合理使用循環
在函數體內，如果有些代碼實際上負責的是一些重復性的工作，那么合理利用循環不僅可以完成同樣的功能，還可以使代碼量更少。下面有一段創建XHR對象的代碼，為了簡化示例，我們只考慮版本9以下的IE瀏覽器，代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
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();``下面我們靈活地運用循環，可以得到跟上面代碼一樣的效果：```jsvar 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.提前讓函數退出代替嵌套條件分支
許多程序員都有這樣一種觀念：“每個函數只能有一個入口和一個出口。”現代編程語言都會限制函數只有一個入口。但關于“函數只有一個出口”，往往會有一些不同的看法。
下面這段偽代碼是遵守“函數只有一個出口的”的典型代碼：
|
1
2
3
4
5
6
7
8
9
10
11
|
var del = function( obj ){ var ret; if ( !obj.isReadOnly ){ // 不為只讀的才能被刪除 if ( obj.isFolder ){ // 如果是文件夾 ret = deleteFolder( obj ); }else if ( obj.isFile ){ // 如果是文件 ret = deleteFile( obj ); } } return ret;}; |
嵌套的條件分支語句絕對是代碼維護者的噩夢，對于閱讀代碼的人來說，嵌套的if、else語句相比平鋪的if、else，在閱讀和理解上更加困難，有時候一個外層if分支的左括號和右括號之間相隔500米之遠。用《重構》里的話說，嵌套的條件分支往往是由一些深信“每個函數只能有一個出口的”程序員寫出的。但實際上，如果對函數的剩余部分不感興趣，那就應該立即退出。引導閱讀者去看一些沒有用的else片段，只會妨礙他們對程序的理解。
于是我們可以挑選一些條件分支，在進入這些條件分支之后，就立即讓這個函數退出。要做到這一點，有一個常見的技巧，即在面對一個嵌套的if分支時，我們可以把外層if表達式進行反轉。重構后的del函數如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
var del = function( obj ){ if ( obj.isReadOnly ){ // 反轉if表達式 return; } if ( obj.isFolder ){ return deleteFolder( obj ); } if ( obj.isFile ){ return deleteFile( obj ); }}; |
6.傳遞對象參數代替過長的參數列表
有時候一個函數有可能接收多個參數，而參數的數量越多，函數就越難理解和使用。使用該函數的人首先得搞明白全部參數的含義，在使用的時候，還要小心翼翼，以免少傳了某個參數或者把兩個參數搞反了位置。如果我們想在第3個參數和第4個參數之中增加一個新的參數，就會涉及許多代碼的修改，代碼如下：
|
1
2
3
4
5
6
7
8
9
10
|
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 ); |
這時我們可以把參數都放入一個對象內，然后把該對象傳入setUserInfo 函數，setUserInfo函數需要的數據可以自行從該對象里獲取。現在不用再關心參數的數量和順序，只要保證參數對應的key值不變就可以了：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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.盡量減少參數數量
如果調用一個函數時需要傳入多個參數，那這個函數是讓人望而生畏的，我們必須搞清楚這些參數代表的含義，必須小心翼翼地把它們按照順序傳入該函數。而如果一個函數不需要傳入任何參數就可以使用，這種函數是深受人們喜愛的。在實際開發中，向函數傳遞參數不可避免，但我們應該盡量減少函數接收的參數數量。下面舉個非常簡單的示例。有一個畫圖函數draw，它現在只能繪制正方形，接收了3個參數，分別是圖形的width、heigth以及square：
|
1
|
var draw = function( width, height, square ){}; |
但實際上正方形的面積是可以通過width和height計算出來的，于是我們可以把參數square從draw函數中去掉：
|
1
2
3
|
var draw = function( width, height ){ var square = width * height;}; |
假設以后這個draw函數開始支持繪制圓形，我們需要把參數width和height換成半徑radius， 但圖形的面積square始終不應該由客戶傳入，而是應該在draw函數內部，由傳入的參數加上一定的規則計算得來。此時，我們可以使用策略模式，讓draw函數成為一個支持繪制多種圖形的函數。
8.少用三目運算符
有一些程序員喜歡大規模地使用三目運算符，來代替傳統的if、else。理由是三目運算符性能高，代碼量少。不過，這兩個理由其實都很難站得住腳。
即使我們假設三目運算符的效率真的比if、else高，這點差距也是完全可以忽略不計的。在實際的開發中，即使把一段代碼循環一百萬次，使用三目運算符和使用if、else的時間開銷處在同一個級別里。
同樣，相比損失的代碼可讀性和可維護性，三目運算符節省的代碼量也可以忽略不計。讓JS文件加載更快的辦法有很多種，如壓縮、緩存、使用CDN和分域名等。把注意力只放在使用三目運算符節省的字符數量上，無異于一個300斤重的人把超重的原因歸罪于頭皮屑。
如果條件分支邏輯簡單且清晰，這無礙我們使用三目運算符：
|
1
|
var global = typeof window !== "undefined" ? window : this; |
但如果條件分支邏輯非常復雜，如下段代碼所示，那我們最好的選擇還是按部就班地編寫if、else。if、else語句的好處很多，一是閱讀相對容易，二是修改的時候比修改三目運算符周圍的代碼更加方便：
|
1
2
3
4
5
6
7
8
9
|
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.合理使用鏈式調用
經常使用jQuery的程序員相當習慣鏈式調用方法，在JavaScript中，可以很容易地實現方法的鏈式調用，即讓方法調用結束后返回對象自身，如下代碼所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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' ) ); |
或者：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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' ) ); |
使用鏈式調用的方式并不會造成太多閱讀上的困難，也確實能省下一些字符和中間變量，但節省下來的字符數量同樣是微不足道的。鏈式調用帶來的壞處就是在調試的時候非常不方便，如果我們知道一條鏈中有錯誤出現，必須得先把這條鏈拆開才能加上一些調試log或者增加斷點，這樣才能定位錯誤出現的地方。
如果該鏈條的結構相對穩定，后期不易發生修改，那么使用鏈式調用無可厚非。但如果該鏈條很容易發生變化，導致調試和維護困難，那么還是建議使用普通調用的形式：
|
1
2
3
4
|
var user = new User();user.setId( 1314 );user.setName( 'sven' ); |
10.分解大型類
在HTML5版“街頭霸王”的第一版代碼中，負責創建游戲人物的Spirit 類非常龐大，不僅要負責創建人物精靈，還包括了人物的攻擊、防御等動作方法，代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var Spirit = function( name ){ this.name = name;};Spirit.prototype.attack = function( type ){ // 攻擊 if ( type === 'waveBoxing' ){ console.log( this.name + ': 使用波動拳' ); }else if( type === 'whirlKick' ){ console.log( this.name + ': 使用旋風腿' ); }};var spirit = new Spirit( 'RYU' );spirit.attack( 'waveBoxing' ); // 輸出：RYU: 使用波動拳spirit.attack( 'whirlKick' ); // 輸出：RYU: 使用旋風腿 |
后來發現，Spirit.prototype.attack這個方法實現是太龐大了，實際上它完全有必要作為一個單獨的類存在。面向對象設計鼓勵將行為分布在合理數量的更小對象之中：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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 + ': 使用波動拳' ); }, whirlKick: function(){ console.log( this.spirit.name + ': 使用旋風腿' ); }}; |
現在的Spirit類變得精簡了很多，不再包括各種各樣的攻擊方法，而是把攻擊動作委托給Attack類的對象來執行，這段代碼也是策略模式的運用之一：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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: 使用波動拳spirit.attack( 'whirlKick' ); // 輸出：RYU: 使用旋風 |
11.用return退出多重循環
假設在函數體內有一個兩重循環語句，我們需要在內層循環中判斷，當達到某個臨界條件時退出外層的循環。我們大多數時候會引入一個控制標記變量：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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; } }}; |
第二種做法是設置循環標記：
|
1
2
3
4
5
6
7
8
9
10
11
|
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; } } }}; |
這兩種做法無疑都讓人頭暈目眩，更簡單的做法是在需要中止循環的時候直接退出整個方法：
|
1
2
3
4
5
6
7
8
9
|
var func = function(){ for ( var i = 0; i < 10; i++ ){ for ( var j = 0; j < 10; j++ ){ if ( i * j >30 ){ return; } } }}; |
當然用return直接退出方法會帶來一個問題，如果在循環之后還有一些將被執行的代碼呢？如果我們提前退出了整個方法，這些代碼就得不到被執行的機會：
|
1
2
3
4
5
6
7
8
9
10
|
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 ); // 這句代碼沒有機會被執行}; |
為了解決這個問題，我們可以把循環后面的代碼放到return后面，如果代碼比較多，就應該把它們提煉成一個單獨的函數：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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(); |
到此這篇關于了不起的11個JavaScript代碼重構最佳實踐小結的文章就介紹到這了,更多相關JavaScript 代碼重構內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://juejin.cn/post/6913529974850846727
