JS高階編程技巧--惰性函數

在vue、react等框架大量應用之前，我們需要使用jQuery或者原生js來操作dom寫代碼，在用原生js進行事件綁定時，我們可以應用DOM2級綁定事件的方法，即：元素.addEventListener()，因為相容性，還有：

function emit(element, type, func) {
    if (element.addEventListener) {
        element.addEventListener(type, func, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + type, func);
    } else { //如果不支持DOM2級事件
        element['on' + type] = func;
    }
}

這個時候，如果一個元素需要通過一個行為添加多個點擊事件，如：

emit(div, 'click', fn1);
emit(div, 'click', fn2);

在第一次給div進行fn1事件綁定時，已經知道瀏覽器可以執行哪種綁定方式，執行綁定fn2時，就沒有必要再次進行判斷，那麼代碼可以進行修改：

function emit(element, type, func) {
    if (element.addEventListener) {
        emit = function (element, type, func) {
            element.addEventListener(type, func, false);
        };
    } else if (element.attachEvent) {
        emit = function (element, type, func) {
            element.attachEvent('on' + type, func);
        };
    } else {
        emit = function (element, type, func) {
            element['on' + type] = func;
        };
    }
    emit(element, type, func);
}

也就是說，我們在進行第一次判斷後，對函數進行重新定義，這樣在之後再進行綁定時不需要再進行判斷，從性能角度講，雖然創建了閉包，但優於後續進行多次同一個的判斷。

這就是函數的惰性思想，對於同一個判斷，我們只需要進行一次就好。