11個JavaScript代碼重構最佳實踐

時間 2021-08-13

標籤程序員 ajax 編程瀏覽器緩存編程語言 ide 函數 oop 性能欄目 JavaScript 简体版

原文原文鏈接

1.提煉函數

在JavaScript開發中，咱們大部分時間都在與函數打交道，因此咱們但願這些函數有着良好的命名，函數體內包含的邏輯清晰明瞭。若是一個函數過長，不得不加上若干註釋才能讓這個函數顯得易讀一些，那這些函數就頗有必要進行重構。程序員

若是在函數中有一段代碼能夠被獨立出來，那咱們最好把這些代碼放進另一個獨立的函數中。這是一種很常見的優化工做，這樣作的好處主要有如下幾點。ajax

避免出現超大函數。編程
獨立出來的函數有助於代碼複用。瀏覽器
獨立出來的函數更容易被覆寫。緩存
獨立出來的函數若是擁有一個良好的命名，它自己就起到了註釋的做用。編程語言

好比在一個負責取得用戶信息的函數裏面，咱們還須要打印跟用戶信息有關的log，那麼打印log的語句就能夠被封裝在一個獨立的函數裏：ide

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 )在每一個條件分支內都出現了，因此徹底能夠把這句代碼獨立出來：oop

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