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 相关文章推荐
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
React更新渲染原理深入分析
Dec 24 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-fpm 参数的深入理解
2013/06/03 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
use jscript List Installed Software
2007/06/11 Javascript
event对象的方法 兼容多浏览器
2009/06/27 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
Javascript Objects详解
2014/09/04 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
定制FileField中的上传文件名称实例
2017/08/23 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
大学生应聘导游自荐信
2014/06/02 职场文书
个人租房协议书范本
2014/09/30 职场文书
Python实现学生管理系统(面向对象版)
2021/06/24 Python
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python