js优化之惰性加载函数
直接上案例，copy后保存为html文件，打开浏览器控制台即可看到效果。未优化的addEvent，每调用一次都会进行一次判断。而优化后的addEvent只在首次被调用时进行判断，其后再次调用时，将不再进行浏览器支持的事件监听判断。
注意：调用时，记得注释其他两个addEvent。
<body>
<div id="div1">div1</div></body>
<script type="text/javascript">
/* 优化方案一：方法重写后再调用*/
function addEvent (type, element, fun) {
if (element.addEventListener) {
console.log(123);
addEvent = function (type, element, fun) {
element.addEventListener(type, fun, false);
}
}
else if(element.attachEvent){
addEvent = function (type, element, fun) {
element.attachEvent('on' + type, fun);
}
}
else{
addEvent = function (type, element, fun) {
element['on' + type] = fun;
}
}
addEvent(type, element, fun);
}
/* 优化方案二：匿名函数重写与执行*/
var addEvent = (function(type, element, fun) {
if (window.addEventListener) {
console.log(123);
return function(type, element, fun) {
element.addEventListener(type, fun, false) //webkit、os
}
}
if (window.attachEvent) {
return function(type, element, fun) {
element.attachEvent('on' + type, fun) //IE浏览器
};
}
})();
/* 没有优化的添加事件方法：每次调用都会判断*/
function addEvent (type, element, fun) {
if (element.addEventListener) {
console.log(123);
element.addEventListener(type, fun, false);
}
else if(element.attachEvent){
element.attachEvent('on' + type, fun);
}
else{
element['on' + type] = fun;
}
}
var div = document.getElementById('div1');
addEvent( 'click',div, function() {
alert(1);
})
addEvent( 'click',div, function() {
alert(2)
})
</script>
惰性载入函数有两个主要优点：
第一是显而易见的效率问题，虽然在第一次执行的时候函数会意味赋值而执行的慢一些，但是后续的调用会因为避免的重复检测更快；
第二个是要执行的适当代码只有当实际调用函数是才执行，很多JavaScript库在在加载的时候就根据浏览器不同而执行很多分支，把所有东西实现设置好，而惰性载入函数将计算延迟，不影响初始脚本的执行时间。
惰性载入函数应用场景总结（以下2条件同时满足）：
1 应用频繁，如果只用一次，是体现不出它的优点出来的，用的次数越多，越能体现这种模式的优势所在；
2 固定不变，一次判定，在固定的应用环境中不会发生改变；