JavaScript基础初始时期分支（018）

Init-Time Branching初始时期分支是一种用做优化的模式。如果某些条件在程序启动后就不再改变，那么我们就只需要在初始时期检查一次就可以了，而不是在每次 需要用到这些条件的时候都检查一次。比如，Javascript经常需要判断运行在哪个浏览器里，这个检查工作通常只需要在初始时期完成就可以了。又如， 假设程序在运行期间需要检查是否支持XMLHttpRequest 对象（Ajax应用时的重要对象），如果运行环境支持，那我们就可以认为程序在运行期间一直都可以使用这个对象。

 

Javascript的程序员都会需要运行环境中是否支持一些特性，比如下面的代码：

// BEFORE
var utils = {
    addListener: function (el, type, fn) {
        if (typeof window.addEventListener === 'function') {
            el.addEventListener(type, fn, false);
        } else if (typeof document.attachEvent === 'function') { // IE
            el.attachEvent('on' + type, fn);
        } else { // older browsers
            el['on' + type] = fn;
        }
    },
    removeListener: function (el, type, fn) {
        // pretty much the same...
    }
};

这段代码没有逻辑上的错误，问题是运行效率不高。因为每次addListener都会检查运行环境是否支持window.addEventListener，这显然有些多余。使用初始时期分支的方法，程序可以改为：

// AFTER
// the interface
var utils = {
    addListener: null,
    removeListener: null
};
// the implementation
if (typeof window.addEventListener === 'function') {
    utils.addListener = function (el, type, fn) {
        el.addEventListener(type, fn, false);
    };
    utils.removeListener = function (el, type, fn) {
        el.removeEventListener(type, fn, false);
    };
} else if (typeof document.attachEvent === 'function') { // IE
    utils.addListener = function (el, type, fn) {
        el.attachEvent('on' + type, fn);
    };
    utils.removeListener = function (el, type, fn) {
        el.detachEvent('on' + type, fn);
    };
} else { // older browsers
    utils.addListener = function (el, type, fn) {
        el['on' + type] = fn;
    };
    utils.removeListener = function (el, type, fn) {
        el['on' + type] = null;
    };
}

 

最后建议不要对运行环境进行过多的“猜测”。比如，运行环境不支持window.addEventListener，并不代表它一定是IE，也不代表它不支持XMLHttpRequest。所以最好把这些运行环境的特性看成是独立的没有关联的条件来检查。