iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
0
Modern Web

JS Design Pattern 系列 第 28

JS Design Pattern Day28-重構(中)

  • 分享至 

  • xImage
  •  

第28天。 想想我已經廢話連28篇了,真可怕,請再容忍我最後幾天我就完賽了 拜託拜託

繼續 重構

4.合理使用迴圈
在寫程式的時候,我們會盡可能地減少重複代碼。在條件分支或是一些環境判斷中,依照不同條件或是環境帶入不同參數執行相同函數時,我們可以利用迴圈來減少重複代碼。舉個例子,今天我們有個函數是設定畫面中的元素資料,如果找不到此元素就會回傳Error。在這先假設我們不知道元素是否存在,所以我們就會一直嘗試:

var setInfo = function () {
    try {
        setElementData('name', 'test');
    } catch (e) {
        try {
            setElementData('id', '1');
        } catch (e) {
            setElementData('other', 'error');
        }
    }
}   

接下來我們用迴圈來修改:

var setInfo = function () {
    var dataSets = [
        { elementName: 'name', data: 'test' },
        { elementName: 'id', data: '1' },
        { elementName: 'other', data: 'error' }];
    for (var i = 0, data; data = dataSets[i++];) {
        try {
            return setElementData(data.elementName, data.data);
        } catch (e) { }
    }
};

或者,如果setElementData是返回true/false的話可以利用Array.prototype.some()的方法,我們先強制回傳true/false:

var setInfo = function () {
    var dataSets = [
        { elementName: 'name', data: 'test' },
        { elementName: 'id', data: '1' },
        { elementName: 'other', data: 'error' }];

    dataSets.some(setData);

    function setData(data) {
        try {
            setElementData(data.elementName, data.data);
            return true;
        } catch (e) {
            return false;
        }
    }
};

5.讓不感興趣的人提前結束函數:
當出現一個不得已只能用if else分支表達的函數時,維護的人總是會很痛苦,那我們可能可以儘早的結束他的痛苦。假設我們有個刪除檔案的函數,他只會傳入一個物件,我們必須靠傳入的物件中的數值判斷要做什麼樣的動作,例如檔案是唯讀的話就不可以刪除,是資料夾的話就要刪除資料夾:

var del = function (obj) {
    var ret;
    if (!obj.isReadOnly) {
        if (obj.isFolder) {
            ret = delFolder(obj);
        } else if(obj.isFile){
            ret = delFile(obj);
        }
    }
    return ret;
};

我們可以把if表達式進行翻轉,來達到盡可能早點讓閱讀程式者儘早知道自己想要的結果:

var del = function (obj) {
    if (obj.isFolder) {
        return;
    }
    if (obj.isFolder) {
        return delFolder(obj);
    }
    if (obj.isFile) {
        return delFile(obj);
    }
};

6.參數使用物件傳遞,代替過長的參數列
一個函數如果參數過多,會讓人難以理解跟使用,尤其是大型專案中,一個共用的函數經過多人維護之後,參數量會有相當驚人的成長。維護函數時,當下可能覺得增加一個參數就可以快速解決問題,但時間一久之後的人要用的話會越來越難以使用,而且任何一次修改到參數的順序就會增加風險,使用的時候若有沒使用到的參數還要注意是否填入undefined或是null,現在我們先舉一個較多參數的函數當範例:

var setUserData = function (id,name,address,sex,phone,facebook) {
    console.log(id);
};

我們把所有參數改為一個物件:

var setUserData = function (userData) {
    console.log(userData.id);
};

這樣使用起來只要注意是否傳入要使用的鍵值就好:

setUserData({
    id:'jumi',
    name:'...',
    address:'...'
});

7.盡量減少參數
上面說的參數最好是盡量減少,就連物件裡的key也盡量減少,但減少的方法就必須依照現實狀況而定了,這邊舉的例子是可以在函數裡計算出來的其實可以不用再次帶入,假設我們要繪製一個矩形,我們可能需要知道矩形的長寬與面積才能畫:

var draw = function (width, height, square) {
    ...
}

但其實面積是可以利用前兩個參數算出來的,所以我們就可以省略最後一個參數:

var draw = function (width, height) {
    var square=width*height;
    ...
}

但這還是得實際看狀況,有些相當耗能的計算就相對的要避免。


上一篇
JS Design Pattern Day27-重構(上)
下一篇
JS Design Pattern Day29-重構(下)
系列文
JS Design Pattern 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言