当前位置:首页 > 日记 > 正文

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

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

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

相关文章

cdr X8未找到字体该怎么解决?

cdr X8未找到字体该怎么解决?

字体,该怎么,未找到,电脑软件,cdr,Coreldraw x8未找到字体, 该应用程序可能未正确安装。软件名称:CorelDRAW X8 64位 简体中文安装免费版(附序列号)软件大小:547.9MB更新时间:2016-11-231、开始菜单找到Corel Font Manager X8,按住F8,点开Font M…

浅谈关于angularJs中使用$.ajax的

浅谈关于angularJs中使用$.ajax的

浅谈,电脑软件,angularJs,ajax,本文介绍了关于angularJs中使用$.ajax的注意点,分享给大家,具体如下从技术上来讲,angular 与 jquery混用,是一件不太合适的,但是为什么这个话题争论至今依旧仁者见仁智者见智,除了便捷度,还有可能就是jquery有些地方…

vue时间格式化实例代码

vue时间格式化实例代码

实例代码,时间格式化,电脑软件,vue,整理文档,搜刮出一个vue时间格式化实例代码,稍微整理精简一下做下分享。export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + ''…

excel表格的保存到桌面的方法

excel表格的保存到桌面的方法

方法,桌面,表格,电脑软件,excel,  Excel表格里的图片具体该如何保存到桌面上呢?接下来是小编为大家带来的excel表格的图片保存到桌面的方法,供大家参考。excel表格的图片保存到桌面的方法:  图片保存桌面步骤1:打开Excel文档,点击另存为,选…

cdr怎么关闭图形文件? cdr快速关闭

cdr怎么关闭图形文件? cdr快速关闭

文件,图形,教程,快速,电脑软件,为了避免占用太多的内存空间,完成文件的编辑后,可以将当前的文件关闭,这样可以大大提高电脑的运行速度。本教程将详细介绍关闭图形文件的步骤和方法。软件名称:CorelDRAW X7 简体中文正式版软件大小:419MB更新时间…

win10没有ie浏览器

win10没有ie浏览器

浏览器,电脑软件,win10系统系统升级之后,很多用户都找不到IE浏览器的位置了,那么这时候就可以通过以下方法去找到并且打开IE浏览器。1、鼠标右键点击开始菜单,选择“控制面板”;2、在控制面板窗口中,点击“程序”选项进入;…

Photoshop合成骑士站在山间瞭望城

Photoshop合成骑士站在山间瞭望城

骑士,站在,山间,城堡,场景,今天小编为大家分享Photoshop合成骑士站在山间瞭望城堡的场景方法,教程很不错,值得大家学习,有兴趣的朋友也可以自己学习一下哦!这次的教程是我模仿国外高手的作品,这段时间迷恋上各种高端合成,看了很多,高手对细节的把…

浅谈js基础数据类型和引用类型,深

浅谈js基础数据类型和引用类型,深

深浅拷贝,基础数据类型,引用类型,内存分配,浅谈,js 深浅拷贝问题浅拷贝一般指的是基本类型的复制深拷贝一般指引用类型的拷贝,把引用类型的值也拷贝出来举例h5的sessionStorage只能存放字符串,所以要存储json时就要把json使用JSON.stringify(…

AngularJS使用ocLazyLoad实现js延

AngularJS使用ocLazyLoad实现js延

延迟加载,电脑软件,AngularJS,ocLazyLoad,js,最近开发一个系统遇到了一个问题,用angular路由一个html片段,该片段需要使用一个js插件来实现一个富文本编辑器。关键问题在于必须要在片段加载后通过js与dom元素进行绑定。一开始想当然以为直接…

JS实现手风琴效果

JS实现手风琴效果

手风琴,效果,电脑软件,JS,''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换。推拉门收缩状态.png"…

Windows服务器安全维护需注意八大

Windows服务器安全维护需注意八大

服务器安全,维护,要点,需注意,电脑软件,1、对网站的代码进行检查,检查是否被黑客放置了网页木马和ASP木马、网站代码中是否有后门程序。2、对网站代码安全性进行检查,检查是否存在SQL注入漏洞、上传文件漏洞等常见的危害站点安全的漏洞。3、…

细数Ajax请求中的async:false和asy

细数Ajax请求中的async:false和asy

请求,差异,电脑软件,Ajax,async,实例如下:function test(){ var temp="00"; $.ajax({ async: false, type : "GET", url : 'userL_checkPhone.do', complete: function(msg){ alert('complete'); }, succe…