JS设计模式之惰性模式(二)

(编辑:jimmy 日期: 2025/1/21 浏览:2)

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

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

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对象创建等,造成代码臃肿冗余,惰性模式正好可以解决这种问题,提高代码执行效率。

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

一句话新闻

一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?