惰性函数优化-优快云博客

惰性函数

什么是惰性函数
怎么使用惰性函数

什么是惰性函数

在 Web 开发中，因为浏览器之间实现的差异，一些嗅探工作总是不可避免的。在这些嗅探工作中，有很多重复的执行过程，这时我们就需要用惰性函数来简化或避免这些重复的执行过程。

怎么使用惰性函数

比如，我们需要一个在各个浏览器中能够通用的事件绑定函数addEvent()，我们通常的写法是：

const addEvent = function (ele, type, handler) {
    if (window.addEventListener) {
        return ele.addEventListener(type, handler, false);
    }
    if (window.attachEvent) {
        return ele.attachEvent('on' + type, handler);
    }
}

但是这个方法的问题在于，当它每次被调用时，也就是每次给 DOM 元素绑定事件的时候，都会执行里面的 if 条件分支。

这就是重复的执行过程。

那我们在换一种思路，我们把嗅探浏览器的操作提前到代码加载的时候，在代码加载的时候就立刻进行第一次判断，以便让addEvent()函数返回一个包裹了正确逻辑的函数，例如：

const addEvent = (function () {
    if (window.addEventListener) {
        return function (elem, type, handler) {
            elem.addEventListener(type, handler, false);
        }
    }
    if (window.attachEvent) {
        return function (elem, type, handler) {
            elem.attachEvent('on' + type, handler);
        }
    }
})();

但是这样写依然有缺点，有可能或许我们从头到尾都没有使用过addEvent()函数，也就是说也许编写的页面压根儿就没有绑定过事件。这样看来，前一次的浏览器嗅探工作就是完全多余的操作，而且也会稍稍延长页面 ready 的时间。

那我们再换一个方案，既依然将addEvent()声明为一个普通函数，在函数里依然有一些分支判断。但是在第一次进入条件分支之后，在函数内部会重写这个函数，重写之后的函数就是我们所期望的addEvent()函数，在下一次进入addEvent()函数的时候，addEvent()函数里不再存在条件分支语句，具体的代码如下：

const addEvent = function (elem, type, handler) {
            if (window.addEventListener) {
                addEvent = function (elem, type, handler) {
                    elem.addEventListener(type, handler, false);
                }
            }
            if (window.attachEvent) {
                addEvent = function (elem, type, handler) {
                    elem.attachEvent('on' + type, handler);
                }
            }
            addEvent(elem, type, handler); // 第一次绑定事件的时候需要手动调用一下
        };
        const div = document.getElementById('div1');
        addEvent(div, 'click', function () {
            alert(1);
        });
        addEvent(div, 'click', function () {
            alert(2);
        });