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 相关文章推荐
jquery遍历input取得input的name
Apr 27 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
jquery 插件学习(四)
Aug 06 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
js 实现ajax发送步骤过程详解
Jul 25 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
vue实现图片按比例缩放问题操作
Aug 11 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
django中的图片验证码功能
2019/09/18 Python
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
经贸韩语专业大学生职业规划
2014/02/14 职场文书
西式婚礼主持词
2014/03/13 职场文书
求职信格式要求
2014/05/23 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
网络舆情信息简报
2015/07/21 职场文书
防震减灾主题班会
2015/08/14 职场文书
银行求职信怎么写
2019/06/20 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
详解JavaScript中Arguments对象用途
2021/08/30 Javascript