js设计模式
js设计模式
web行路人
脚踏实地,做好现在,未来顺其自然!
展开
-
前言
本专栏是学习《JavaScript设计模式与开发实践》笔记和总结,里面的demo也是来源《JavaScript设计模式与开发实践》。 序号 模式 特点 demo 1 单例模式 保证一个类仅有一个实例,并提供一个访问它的全局访问点 demo 2 策略模式 定义一系列的算法,把它们一个个封装起来,并且使它们可以相...原创 2019-07-13 15:34:19 · 160 阅读 · 0 评论 -
1、单例模式
1、特点 保证一个类仅有一个实例,并提供一个访问它的全局访问点。 单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池、全局缓存、浏览器中的window 对象等。 2、实现单例模式 var Singleton = function( name ){ this.name = name; this.instance = null; }; Singleton.prototype....原创 2019-07-12 17:33:34 · 144 阅读 · 0 评论 -
2、策略模式
1、特点 定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换 2、demo 使用策略模式计算奖金 //策略模式 //策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。 //使用策略模式计算奖金 var calculateBonus = function(performanceLevel, salary) { if (performan...原创 2019-07-12 17:47:17 · 123 阅读 · 0 评论 -
3、代理模式
1、特点 代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问。代理模式是一种非常有意义的模式,在生活中可以找到很多代理模式的场景。比如,明星都有经纪人作为代理。如果想请明星来办一场商业演出,只能联系他的经纪人。经纪人会把商业演 出的细节和报酬都谈好之后,再把合同交给明星签。 2、demo 小明送花 var Flower = function() {}; var xiaomi...原创 2019-07-12 17:52:45 · 123 阅读 · 0 评论 -
4、迭代器模式
1、特点 迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺序访问其中的每个元素。 2、demo 实现自己的迭代器 var each = function(ary, callback) { for (var i = 0; i <...原创 2019-07-12 17:55:24 · 114 阅读 · 0 评论 -
5、发布—订阅模式
1、特点 发布—订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。在JavaScript 开发中,我们一般用事件模型来替代传统的发布—订阅模式。 2、demo 订阅房子开售的消息 // 首先要指定好谁充当发布者(比如售楼处); // 然后给发布者添加一个缓存列表,用于存放回调函数以便通知订阅者(售楼处的花名册); /...原创 2019-07-13 09:13:55 · 140 阅读 · 0 评论 -
6、命令模式
1、特点 命令模式是最简单和优雅的模式之一,命令模式中的命令(command)指的是一个执行某些特定事情的指令。命令模式最常见的应用场景是:有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是什么。此时希望用一种松耦合的方式来设计程序,使得请求发送者和请求接收者能够消除彼此之间的耦合关系。 2、demo 菜单程序 var bindClick = functi...原创 2019-07-13 09:41:22 · 121 阅读 · 0 评论 -
7、组合模式
1、特点 组合模式是用小的子对象来构建更大的对象,而这些小的子对象本身也许是由更小的“孙对象”构成的。 2、demo 目前的万能遥控器,包含了关门、开电脑、登录QQ 这3 个命令。现在我们需要一个“超级万能遥控器”,可以控制家里所有的电器,这个遥控器拥有以下功能: a、打开空调 b、打开电视和音响 c、关门、开电脑、登录QQ <html> <body> ...原创 2019-07-13 10:01:29 · 134 阅读 · 0 评论 -
8、模板方法模式
1、特点 模板方法模式是一种只需使用继承就可以实现的非常简单的模式。由两部分结构组成,第一部分是抽象父类,第二部分是具体的实现子类。通常在抽象父类中封装了子类的算法框架,包括实现一些公共方法以及封装子类中所有方法的执行顺序。子类通过继承这个抽象类,也继承了整个算法结构,并且可以选择重写父类的方法。 2、demo 泡咖啡和泡 茶 var Beverage = function() {}; ...原创 2019-07-13 10:15:37 · 109 阅读 · 0 评论 -
9、享元模式
1、特点 享元(flyweight)模式是一种用于性能优化的模式,“fly”在这里是苍蝇的意思,意为蝇量级。享元模式的核心是运用共享技术来有效支持大量细粒度的对象。 2、demo 50 种男式内衣和50 种女士内衣,为了推销产品,工厂决定生产一些塑料模特来穿上他们的内衣拍成广告照片 // 50 种男式内衣和50 种女士内衣,为了推销产品,工厂决 // 定生产一些塑料模特来穿上他们的内衣拍...原创 2019-07-13 11:08:57 · 124 阅读 · 0 评论 -
10、职责链模式
1、特点 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止。 2、demo 公司针对支付过定金的用户有一定的优惠政策。在正式购买后,已经支付过500 元定金的用户会收到100 元的商城优惠券,200 元定金的用户可以收到50 元的优惠券,而之前没有支付定金的用户只能进入普通购买模式,也就是没有优惠券...原创 2019-07-13 13:55:50 · 138 阅读 · 0 评论 -
11、中介者模式
1、特点 解除对象与对象之间的紧耦合关系。增加一个中介者对象后,所有的相关对象都通过中介者对象来通信,而不是互相引用,所以当一个对象发生改变时,只需要通知中介者对象即可。中介者使各对象之间耦合松散,而且可以独立地改变它们之间的交互。中介者模式使网状的多对多关系变成了相对简单的一对多关系。 2、demo 泡泡堂游戏 先定义一个玩家构造函数,它有3 个简单的原型方法:Play.protot...原创 2019-07-13 14:34:14 · 157 阅读 · 0 评论 -
12、装饰者模式
1、特点 装饰者模式可以动态地给某个对象添加一些额外的职责,而不会影响从这个类中派生的其他对象。 2、demo var Plane = function() {} Plane.prototype.fire = function() { console.log('发射普通子弹'); } var MissileDecorator = function(plane) { th...原创 2019-07-13 14:46:57 · 159 阅读 · 0 评论 -
13、状态模式
1、特点 允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类。 2、demo 电灯的开、亮度、关 // OffLightState: var OffLightState = function(light) { this.light = light; }; OffLightState.prototype.buttonWasPressed = function(...原创 2019-07-13 15:19:59 · 165 阅读 · 0 评论