惰性加载函数

场景

写一个各浏览器兼容事件绑定函数

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设计模式与开发实践》

作者

Liang

发布于

2021-01-27

更新于

2021-12-25

许可协议


评论