标签：
也许最常见的重复工作就是浏览器探测（当然“不要重复工作”只是一种思想，并不一定针对浏览器探测）。
考虑一个添加事件处理器的例子，典型的跨浏览器代码写法如下：
function addHandler(target,eventType,handler) {
if(target.addEventListener){ // DOM2 Events
target.addEventListener(eventType,handler,false);
}
else { // IE
target.attachEvent(‘on‘+eventType,handler);
}
}
addHandler(document,‘click‘,function(){
console.log(‘hello world‘);
});
但是如果一个页面调用了好多次addHandler函数添加事件，每次都会去做浏览器的判断，但是事实是每次的判断结果都是一样的，因为浏览器并不会变化，这时我们就可以针对“不要重复工作”做一个优化策略。
function addHandler(target,eventType,handler){
if(target.addEventListener){ // DOM2 Events
addHandler=function(target,eventType,handler){
target.addEventListener(eventType,handler,false);
};
}else{ // IE
addHandler=function(target,eventType,handler){
target.attachEvent(‘on‘+eventType,handler);
};
}
addHandler(target,eventType,handler);
}
// 调用
addHandler(document,‘click‘,function(){
console.log(‘hello world‘);
});
addHandler(window,‘keydown‘,function(){
console.log(‘key down‘);
});
方法在第一次被调用时，会先检查并决定使用哪种方法去绑定事件处理器，然后原始函数被包含正确操作的新函数覆盖。最后一步调用新的函数（也可以直接return 新的函数），并传入原始参数。之后的每次调用addHandler()都不会再做检测，因为检测代码已经被新的函数覆盖。
调用延迟加载函数时，第一次总会消耗较长的时间，因为它必须运行检测接着再调用另一个函数完成任务，但随后调用函数会变快，因为不需要再进行检测。当一个函数在页面中不会立即调用时，延迟加载是最好的选择。
条件预加载
条件预加载会在脚本加载期间提前检测，而不会等到函数被调用：
var addHandler=document.addEventListener?
function(target,eventType,handler){
target.addEventListener(eventType,handler,false);
}:
function(target,eventType,handler){
target.attachEvent(‘on‘+eventType,handler);
};
// 调用
addHandler(document,‘click‘,function(){
console.log(‘hello world‘);
});
addHandler(window,‘keydown‘,function(){
console.log(‘key down‘);
});
条件预加载确保所有函数消耗的时间相同，其代价是需要在脚本加载时就检测，而不是加载后。预加载适用于一个函数马上就要被用到，并且在整个页面的生命周期中频繁出现的场合。
标签：
原文地址：http://www.cnblogs.com/abapscript/p/4676820.html
