JS设计模式之惰性模式（二）

惰性模式：减少代码每次执行时的重复性判断，通过重新定义对象来避免原对象中的分支判断，提高网站性能。

例如针对不同浏览器的事件注册方法：

var AddEvent = 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;
 }
}

从上面的方法可以发现，每次为元素绑定事件时，都会进行检测判断，这是多余的，因为在同一浏览器中分支判断结果是唯一的，不可能走不同的分支。

我们可以用惰性模式来解决这个问题，既然第一次调用该方法时已经判断过了，那么就可以在第一次执行时根据判断结果重新定义该方法。

惰性模式主要有两种实现方法：

加载即执行：JavaScript文件加载时通过闭包执行对方法进行重新定义，在页面加载时会消耗一定的资源。

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

惰性执行：第一次执行函数时在函数内部对其进行显示重写，最后调用重写后的方法完成第一次方法调用。

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

与加载即执行不同的是，JS文件加载完成后，惰性执行的函数还没有被重新定义，当函数被首次调用时才会被重定义。这两种惰性方式都避免了冗余的分支判断。

惰性模式的应用场景非常广泛，特别是当今浏览器种类繁多的现象，很多功能在不同浏览器中实现不一，为了兼容不同的浏览器，代码中往往会有许多对不同浏览器的分支判断，比如事件处理、XMLHttpRequest对象创建等，造成代码臃肿冗余，惰性模式正好可以解决这种问题，提高代码执行效率。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# JS # 设计模式 # 惰性模式 # 浅析AngularJS中的生命周期和延迟处理 # 如何用JavaScript实现一个数组惰性求值库 # JavaScript中的惰性载入函数及优势 # JavaScript惰性载入函数实例分析 # JavaScript惰性求值的一种实现方法示例 # 从延迟处理解析JavaScript惰性编程 # 加载 # 重写 # 的是 # 这是 # 器中 # 还没有 # 过了 # 首次 # 可以用 # 有许多 # 对其 # 有两种 # 这两种 # 往往会 # 时才 # 绑定 # 解决这个问题 # 大家多多 # 就可以 # 能走

返回目录在线咨询

上一篇：Golang 如何优雅地停止 Goroutine_Golang 通道通信与退出信号处理
下一篇：SEO工具推荐：关键词排名优化工具有哪些_SEO优化教程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

JS设计模式之惰性模式（二）

您的项目需求