iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 27
0
Modern Web

JS Design Pattern 系列 第 27

JS Design Pattern Day27-重構(上)

第27天。今天剛好是1111,還記得剛工作的第二年,那個時候1111購物優惠的活動差不多剛開始,第一次遇到這種事難免心智不健全,差點傾家蕩產...

重構

設計模式跟程式重構是有一些微妙的關係,可以說是設計模式是程式重構的目標。接下來會舉各種範例來表明一些重構程式的方法。

1.擷取程式並函數化:
我們寫程式中大部分時間都在與函數奮戰,理論上來說如果一個函數過於龐大很是妨礙閱讀的,之前講的各種原則也都是希望我們將物件最小粒化。在稍微年長一點的專案,都會看到程式碼被要求寫了不少的註解,以方便之後的人維護或是了解其功能,但如果我們把這些程式碼一段一段的獨立出來變成函數,且好好的命名這些函數名稱,其實就可以省去這些註解了,這個行為算是很常見的最佳化動作,這樣的動作有以下幾點的好處:

  • 避免函數過大。
  • 這些獨立的函數可以被有效重用。
  • 獨立出來的函數理論上應盡量負責單一職責,這樣更容易維護或是修改。
  • 獨立的函數若命名良好,可以讓人明白整個函數的行為,有效代替註解。

舉例來說,我們寫一段從後端撈取資料後,列印出這些資料的功能

var getInfo = function () {
    ajax('https://xxx.xxx',function(data){
        console.log(data.id);
        console.log(data.title);
        console.log(data.id);
    });
};

我們就可以把整個列印的行為獨立出來

var getInfo = function () {
    ajax('https://xxx.xxx', printData);
};

var printData = function (data) {
    console.log(data.id);
    console.log(data.title);
    console.log(data.id);
};

2.合併重複的程式碼
大家都知道,寫程式最討厭看到一樣的程式碼一直出現,即便在不同條件敘述句之下,我們仍要盡量的減少重複的程式。
這邊舉個範例,我們寫一個前端畫面跳頁的功能,我們會去檢查要前往的頁面做一些處理(如果要去的頁面小於零,就到第一頁,若比總頁數還大,就到最後一頁):

var paging = function (gotoPageNumber) {
    if (gotoPageNumber < 0) {
        gotoPageNumber = 0;
        jumpPage(gotoPageNumber);
    } else if (gotoPageNumber > totalPage) {
        gotoPageNumber = totalPage;
        jumpPage(gotoPageNumber);
    } else {
        jumpPage(gotoPageNumber);
    }
};

那我們至少可以把重複的部分拉出來

var paging = function (gotoPageNumber) {
    if (gotoPageNumber < 0) {
        gotoPageNumber = 0;
    } else if (gotoPageNumber > totalPage) {
        gotoPageNumber = totalPage;
    }
    jumpPage(gotoPageNumber);
};

3.把條件也變成函數
在維護程式的時候很常會看到這樣的if判斷

var mystery=function(){
    if(temp>100 && color==='white' && oil>20 && water<20){
        ....
    }
};

除了奇怪的縮寫不說之外,我怎會知道這個if判斷是表示什麼意義呢?所以為了讓以後的自己或是接替哪的人著想,我們可以這樣寫

var mystery = function () {
    if (isCooked(temperature, color, oil, water)) {
        ...
    }
};

var isCooked = function (temperature, color, oil, water) {
    return (temperature > 100 && color === 'white' && oil > 20 && water < 20)
}

這樣我們就可以知道這個判斷是在判斷食物是否煮熟了,這樣也說明了一開始提到的,如果你把你的函數命名寫得好,其實就具有註解的功能了。


上一篇
JS Design Pattern Day26-介面導向程式設計
下一篇
JS Design Pattern Day28-重構(中)
系列文
JS Design Pattern 30

尚未有邦友留言

立即登入留言