您的位置：首页 > Web前端 > JavaScript

js性能优化之惰性加载函数

2017-04-26 11:33 761 查看

一个普通的浏览器嗅探技术，每次都要调用addEvent进行判断，执行if语句。

// 浏览器嗅探技术：指的就是检测浏览器是否支持
var 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()，并且根据浏览器的不同返回一个新的匿名函数

var addEvent = (function() {
if (window.addEventListener) {
return function(elem, type, handler) {
elem.addEventListener(type, handler, false) //webkit、os
}
}
if (window.attachEvent) {
return function(elem, type, handler) {
elem.attachEvent('on' + type, handler) //IE浏览器
};
}
})()

惰性加载函数，相当于重新封装一次addEvent，页面一加载就加载addEvent函数，这个跟前面的很像，只不过是在函数内部重写addEvent

<body>
<div id="div1">div1</div>
</body>
<script type="text/javascript">
var addEvent = function(elem, type, handler) {
if (window.addEventListener) {
addEvent = function(elem, type, handler) {
console.log('chrome addEvent');
elem.addEventListener(type, handler, false)
}
} else if (window.attachEvent) {
addEvent = function(elem, type, handler) {
console.log('ie addEvent');
elem.attachEvent('on' + type, handler)
}
}
addEvent(elem, type, handler)
}
var div = document.getElementById('div1');
addEvent(div, 'click', function() {
alert(1);
})
addEvent(div, 'click', function() {
alert(2)
})
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航