码迷,mamicode.com
首页 > 编程语言 > 详细

javaScript一种优化模式-初始化时分支

时间:2015-05-27 12:18:59      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:模式   代码   优化   javascript   测试   

初始化时分支是一种优化模式。当知道某个条件在整个程序生命周期内都不会发生改变的时候,仅对该条件测试一次是很有意义的,浏览器嗅探(功能检测)就是一个典型的例子。

  1. 在发现XMLHttprequest可作为原生对象支持后,在程序执行过程中,底层的浏览器并没有机会改变,并且出乎意料您又需要处理AcitveX对象,由于环境并不会改变,代码就没有理由在每次需要另外一个XHR对象时继续保持嗅探。

2.查明DOM元素的计算样式或者附加的事件处理程序是另外一个可以受益于初始化时分支模式的场景。如下例子:
优化前:

var utils ={
    addListener:function(el,type,fn){
        if(typeof window.addEventListener ===‘function‘){
            el.addEventListener(type,fn,false);
        } else if(typeof document.attachEvent ===‘function‘){
            el.attachEvent(‘on‘+type,fn);
        } else{
            el[‘on‘+type]=fn;
        }
    },
    removeListener:function(el,type,fn){
        if(typeof window.removeEventListener ===‘function‘){
            el.removeEventListener(type,fn,false);
        } else if(typeof document.detachEvent ===‘function‘){
            el.detachEvent(‘on‘+type,fn);
        } else{
            el[‘on‘+type]=null;
        }

    }
};

上面这段代码效率比较低下,每次在调用 utils.addListener()或者 utils.removeListener()的时候,都会重复执行相同的检查,如果使用初始化时分支,可以在脚本初始化加载时候一次性探测出浏览器特征。此外,可以在整个页面生命周期内重定义函数的运行方式。如下:

var utils = {
    addListener:null,
    removeListener:null
};
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‘){
    utils.addListener=function(el,type,fn){
        el.attachEvent(‘on‘+type,fn);
    };
    utils.removeListener=function(el,type,fn){
        el.detachEvent(‘on‘+type,fn);
    };

} else{
    utils.addListener=function(el,type,fn){
        el[‘on‘+type]=fn;
    };
    utils.removeListener=function(el,type,fn){
        el[‘on‘+type]=null;
    };
}

当使用这个模式时,请不要过度假设浏览器特征。

javaScript一种优化模式-初始化时分支

标签:模式   代码   优化   javascript   测试   

原文地址:http://blog.csdn.net/lfcss/article/details/46044065

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!