定义:惰性载入表示函数执行的分支只会在函数第一次掉用的时候执行,在第一次调用过程中,该函数会被覆盖为另一个按照合适方式执行的函数,这样任何对原函数的调用就不用再经过执行的分支了。
上面一坨可能看起来不那么优雅 下面我们直接亮代码
我们就以一个简单的需求来介绍惰性函数吧
需求:函数返回第一次调用的时间戳 之后不管执行多少次 函数返回的都是第一次调用的时间戳
var t = null;
function firstTime() {
if (t) {
return t;
}
t = new Date().getTime();
return t;
}
上面代码会污染到全局变量 所以我们改进一下
var firstTime = (function () {
var t = null;
return function () {
if (t) {
return t;
}
t = new Date().getTime();
return t;
}
})()
这样我们就实现了我们的需求 但是我们会发现 我们在第一次调用firstTime函数之后就已经得到了t
按理来说我们在下一次调用函数时直接返回这个t就可以了 但是我们回看我们的代码 发现每次都需要加一次判断
这样就导致了判断代码的冗余 而惰性函数就是为了解决这个问题
现在你可以再回去试着理解一下顶部的加粗字体
当你对惰性函数定义有了一定理解后 我们现在再来看惰性函数的实现
还是使用上面的需求
function firstTime() {
var t = new Date().getTime();
firstTime = function () {
return t;
}
return t;
}
现在你可以再回去看一下顶部的惰性函数的定义 我相信你对惰性函数会有更深的理解
概念问题解决了 下面我们来看下实际开发的应用
我们知道不同浏览器存在js兼容问题 就拿事件绑定来说 ie和w3c就有着不同的实现 而我们在实际开发往往会封装一个通用的api用来注册事件
function addEvent(dom, type, handler) {
if (dom.addEventListener) {
dom.addEventListener(type, handler, false);
}else {
dom.attachEvent('on' + type, handler);
}
}
上面代码我们明显可以发现一个性能问题 我们在第一次绑定事件之后就已经知道了浏览器的环境 就不需要在判断浏览器环境了 而我们的代码并非如此
下面我们使用惰性函数对其进行优化
function addEvent(dom, type, handler) {
if (dom.addEventListener) {
dom.addEventListener(type, handler, false);
addEvent = function () {
dom.addEventListener(type, handler, false);
}
}else {
dom.attachEvent('on' + type, handler);
addEvent = function () {
dom.attachEvent('on' + type, handler);
}
}
}