设计模式
linhongyong
爱我所爱。
展开
-
js之策略模式
策略模式计算奖金level01:最初的代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> var calculateBonus = function (performanceLevel,sa原创 2016-12-01 21:05:23 · 428 阅读 · 1 评论 -
js之职责链模式
职责链模式的定义是:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象能处理它为止。 职责链模式的名字非常形象,一系列可能会处理请求的对象被连接成一条链,请求在这些对象之间依次传递,直到遇到一个可以处理它的对象,我们把这些对象称为链中的节点。level01:假设我们负责一个售卖手机的电商网站,经过分别交纳 500元定原创 2016-12-03 11:20:09 · 861 阅读 · 0 评论 -
js之命令模式
假设有一个快餐店,而我是该餐厅的点餐服务员,那么我一天的工作应该是这样的:当某位客人点餐或者打来订餐电话后,我会把他的需求都写在清单上,然后交给厨房,客人不用关心是哪些厨师帮他炒菜。我们餐厅还可以满足客人需要的定时服务,比如客人可能当前正在回家的路上,要求 1个小时后才开始炒他的菜,只要订单还在,厨师就不会忘记。客人也可以很方便地打 电话来撤销订单。另外如果有太多的客人点餐,厨房可以按照订单的顺序原创 2016-12-03 13:34:35 · 1974 阅读 · 0 评论 -
js之模板方法模式
模板方法模式的定义和组成:模板方法模式是一种只需使用继承就可以实现的非常简单的模式。 模板方法模式由两部分结构组成,第一部分是抽象父类,第二部分是具体的实现子类。通常在抽象父类中封装了子类的算法框架,包括实现一些公共方法以及封装子类中所有方法的执行顺 序。子类通过继承这个抽象类,也继承了整个算法结构,并且可以选择重写父类的方法。假如我们有一些平行的子类,各个子类之间有一些相同的行为,也有一些不同原创 2016-12-03 21:37:27 · 605 阅读 · 0 评论 -
js之迭代器模式
迭代器模式迭代器模式是指:提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺序访问其中的每个元素。实现自己的迭代器现在我们来自己实现一个 each 函数, each 函数接受 2 个参数,第一个为被循环的数组,第二个为循环的每一步后将被触发的回调函数:<!DOCTYP原创 2016-12-01 22:28:50 · 1048 阅读 · 1 评论 -
js之代理模式
代理模式小明追 MM 的故事level01:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> var Flower = function(){}; var xiaoming = { sen原创 2016-12-01 22:06:34 · 2031 阅读 · 0 评论 -
js之装饰者模式
装饰者模式在程序开发中,许多时候都并不希望某个类天生就非常庞大,一次性包含许多职责。那么我们就可以使用装饰者模式。装饰者模式可以动态地给某个对象添加一些额外的职责,而不会影响从这个类中派生的其他对象。level01:模拟传统面向对象语言的装饰者模式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title原创 2016-12-02 09:26:17 · 256 阅读 · 0 评论 -
js之状态模式
状态模式level01:电灯程序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> var Light = function(){ this.state = 'off'; /原创 2016-12-02 15:21:53 · 1995 阅读 · 0 评论 -
js之中介模式
购买商品假设我们正在编写一个手机购买的页面,在购买流程中,可以选择手机的颜色以及输入购买数量,同时页面中有两个展示区域,分别向用户展示刚刚选择好的颜色和数量。还有一个按钮动 态显示下一步的操作,我们需要查询该颜色手机对应的库存,如果库存数量少于这次的购买数量,按钮将被禁用并且显示库存不足,反之按钮可以点击并且显示放入购物车。<!DOCTYPE html><html lang="en"><hea原创 2016-12-02 22:07:57 · 428 阅读 · 0 评论 -
js之发布 — 订阅模式
有人发布信息有人“订阅”信息并进行处理。DOM事件document.body.addEventListener( 'click', function(){ alert(2);}, false );document.body.click(); // 模拟用户点击售楼处level01售楼处发布楼盘信息,订阅者订阅(即把你需要的行为存入售楼处)这些信息。<!DOCTYPE html><htm原创 2016-12-03 09:47:24 · 1793 阅读 · 0 评论 -
js之适配器模式
适配器模式适配器模式的应用level01:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> var googleMap = { show: function(){原创 2016-12-01 22:37:35 · 781 阅读 · 0 评论 -
js之组合模式
在命令模式学习完的基础上:更强大的宏命令<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <button id="button">按我</button> <script> var MacroCommand原创 2016-12-03 20:36:06 · 2575 阅读 · 1 评论