时间:2021-05-26
惰性模式:减少代码每次执行时的重复性判断,通过重新定义对象来避免原对象中的分支判断,提高网站性能。
例如针对不同浏览器的事件注册方法:
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对象创建等,造成代码臃肿冗余,惰性模式正好可以解决这种问题,提高代码执行效率。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了js正则表达式惰性匹配和贪婪匹配用法。分享给大家供大家参考,具体如下:在讲贪婪模式和惰性模式之前,先回顾一下JS正则基础:写法基础:①不需要双引号
本文实例讲述了JS设计模式之:工厂模式定义与实现方法。分享给大家供大家参考,具体如下:前言上次我们介绍了单例模式,没看过的小伙伴可以看这个链接:浅析JS设计模式
本文实例讲述了JS设计模式之:单例模式定义与实现方法。分享给大家供大家参考,具体如下:良好的设计模式可以显著提高代码的可读性,降低复杂度和维护成本。笔者打算通过
本文实例讲述了js设计模式之单例模式原理与用。分享给大家供大家参考,具体如下:关于设计模式,我的理解是它是业务代码的提前解决方案。意思就是说在没有真正的业务之前
本文实例讲述了Android编程设计模式之工厂方法模式。分享给大家供大家参考,具体如下:一、介绍工厂方法模式(FactoryPattern),是创建型设计模式之