JS编程模式之初始化分支与惰性初始

不同的浏览器对于相同或相似的方法可能有不同的实现。这时，您需要依据当前的浏览器的支持方法来选择对应的执行分支。这类分支有可能与很多，因此可能会减缓脚本的执行速度。但非要等到运行时才能分支吗？我们完全可以在加载脚本时，在模块初始化的过程中就将部分代码进行分支处理。这显然更有利于提高效率。利用Javascript代码可以动态定义的特性，我们可以为不同的浏览器定制不同的实现方法，下面我们以定义事件处理程序举例：

初始化分支：

var MYAPP = {};
    MYAPP.event = {
        addListener: null,    //事后可能会被赋值为对象或函数的变量，都应该初始为null
        removeListener: null
    };
　　 //当脚本执行时，我们主动去执行分支，而不是等到用到事件处理时候
    if (window.addEventListener) {　　//支持addEventListener的浏览器
        MYAPP.event.addListener = function (el, type, fn) {
            el.addEventListener(type, fn, false);
        };
        MYAPP.event.removeListener = function (el, type, fn) {
            el.removeEventListener(type, fn, false);
        };
    } else if (document.attachEvent) {　　//IE
        MYAPP.event.addListener = function (el, type, fn) {
            el.attachEvent("on"+type, fn);
        };
        MYAPP.event.removeListener = function (el, type, fn) {
            el.detachEvent("on"+type, fn);
        };
    } else {　　//older browsers
        MYAPP.event.addListener = function (el, type, fn) {
            el["on"+type]=fn;
        };
        MYAPP.event.removeListener = function (el, type, fn) {
            el["on"+type]=null;
        };
    }

 

惰性初始：

惰性初始模式与上面的初始化分支模式很相似。不同之处在于，该模式下的分支只有在相关函数第一次被调用时才会发生-----即只有函数被调用时，它才会以最佳实现改写自己。

var MYAPP = {};
    MYAPP.event = {
        addListener: function (el, type, fn) {
　　　　　　　//无论触发哪个条件，都会重写MYAPP.event.addListener方法
            if (el.addEventListener) {
                MYAPP.event.addListener = function (el, type, fn) {
                    el.addEventListener(type, fn, false);
                };
            } else if (el.attachEvent) {
                MYAPP.event.addListener = function (el, type, fn) {
                    el.attachEvent("on"+type, fn);
                };
            } else {
                MYAPP.event.addListener = function (el, type, fn) {
                    el["on"+type]=fn;
                };
            }
　　　　　　　//注意，前面只是在第一次调用函数时，函数被重写了，注意“调用”二字，但是目前为止我们还没执行函数，所以最后要执行以下
            MYAPP.event.addListener(el, type, fn);
        }        
    };