场景
写一个各浏览器兼容事件绑定函数
1
2
3
4
5
6
7
8
| let addEvent = function (elem, type, handler) {
if (window.addEventListener) {
return elem.addEventListener(type, handler, false);
}
if (window.attachEvent) {
return elem.attachEvent('on' + type, handler);
}
}
|
缺点：每一次调用都必须执行一次if判断
方案一
在该代码被加载时，利用立即执行函数做一次判断，然后返回给addEvent正确的事件绑定函数
1
2
3
4
5
6
7
8
9
10
11
12
| let 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绑定事件函数一直都没有被调用，那么就白白做了一次浏览器嗅探
方案二：惰性载入函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| let 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);
}
|
缺点：首次调用较慢
参考
《Javascript设计模式与开发实践》