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

更新日期: 2019-12-17阅读: 1.6k标签: 函数分享

复制链接

新浪微博

QQ 好友

扫一扫分享

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

也就是说，我们在进行第一次判断后，对函数进行重新定义，这样在之后再进行绑定时不需要再进行判断，从性能角度讲，虽然创建了闭包，但优于后续进行多次同一个的判断。

这就是函数的惰性思想，对于同一个判断，我们只需要进行一次就好。

链接: https://www.fly63.com/article/detial/7465

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

JavaScript 函数式编程

Js函数式编程，给你的代码增加一点点函数式编程的特性

让我们来创建一个JavaScript Wait函数

JavaScript函数创建的细节

编写小而美函数的艺术

javascript回调函数的理解和使用方法(callback)

js调用函数的几种方法_ES5/ES6的函数调用方式

JavaScript中函数的三种定义方法

js在excel的编写_excel支持使用JavaScript自定义函数编写

js中的立即执行函数的写法，立即执行函数作用是什么？