iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
0
Modern Web

JS Design Pattern 系列 第 29

JS Design Pattern Day29-重構(下)

  • 分享至 

  • xImage
  •  

第29天。剩一天了!!!!

重構 最後一part

8.少用三元運算子
有些程式設計師喜歡用三元運算子,我個人其實也蠻常用的,相較if else可以更短更簡便的使用,‘據說’效能是也有些許提高:

var isFail = score < 60 ? true : false;

如果邏輯簡單,且表達清晰的話其實是可以使用的,但如果非常複雜的邏輯就不建議使用了,像是:

var isFail = score < 60 ?
    specialScore > 0 ?
        (specialScore + score) > 60 ? false : true
        : true
    : false;

我曾經在維護某古老程式的時候看過大概是這個四倍長的code,差點問候人家家人。在這麼多邏輯條件的狀況下,用if else其實是更助於閱讀,且修改起來更不容易出錯。

9.合理使用鏈式呼叫
像我個人很常使用jQuery,裡面就很常使用鏈式呼叫:

$('<div>').attr('id','test').text('5566').data('gg',{test:123});

那在我們自己寫的模組中也會利用回傳本身物件的方式達到這種使用方式:

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

使用的時候就可以:

var userA = new User();
userA.setId('56').setName('yoyo');

其實這樣做在程式變動很劇烈的時候(可能是剛開發或是常出現bug在維護階段),要偵錯下斷點是相對麻煩的,在模組穩定之前建議是拆開來使用:

userA.setId('56');
userA.setName('yoyo');

10.用return結束迴圈
假設使用到多層迴圈,並且要在某個條件下就要完整脫離最外層迴圈,以前可能比較早期一點的寫法會這麼做:

var func = function () {
    var flag = false;
    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
            console.log(i, j);
            if (i * j > 30) {
                flag = true;
                break;
            }
        }
        if (flag === true) {
            break;
        }
    }
};

或是

var tesst = function () {
    outerLoop:
    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
            console.log(i, j);
            if (i * j > 30) {
                break outerLoop;
            }
        }
    }
};

好像現在的人比較少這樣寫了?!
不管怎樣,這樣的寫法2都是相對比較不清楚的,可以換成用return的做法:

var returnFunc = function () {
    var flag = false;
    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
            console.log(i, j);
            if (i * j > 30) {
                return;
            }
        }
    }
};

如果有什麼是要在迴圈之後還要執行的也可以直接接在return後面。

現在我個人都是使用JS提供陣列使用的some或是forEach這類函數來使用,因為我覺得單行程式碼其實表達起來更加清楚,如果多層迴圈的話也可以包在各自的函數中,畫面也會比較乾淨:

var someFunc = function () {
    var datas = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    datas.some(firstLoop);

    function firstLoop(num1) {
        return datas.some(secondLoop);

        function secondLoop(num2) {
            console.log(num1, num2);
            return num1 * num2 > 30;
        }
    }
};

好以上三篇就是這本書(JavaScript設計模式與開發實踐)最後一章了,裏面額外加了一些我個人的看法與做法,就這樣囉


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

尚未有邦友留言

立即登入留言