javascript设计模式阅读后的感悟与总结

  • 单例模式

  用于创建唯一的一个对象。

  核心在于一个判断

  var index

  if(index){

  return index;

  }

  init();

  这样只会在第一次的时候初始化创建对象,以后都不会再创建对象。

  还有闭包内的变量不会销毁,例如index可以始终存在。

  js的实现:

  

 1   var getSingle = function (fn) {
 2     var result;
 3     return function () {
 4       return result || (result = fn.apply(this, arguments));
 5     };
 6   };
 7   //创建登陆div
 8   var createSingletonLoginLayer = getSingle(function () {
 9     var div = document.createElement(‘div‘);
10     div.innerHTML = ‘我是悬浮窗‘;
11     div.style.display = ‘none‘;
12     document.body.appendChild(div);
13     return div;
14   });
15
16   document.getElementById(‘loginBtn‘).onclick = function () {
17     var loginLayer = createSingletonLoginLayer();
18     loginLayer.style.display = ‘block‘;
19   };
20   //创建iframe
21   var createSingleIframe = getSingle(function () {
22     var iframe = document.createElement(‘iframe‘);
23     document.body.appendChild(iframe);
24     return iframe;
25   });
26
27   document.getElementById(‘loginBtn2‘).onclick = function () {
28     var loginLayer = createSingleIframe();
29     loginLayer.src = ‘http://baidu.com‘;
30   };
  • 策略模式

  个人感觉这个模式挺啰嗦的,挺短的几行代码用完这个模式就变得貌似又臭又长,所以可用在验证、以及可以复用的组件等地方。 不能复用真的感觉写这么长一串不值。

  个人感觉这个模式核心在于把条件放在对象中代替用if来代替

  策略模式的目的是将算法的使用与算法的实现分离开来。

  • 代理模式

  

时间: 2024-11-05 14:43:28

javascript设计模式阅读后的感悟与总结的相关文章

JavaScript设计模式阅读随笔(一)——JavaScript面向对象

JavaScript中的面向对象其实就相当于是将需求抽象成一个对象,这个对象中包含属性和方法,可以用来描述或处理某一类实物,这个对象就叫做类. 在Java中面向对象的三要素是:封装.继承.多态,在ES6以前虽然没有class.extend这样的关键字或方法,中同样可以实现这三要素. 创建一个类 在ES6之前创建一个类通可以用:声明一个函数将其保存在变量中,内部通过对this来添加属性和方法:也可以在类的原型上添加属性和方法. 可以看到当在控制台中创建一个Book的类,Book的实例化对象book

javascript设计模式

javascript设计模式 阅读目录 什么是设计模式 单体模式: 工厂模式: 单例模式 观察者模式(发布订阅模式) 策略模式 模板模式 代理模式 外观模式 设计模式太多了,貌似有23种,其实我们在平时的工作中没有必要特意去用什么样的设计模式,或者你在不经意间就已经用了设计模式当中的一种.本文旨在总结平时相对来说用的比较多的设计模式. 回到顶部 什么是设计模式 百度百科: 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结. 使用设计模式是

JavaScript设计模式:读书笔记(未完)

该篇随我读书的进度持续更新阅读书目:<JavaScript设计模式> 2016/3/30 2016/3/31 2016/3/30: 模式是一种可复用的解决方案,可用于解决软件设计中遇到的常见问题./将解决问题的方法制作成模板,并且这些模板可应用于多种不同的情况.有效模式的附加要求:适合性,实用性,适用性. 模式的优点: 防止局部问题引起大问题,模式让我们的代码更有组织性 模式通常是通用的解决方式,不管我们开发哪种应用程序,都可以用模式优化我们代码的结构 模式确实可以让我们避免代码复用,使代码更

精读《JavaScript设计模式》:简介(一)

经过一段工作时间的沉淀后,我发现需要细看一些书籍验证当中获得的经验.在JavaScript上的结构和模式上的考虑,使我决定精读<JavaScript设计模式>(中文版).在阅读的过程中,发现中文版的某些译文有些不适当的时候,我就会查询相应英文版<Learning JavaScript Design Patterns>,斟酌差异.我摘拿了一些内容记录,在下面描述中,中文上有异议地方,我会附带上英文部分,并记录自己想法. 模式目的: 中文: 编写易于维护的代码,其中一个最重要方面是能够

JavaScript设计模式 - 迭代器模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺序访问其中的每个元素 许多浏览器都支持 Javascript 的 Array.prototype.forEach 迭代器可以分为 内部迭代器 和 外部迭代器 一.jQuery 中的迭代器 1 $.each( [1,2,3,4], function (i, n) { 2 console.log( "当

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)

类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. 先贴上完成的效果. 实现原理不复杂,在动的一条一条的称之为“窗帘条”或者是“strip”,每一个strip都是一个div,类似于雪碧图的方式将其背景图的位置设置为strip的可视位置,然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了. 为了使用方便,将这个功能作为jq

方法的链式调用【参考javascript设计模式第6章】

对应经常使用jquery的朋友,方法的链式调用应该是已经很属性了,书上有模拟出一个很简单的类库代码, 见代码如下: Function.prototype.method = function(name,fn){ this.prototype[name] = fn; return this; }; (function(){ function _$(els){ ........ } /*Events  addEvent getEvent*/ _$.method("addEvent",func

《JavaScript设计模式 张》整理

最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式 包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单工厂 又叫静态工厂方法,由一个工厂对象决定创建某一种产品对象类的实例. 两种实现方式,第一种是通过类实例化对象创建,第二种是创建一个新对象然后包装增强其属性和功能. demo代码. 2)工厂方法 通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例. 将工厂方法看作是一个实例化对象的工厂类. demo

javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)

在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调用和联动. 切换要求:当前图片显示指定时间后执行切换效果并切换下一张图片,最后一个切换后从头开始. 按照要求一个效果对象完成后要执行下一个,最后一个完成后要从头开始, 看上去就是一个带状态通知的环形列表,类似于这样的特征,可以采用职责链模式来构建. 职责链就是由不同的功能处理构成的链表,每一个功能处理作为一个