惰性载入函数

定义

我们先看下面的例子：在 DOM 事件开发中，我们会遇到浏览器兼容问题，这时需要进行一次环境的判断。

// 简化写法
function addEvent (type, el, fn) {
    if (window.addEventListener) {
        el.addEventListener(type, fn, false)
    } else if (window.attachEvent) {
        el.attachEvent('on' + type, fn)
    }
}

如果用户使用的浏览器支持内置的 addEventListener，那么它就一直支持了，那么这种判断就变得没必要了。即使只有一个 if 语句的代码，也肯定比没有 if 语句的慢，所以如果 if 语句不必每次执行，那么代码可以运行地更快一些。解决方案就是惰性载入的技巧。

惰性载入表示函数执行的分支仅会执行一次。下面介绍两种惰性载入的方式。

优化

第一种就是在函数被调用时再处理函数。在第一次调用的过程中，该函数会被覆盖为另外一个按合适方式执行的函数，这样任何对原函数的调用都不用再经过执行的分支了。

function addEvent (type, el, fn) {
    if (window.addEventListener) {
        addEvent = function (type, el, fn) {
            el.addEventListener(type, fn, false)
        }
    } else if (window.attachEvent) {
        addEvent = function (type, el, fn) {
            el.attachEvent('on' + type, fn)
        }
    }
}

第二种就是使用闭包的形式。

var addEvent = (function () {
    if (window.addEventListener) {
        return function (type, el, fn) {
            el.addEventListener(type, fn, false)
        }
    } else if (window.attachEvent) {
        return function (type, el, fn) {
            el.attachEvent('on' + type, fn)
        }
    }
})()

参考文献

《JavaScript高级程序设计》
JavaScript专题之惰性函数在新窗口打开