在实际开发中,我们编写的大多数JavaScript代码包含大量的 if…else语句或者 try… catch 语句来做功能检测。
举一个简单的例子:事件的绑定,我们会首先想到下列的代码

1
2
3
4
5
6
7
8
9
var addHandler= function(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}

分析以上代码,为了兼容不同浏览器,每次执行 addHandler 时我们会去做功能检测,逐一去走 addHandler 中的if,获取到可以兼容的代码块。无可厚非,我们通过这两三个判断保证了每次都能使用到兼容浏览器的代码,注意到,我用了“每次”这个词。是的,以上代码每次调用 addHandler 都要做功能检测,而我们知道,当我们用某个浏览器打开网页时,其实就已经确定了哪个if/try可用了,完全没必要每次调用都检测。因此,我们引入了惰性加载函数的概念。

惰性加载表示函数执行的分支仅会发生一次。有两种实现惰性加载的方式:在函数被调用时再处理函数;在声明函数时就指定适当函数。

我们来优化一下addHandler 函数:

1、在函数被调用时再处理函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var addHandler= function(element, type, handler) {
if (element.addEventListener) {
addHandler = function(element, type, handler) {
element.addEventListener(type, handler, false);
};
} else if (element.attachEvent) {
addHandler = function(element, type, handler) {
element.attachEvent("on" + type, handler);
}

} else {
addHandler = function(element, type, handler) {
element["on" + type] = handler;
}

}
return addHandler(element, type, handler);
},

if语句中的每一个分支都会给addHandler 变量赋值,有效覆盖了原有的函数,最后一步就是调用新赋的函数。下一次就会直接调用新赋的函数。


2、在声明函数时就指定适当的函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let addEvent2 = ((type, element, fun) => {
if (element.addEventListener) {
return (type, element, fun) => {
element.addEventListener(type, fun, false);
}
} else if (element.attachEvent) {
return (type, element, fun) => {
element.attachEvent('on' + type, fun);
}
} else {
return (type, element, fun) => {
element['on' + type] = fun;
}
}
})()

我们发现第二种方法在此例中并不适用,因为它是一个立即执行函数,带参显然并不合适(各种undefined),那么我们可以用 JavaScript高级程序设计 中的一个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let createXHR = ( () => {
if (typeof XMLHttpRequest != 'undefined'){
return () => {
...
}
} else if (typeof ActiveXobject != 'undefined') {
return () => {
...
}
} else {
return () => {
...
}
}
})();

总结:

可以总结到,所谓在声明函数时就指定适当函数,即声明函数为匿名、立即执行函数,根据功能检测(if/try判断)结果指定函数体,当然,既然是一个立即执行函数,我们得注意使用场合。

以上两种方式都只在第一次执行函数时做了性能检测,省去了后续调用时多余的操作,优化了性能。




愿你的坚持终有收获。