11 個 JavaScript 代碼重構最佳實踐
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();
下面我們靈活地運用循環,可以得到跟上面代碼一樣的效果:
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();
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/HWqVpE6uaViO9YNJeVW9aA