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


Posted in Javascript onSeptember 29, 2017

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

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

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

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

Javascript 相关文章推荐
js跟随滚动条滚动浮动代码
Dec 31 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
原生js简单实现放大镜特效
May 16 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 #Javascript
详解用Node.js实现Restful风格webservice
Sep 29 #Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 #Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 #jQuery
vue axios同步请求解决方案
Sep 29 #Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 #Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 #Javascript
You might like
php自动跳转中英文页面
2008/07/29 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
零基础学Python(一)Python环境安装
2014/08/20 Python
Python执行时间的计算方法小结
2017/03/17 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
Python中类的初始化特殊方法
2017/12/01 Python
python requests post多层字典的方法
2018/12/27 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
值得收藏的10道python 面试题
2019/04/15 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
用python计算文件的MD5值
2020/12/23 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
领导检查欢迎词
2014/01/14 职场文书
2014年国培研修感言
2014/03/09 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
应届大专生求职信
2014/06/26 职场文书
民族精神月活动总结
2014/08/28 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题