设计模式(惰性模块)

惰性模式:减少每次代码 执行时重复的分支判断,通过对对象重新定义屏蔽原对象中的分支判断。

   浏览器兼容算是比较头疼的问题,大家都会遇到某些属性浏览器支持,有些不支持;就像早期的ie不支持addEventListener一样,每次需要针对ie写不同的代码判断去兼容。惰性模式就是为了减少每次重复判断。

惰性模式两种定义方式:

第一种:在文件加载初始化时候:(这是一种闭包方式,在初始化时候进行支持性判断后,重新定义)

 1             addevent = function(ele,type,fn) {
 2                 if(document.addEventListener) {
 3                     return function(ele, type, fn) {
 4                         ele.addEventListener(type, fn, false)
 5                     }
 6                 } else if(document.attachEvent) {
 7                     return function(ele, type, fn) {
 8                         ele.attachEvent("on" + type, fn);
 9                     }
10                 } else {
11                     return function(ele, type, fn) {
12                         ele["on" + type] = fn;
13                     }
14                 }
15             }();

第二种:在第一次调用定义的方法时候,重新定义

 1             onevent = function(ele, type, fn) {
 2                 if(document.addEventListener) {
 3                     onevent = function(ele, type, fn) {
 4                         ele.addEventListener(type, fn, false)
 5                     }
 6                 } else if(document.attachEvent) {
 7                     onevent = function(ele, type, fn) {
 8                         ele.attachEvent("on" + type, fn);
 9                     };
10                 } else {
11                     onevent = function(ele, type, fn) {
12                         ele["on" + type] = fn;
13                     }
14                 }
15                 onevent(ele, type, fn)
16             }

上述两种方法是为了减少每次在调用方法时候,重复性的判断。两种方法的区别:第一种:在加载初始化时候可能占资源,第二种:在第一次调用时候,需要重新定义,然后在方法最后需要自己再调用下新方法。两种方法可根据自己需要进行选择。

时间: 2024-10-06 17:45:40

设计模式(惰性模块)的相关文章

[JavaScript设计模式]惰性单例模式

惰性单例模式 之前介绍了JS中类的单例模式,这次我们讨论下单例模式的应用.在众多网站中,登录框的实现方式就是一个单例,点击一次就展示一次,所以我们可以在页面加载好的时候就创建一个登录框,点击页面上的登录按钮时,用于控制它的显示和隐藏. 代码实现: 登录 ``` --> 这样的问题就是,如果用户进来后所有的操作根本没有用到登录,那创建登录框这个操作就是无用的,所以改进为当用户点击登录按钮时才开始创建登录框,如下: 登录 ``` --> 现在达到了惰性的目的,但失去了单例的效果.每次点击登录都会创

设计模式: 单列设计模式 、模块方法设计模式

一.单列设计模式 1.设计模式:解决某一类问题的最行之有效的方法. 2.Java中有23中基本设计模式. 3.单列设计模式:一个类在内存中只有一个对象. 为了达到单列设计模式,如下考虑: 1. 为了避免其他程序过多建立该类对象,所以要先禁止其他程序建立该类对象. 2. 但是为了有一个该类对象可用,所以只有通过自己建立一个本类对象. 3. 为了让其他程序使用该对象,所以要对外提一些访问方式. 有了上述思考,于是有了如下步骤: 1. 将其构造私有化 (使用 private 修饰构造函数) 2. 在类

javascript设计模式-module(模块)模式

模块是任何强大应用程序中不可或缺的一部分,它通常能帮助我们清晰地分离和组织项目中的代码单元. js中实现模块的方法: 对象字面量表示法 Module模式 AMD模块 CommonJS模块 ECMAScript Harmony 模块 对象字面量 对象字面量不需要使用new运算符进行实例化,但不能用在一个语句的开头,因为开始的可能被解读为一个块的开始,在对象的外部,新成员可以使用如下赋值语句添加到对象字面量上,myModule.property = "someValue". var myM

前端学习html css js

html 第一章 :HTML模板 HTML是什么(超文本标记语言) HTML网页主体结构 doctype标签 head标签 meat标签 title标签 body标签 第二章:HTML标题 h1标题标签 h2标题标签 h3标题标签 h4标题标签 h5标题标签 h6标题标签 hr水平线标签 第三章:HTML 段落 p段落标签 br换行标签 第四章:HTML 样式 center定义居中内容 font和basefont定义HTML字体 s和strike定义删除线文本 u定义下划线文本 第五章:HTML

程序员Web面试之前端框架等知识

基于前面2篇博客: 程序员Web面试之jQuery 程序员Web面试之JSON 您已经可以顺利进入Web开发的大门. 但是要动手干,还需要了解一些已有的前端框架.UI套件,即要站在巨人肩膀上而不是从轮子开始造汽车. 下面就Web开发用到的前端框架.UI套件.UI插件一一列举(排名不分先后): jQuery UI jQuery UI以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件.包含了许多维持状态的小部件(Widget)

AngularJS开发下一代Web应用笔记(一)

一.写在最前 AngularJS是Google推出的一款Web应用开发框架.它提供了一系列兼容性良好并且可扩展的服务,包括数据绑定.DOM操作.MVC设计模式和模块加载等. 现在网上JS框架茫茫多,真不知道是到底要学习什么框架,学习了这个框架,说不定还没用在项目,又有更好的js框架出来了.前端就是不断折腾新东西,生命在于折腾~ 是的,这么多的前端框架,是不是真的都要学习??答案当然不是,看所要完成的项目.这是带我的前端前辈告诉我,具体使用什么框架还是不用框架, 看项目需求,一切都以按时按质完成作

带你走近AngularJS - 基本功能介绍

AngularJS是Google推出的一款Web应用开发框架.它提供了一系列兼容性良好并且可扩展的服务,包括数据绑定.DOM操作.MVC设计模式和模块加载等.本文专注于AngularJS 指令的使用,在我们进入主题之前,我们将快速浏览AngularJS的基本用法. AngularJS 不仅仅是一个类库,而是提供了一个完整的框架.它避免了您和多个类库交互,需要熟悉多套接口的繁琐工作.它由Google Chrome的开发人员设计,引领着下一代Web应用开发.也许我们5年或10年后不会使用Angula

AngularJS - 基本功能介绍

转载自:http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html (写得很好的Angular入门,可以试试) AngularJS是Google推出的一款Web应用开发框架.它提供了一系列兼容性良好并且可扩展的服务,包括数据绑定.DOM操作.MVC设计模式和模块加载等.本文专注于AngularJS 指令的使用,在我们进入主题之前,我们将快速浏览AngularJS的基本用法. AngularJS 不仅仅是一个类库,而是提供

你一直想知道的关于JavaScript scope的一切

对于一个JavaScript初学者(甚至是有经验的JavaScript开发者)而言,JavaScript语言中关于"域"(scope)的一些概念并不是那么直白或是容易理解的. 由此,这篇文章旨在帮助那些在听说过诸如域(scope),闭包(closure),关键字this,命名空间(namespace),函数域(function scope),全局域(global scope),词法作用域(lexical scope)以及公共域和私有域(public/private scope)等词汇后