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

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

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

1.提煉函數(shù)

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

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

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

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

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

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

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

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

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

在程序設(shè)計(jì)中，復(fù)雜的條件分支語句是導(dǎo)致程序難以閱讀和理解的重要原因，而且容易導(dǎo)致一個(gè)龐大的函數(shù)。假設(shè)現(xiàn)在有一個(gè)需求是編寫一個(gè)計(jì)算商品價(jià)格的getPrice函數(shù)，商品的計(jì)算只有一個(gè)規(guī)則：如果當(dāng)前正處于夏季，那么全部商品將以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;
        }
    }
};

第二種做法是設(shè)置循環(huán)標(biāo)記：

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

這兩種做法無疑都讓人頭暈?zāi)垦＃?jiǎn)單的做法是在需要中止循環(huán)的時(shí)候直接退出整個(gè)方法：

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

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

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

為了解決這個(gè)問題，我們可以把循環(huán)后面的代碼放到return后面，如果代碼比較多，就應(yīng)該把它們提煉成一個(gè)單獨(dú)的函數(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個(gè)JavaScript代碼重構(gòu)最佳實(shí)踐的相關(guān)介紹了，希望對(duì)大家有所幫助。