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);
    }    
}

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

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

1. 延迟加载

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

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);
    };

小结：

1. 延迟加载：直到函数被调用时才会做唯一一次检查。适合有些页面频繁调用的事件上面
2. 条件预加载：确保所有函数调用消耗时间相同。适合哪些每个页面都会频繁用到的事件上