JS高阶编程技巧--惰性函数

在vue、react等框架大量应用以前,咱们须要使用jQuery或者原生js来操做dom写代码,在用原生js进行事件绑定时,咱们能够应用DOM2级绑定事件的方法,即:元素.addEventListener(),由于兼容性,还有:vue

元素.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;
    }
}

 

这个时候,若是一个元素须要经过一个行为添加多个点击事件,如:react

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

 

也就是说,咱们在进行第一次判断后,对函数进行从新定义,这样在以后再进行绑定时不须要再进行判断,从性能角度讲,虽然建立了闭包,但优于后续进行屡次同一个的判断。闭包

这就是函数的惰性思想,对于同一个判断,咱们只须要进行一次就好。框架

相关文章
相关标签/搜索