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

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

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

本文为作者kMacro原创,转载请注明来源:http://www.jianshu.com/p/9a7be94a3ea7。

JS设计模式(二) 惰性模式的更多相关文章

  1. JS设计模式——5.单体模式

    JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html   单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...

  2. js设计模式——7.备忘录模式

    js设计模式——7.备忘录模式 /*js设计模式——备忘录模式*/ // 备忘类 class Memento { constructor(content) { this.content = conte ...

  3. js设计模式——6.模板方法模式与职责链模式

    js设计模式——6.模板方法模式与职责链模式 职责链模式

  4. js设计模式——5.状态模式

    js设计模式——5.状态模式 代码演示 /*js设计模式——状态模式*/ // 状态(红灯,黄灯,绿灯) class State { constructor(color) { this.color = ...

  5. js设计模式——4.迭代器模式

    js设计模式——4.迭代器模式 代码演示 /*js设计模式——迭代器模式*/ class Iterator { constructor(container) { this.list = contain ...

  6. js设计模式——2.外观模式

    js设计模式——2.外观模式

  7. js设计模式——1.代理模式

    js设计模式——1.代理模式 以下是代码示例 /*js设计模式——代理模式*/ class ReadImg { constructor(fileName) { this.fileName = file ...

  8. js设计模式:工厂模式、构造函数模式、原型模式、混合模式

    一.js面向对象程序 var o1 = new Object();     o1.name = "宾宾";     o1.sex = "男";     o1.a ...

  9. [JS设计模式]:工厂模式(3)

    简单工厂模式是由一个方法来决定到底要创建哪个类的实例, 而这些实例经常都拥有相同的接口. 这种模式主要用在所实例化的类型在编译期并不能确定, 而是在执行期决定的情况. 说的通俗点,就像公司茶水间的饮料 ...

  10. [JS设计模式]:构造函数模式(2)

    基本用法 function Car(model, year, miles) { this.model = model; this.year = year; this.miles = miles; th ...

随机推荐

  1. 同形异义字:看我如何拿到TaoBao.com的解析权

    *本文原创作者:expsky@MS509Team,本文属FreeBuf原创奖励计划 同形异义字钓鱼攻击号称"几乎无法检测",是最狡猾的钓鱼攻击!这种攻击产生的原因是国际化域名IDN ...

  2. AC Analysis

    1.从Options---sheet properties—circuit—show all调出来节点编号 :

  3. Java入门(2) —— 变量详解、运算符、定义类和定义方法以及方法的调用

    1.变量 1.定义变量 1.声明的同时直接赋值 数据类型 变量名 = 值; 2.先声明,后赋值 声明: 数据类型 变量名; 赋值: 变量名 = 值; 2.数据类型 基本数据类型:4类8种 整数 --- ...

  4. poj 2763 Housewife Wind (树链剖分)

    题目链接:http://poj.org/problem?id=2763 题意: 给定一棵含n个结点的树和树的边权,共有q次操作,分为两种 0 c :求从位置s到c的距离,然后s变成c 1 a b:把第 ...

  5. hr用法

    定义和用法 <hr> 标签在 HTML 页面中创建一条水平线. 水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分. HTML 与 XHTML 之间的差异 在 H ...

  6. 利用js实现禁用浏览器后退

    原博主链接为:http://blog.csdn.net/zc474235918/article/details/53138553 现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免 ...

  7. 灾难恢复-boot分区的恢复方法

    boot分区是系统启动中最重要的部分,如果服务器由于病毒攻击又或者被管理员误删除了boot分区.那么就会存在潜在的风险.为什么说是潜在的风险?因为boot分区被删除后系统仍在继续运行,看似无状况但是在 ...

  8. 最近完成的AndroidStudio项目实现思路及应用技术

    主要内容: Android Studio的介绍 AS中个Gradle及Groovy介绍 AS中的依赖管理 Maven以及Nexus私库管理依赖 Gradle对变种代码的管理以及多渠道打包 eclips ...

  9. MySQL的JOIN(一):用法

    JOIN的含义就如英文单词"join"一样,连接两张表,大致分为内连接,外连接,右连接,左连接,自然连接.这里描述先甩出一张用烂了的图,然后插入测试数据. CREATE TABLE ...

  10. 数据库学习任务三:执行数据库操作命令对象SqlCommand

    数据库应用程序的开发流程一般主要分为以下几个步骤: 创建数据库 使用Connection对象连接数据库 使用Command对象对数据源执行SQL命令并返回数据 使用DataReader和DataSet ...