模式和重構之間有著一種與生俱來的關係。從某種角度來看，設計模式的目的就是為許多重構行為提供目標。

1.提煉函式

在JavaScript開發中，我們大部分時間都在與函式打交道，所以我們希望這些函式有著良好的命名，函式體內包含的邏輯清晰明瞭。如果一個函式過長，不得不加上若干註釋才能讓這個函式顯得易讀一些，那這些函式就很有必要進行重構。
如果在函式中有一段程式碼可以被獨立出來，那我們最好把這些程式碼放進另外一個獨立的函式中。這是一種很常見的優化工作，這樣做的好處主要有以下幾點。

• 避免出現超大函式。
• 獨立出來的函式有助於程式碼複用。
• 獨立出來的函式更容易被覆寫。
• 獨立出來的函式如果擁有一個良好的命名，它本身就起到了註釋的作用。

比如在一個負責取得使用者資訊的函式裡面，我們還需要列印跟使用者資訊有關的log，那麼列印log的語句就可以被封裝在一個獨立的函式裡：

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.合併重複的條件片段

如果一個函式體內有一些條件分支語句，而這些條件分支語句內部散佈了一些重複的程式碼，那麼就有必要進行合併去重工作。假如我們有一個分頁函式paging，該函式接收一個引數currPage，currPage表示即將跳轉的頁碼。在跳轉之前，為防止currPage傳入過小或者過大的數字，我們要手動對它的值進行修正，詳見如下虛擬碼：

var paging = function( currPage ){
  if ( currPage <= 0 ){
    currPage = 0;
    jump( currPage );  // 跳轉
  }else if ( currPage >= totalPage ){
    currPage = totalPage;
    jump( currPage );  // 跳轉
  }else{
    jump( currPage );  // 跳轉
  }
};

可以看到，負責跳轉的程式碼jump( currPage )在每個條件分支內都出現了，所以完全可以把這句程式碼獨立出來：

var paging = function( currPage ){
  if ( currPage <= 0 ){
    currPage = 0;
  }else if ( currPage >= totalPage ){
    currPage = totalPage;
  }
  jump( currPage );  // 把jump函式獨立出來
};

3.把條件分支語句提煉成函式

在程式設計中，複雜的條件分支語句是導致程式難以閱讀和理解的重要原因，而且容易導致一個龐大的函式。假設現在有一個需求是編寫一個計算商品價格的getPrice函式，商品的計算只有一個規則：如果當前正處於夏季，那麼全部商品將以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 ){
// ...
}

這句程式碼要表達的意思很簡單，就是判斷當前是否正處於夏天（7~10月）。儘管這句程式碼很短小，但程式碼表達的意圖和程式碼自身還存在一些距離，閱讀程式碼的人必須要多花一些精力才能明白它傳達的意圖。其實可以把這句程式碼提煉成一個單獨的函式，既能更準確地表達程式碼的意思，函式名本身又能起到註釋的作用。程式碼如下：

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瀏覽器，程式碼如下：

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();
``
下面我們靈活地運用迴圈，可以得到跟上面程式碼一樣的效果：
```js
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.提前讓函式退出代替巢狀條件分支

許多程式設計師都有這樣一種觀念：“每個函式只能有一個入口和一個出口。”現代程式語言都會限制函式只有一個入口。但關於“函式只有一個出口”，往往會有一些不同的看法。

下面這段虛擬碼是遵守“函式只有一個出口的”的典型程式碼：

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函式如下：

var del = function( obj ){
  if ( obj.isReadOnly ){  // 反轉if表示式
    return;
  }
  if ( obj.isFolder ){
    return deleteFolder( obj );
  }
  if ( obj.isFile ){
    return deleteFile( obj );
  }
};

6.傳遞物件引數代替過長的引數列表

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

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值不變就可以了：

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：

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

但實際上正方形的面積是可以通過width和height計算出來的，於是我們可以把引數square從draw函式中去掉：

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斤重的人把超重的原因歸罪於頭皮屑。

如果條件分支邏輯簡單且清晰，這無礙我們使用三目運算子：

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

但如果條件分支邏輯非常複雜，如下段程式碼所示，那我們最好的選擇還是按部就班地編寫if、else。if、else語句的好處很多，一是閱讀相對容易，二是修改的時候比修改三目運算子周圍的程式碼更加方便：

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中，可以很容易地實現方法的鏈式呼叫，即讓方法呼叫結束後返回物件自身，如下程式碼所示：

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' ) );

使用鏈式呼叫的方式並不會造成太多閱讀上的困難，也確實能省下一些字元和中間變數，但節省下來的字元數量同樣是微不足道的。鏈式呼叫帶來的壞處就是在除錯的時候非常不方便，如果我們知道一條鏈中有錯誤出現，必須得先把這條鏈拆開才能加上一些除錯log或者增加斷點，這樣才能定位錯誤出現的地方。

如果該鏈條的結構相對穩定，後期不易發生修改，那麼使用鏈式呼叫無可厚非。但如果該鏈條很容易發生變化，導致除錯和維護困難，那麼還是建議使用普通呼叫的形式：

var user = new User();

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

10.分解大型類

在HTML5版“街頭霸王”的第一版程式碼中，負責建立遊戲人物的Spirit 類非常龐大，不僅要負責建立人物精靈，還包括了人物的攻擊、防禦等動作方法，程式碼如下：

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這個方法實現是太龐大了，實際上它完全有必要作為一個單獨的類存在。面向物件設計鼓勵將行為分佈在合理數量的更小物件之中：

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類的物件來執行，這段程式碼也是策略模式的運用之一：

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退出多重迴圈

假設在函式體內有一個兩重迴圈語句，我們需要在內層迴圈中判斷，當達到某個臨界條件時退出外層的迴圈。我們大多數時候會引入一個控制標記變數：

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;
    }
  }
};

第二種做法是設定迴圈標記：

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;
      }
    }
  }
};

這兩種做法無疑都讓人頭暈目眩，更簡單的做法是在需要中止迴圈的時候直接退出整個方法：

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

當然用return直接退出方法會帶來一個問題，如果在迴圈之後還有一些將被執行的程式碼呢？如果我們提前退出了整個方法，這些程式碼就得不到被執行的機會：

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後面，如果程式碼比較多，就應該把它們提煉成一個單獨的函式：

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 程式碼重構內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！