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

文章來源于公眾號：Vue中文社區(qū)

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

1.提煉函數(shù)

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

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

• 避免出現(xiàn)超大函數(shù)。
• 獨立出來的函數(shù)有助于代碼復用。
• 獨立出來的函數(shù)更容易被覆寫。
• 獨立出來的函數(shù)如果擁有一個良好的命名，它本身就起到了注釋的作用。

比如在一個負責取得用戶信息的函數(shù)里面，我們還需要打印跟用戶信息有關(guān)的 log ，那么打印 log 的語句就可以被封裝在一個獨立的函數(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.合并重復的條件片段

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

var paging = function( currPage ){
    if ( currPage = totalPage ){
        currPage = totalPage;
        jump( currPage );    // 跳轉(zhuǎn)
    }else{
        jump( currPage );    // 跳轉(zhuǎn)
    }
};

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

var paging = function( currPage ){
    if ( currPage = totalPage ){
        currPage = totalPage;
    }
    jump( currPage );    // 把jump函數(shù)獨立出來
};

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

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

var getPrice = function( price ){
    var date = new Date();
    if ( date.getMonth() >= 6 && date.getMonth() = 6 && date.getMonth() = 6 && date.getMonth() 30 ){
                flag = true;
                break;
            }
        }
        if ( flag === true ){
            break;
        }
    }
};

第二種做法是設置循環(huán)標記：

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

這兩種做法無疑都讓人頭暈目眩，更簡單的做法是在需要中止循環(huán)的時候直接退出整個方法：

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

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

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 );    // 這句代碼沒有機會被執(zhí)行
};

為了解決這個問題，我們可以把循環(huán)后面的代碼放到return后面，如果代碼比較多，就應該把它們提煉成一個單獨的函數(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();

以上就是W3Cschool編程獅關(guān)于11個JavaScript代碼重構(gòu)最佳實踐的相關(guān)介紹了，希望對大家有所幫助。