JS高级技巧之不要重复工作

别重复做已经完成的工作。

浏览器检查(功能检测)是常见的重复工作。基于浏览器的功能做分支判断导致产生大量的代码。

/**
* 添加事件处理器
* @param {DOM Object} target    触发事件的元素
* @param {String} eventType    事件类型
* @param {Function} handler    事件处理器
*/
function addHandler(target, eventType, handler) {
if (target.addEventListener) {    //DOM2 Events
//true 表示捕获阶段调用事件处理程序
//false表示冒泡阶段调用事件处理程序
target.addEventListener(eventType, handler, false);
}else if(target.attachEvent){    //IE
target.attachEvent('on'+eventType, handler);
}
}

function removeHandler(target, eventType, handler) {
if (target.removeEventListener){//DOM2
target.removeEventListener(eventType, handler, false);
}else if (target.detachEvent) {
target.detachEvent('on'+eventType, handler);
}
}

隐藏的性能问题是每次函数调用时都要检查指定的方法是否存在

避免每次都要检查的办法：

延迟加载

在函数使用前不会做任何操作。

function addHandler(target, eventType, handler) {
if (target.addEventListener) {    //DOM2 Events
//addHandler没有被声明,是全局变量
addHandler = function(target, eventType, handler) {
target.addEventListener(eventType, handler, false);
};
}else if(target.attachEvent){    //IE
addHandler = function(target, eventType, handler) {
target.attachEvent('on'+eventType, handler);
}
}
//调用新函数
addHandler(target, eventType, handler);
}

原理：原始的函数被包含正确操作的新函数覆盖。这样每次调用不会再做检测了。

2.条件预加载

它会在脚本加载期间浏览器功能检查，而不会等到函数被调用。检查操作依然一次，只是来的更早一些。

var addHandler = document.body.addEventListener
? function(target, eventType, handler) {
target.addEventListener(eventType, handler);
}
: function(target, eventType, handler) {
target.attach('on'+eventType, handler);
};

小结：

延迟加载：直到函数被调用时才会做唯一一次检查。适合有些页面频繁调用的事件上面

条件预加载：确保所有函数调用消耗时间相同。适合哪些每个页面都会频繁用到的事件上