关于设计模式:惰性模式减少重复性的浏览器特性能力检测

38次阅读

共计 1589 个字符,预计需要花费 4 分钟才能阅读完成。

惰性模式 :缩小每次代码执行时的重复性的分支判断,通过对对象重定义来屏蔽原对象中的分支判断。

问题代码:

function on = function(dom, type, fn) {if (dom.addEventListener) {dom.addEventListener(type, fn, false);
    } else if (dom.attachEvent) {dom.attachEvent('on' + type, fn);
    } else {dom['on' + type] = fn;
    }
}

每次为元素增加事件时,都会走一遍能力检测,这是多余的,因为在同一个浏览器中两次执行办法,能力检测是不可能走两个不同的分支的。

既然第一次执行时曾经判断过了,而且当前再执行是不必要的,那么就能够在第一次执行后就从新定义它。这就是惰性模式的精华。

工作中这种模式思维有两种实现形式,

  • 第一种就是在文件加载进来时通过闭包执行该办法对其从新定义。
    不过这样会使页面加载时占用肯定的资源。
var on = function(dom, type, fn) {if (document.addEventListener) {return function(dom, type, fn) {dom.addEventListener(type, fn, false);
        }
    } else if (document.attachEvent) {return function(dom, type, fn) {dom.attachEvent('on' + type, fn);
        }
    } else {return function(dom, type, fn) {dom['on' + type'] = fn;
        }
    }
}();
  • 第二种形式是在第一种形式寄出上做一次提早执行,在函数第一次调用的时候对其重定义。
    这么做的益处就是缩小文件加载时的资源耗费,然而却在第一次执行时有肯定的资源耗费。
function on(dom, type, fn) {if (dom.addEventListener) {on = function(dom, type, fn) {dom.addEventListener(type, fn, false);
        }
    } else if (dom.attachEvent) {on = function(dom, type, fn) {dom.attachEvent('on' + type, fn);
        }
    } else {on = function(dom, type, fn) {dom['on' + type] = fn;
        }
    }
    // 执行重定义 on 办法
    on(dom, type, fn);
}

第二种形式与第一种实现形式的不同之处在于,首先,外部对元素 dom 执行能力检测并显式重写,其次,原始函数在函数的最开端从新执行一遍来绑定事件。不过在文件加载后 on 办法还没能从新被定义。所以咱们还需等到某一元素绑定事件时(调用 on 办法时),on 能力被重定义。

所以你能够看出这种形式本质上是对耗费的一种惰性推移,有时候是很有必要的,尤其在重定义时耗费资源比拟大而且想尽量早地预览到页面时。

现在浏览器繁多,尤其在国内更是简单,很多性能在不同浏览器中实现不以,所以很多代码为兼容各个浏览器写的分支特地臃肿,有了这种模式,就能使臃肿的代码执行效率失去进步了。比方创立 XHR 对象。

总结:
惰性模式是一种迁延模式,因为对象的创立或者数据的计算会破费昂扬的代价(如页面刚加载时无奈分别是该浏览器反对某个性能,此时创建对象是不够平安的),因而页面之初会提早对这一类对象的创立。惰性模式又分为两种:第一种是文件加载后立刻执行对象办法来重定义对象。第二种是当第一次应用办法对象时重定义对象。

对于第一种形式,因为文件加载时执行,因而会占用一些资源。

对于第二种形式因为在第一次应用时重定义对象,以至第一次执行工夫减少。

有时候两种形式对资源的开销都是可承受的,因而到底应用哪种形式,要看具体需要而定。

以上内容摘抄自《JavaScript 设计模式》

正文完
 0