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

在vue、react等框架大量應用以前，咱們須要使用jQuery或者原生js來操做dom寫代碼，在用原生js進行事件綁定時，咱們能夠應用DOM2級綁定事件的方法，即：元素.addEventListener()，由於兼容性，還有：

元素.attachEvent()。因此咱們須要封裝成一個方法：

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

 

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

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