修复方法:
1 2 3 |
.ace_editor { font: 12px/normal 'Menlo', 'Monaco', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace !important; } |
访问者模式(Visitor Pattern)
1 2 3 |
定义:使用一个访问者类,改变元素类的执行算法。通过这种方式,元素的执行算法可以随着访问者改变而改变。 目的:将数据结构与数据操作分离。 场景:您在朋友家做客,您是访问者,朋友接受您的访问,您通过朋友的描述,然后对朋友的描述做出一个判断,这就是访问者模式。 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// 元素类 class Elements { constructor () { this.action = () => { console.log('hi~') } this.accept = (visitor) => { visitor.visit(this) } } } // 访问者 class Visitor { constructor () { this.visit = (elements) => { elements.action() } } } const ele = new Elements() const visi = new Visitor() ele.accept(visi) |
解释器模式(Interpreter Pattern)
1 2 3 |
定义:提供了评估语言的语法或表达式的方式。 目的:对于一些固定文法构建一个解释句子的解释器。 场景:编译器、运算表达式计算。 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
// 定义对于语法的断言 class TerminalExpression { constructor (data) { this.data = data } interpret (context) { if (context.indexOf(this.data) > -1) { return true } return false } } // 添加表达式判断符 class OrExpression { constructor(expr1, expr2) { this.expr1 = expr1; this.expr2 = expr2; } interpret(context) { return this.expr1.interpret(context) || this.expr2.interpret(context); } } class AndExpression { constructor(expr1, expr2) { this.expr1 = expr1; this.expr2 = expr2; } interpret(context) { return this.expr1.interpret(context) && this.expr2.interpret(context); } } // 获取对应表达式 function getMaleExpression(){ const robert = new TerminalExpression("Robert"); const john = new TerminalExpression("John"); return new OrExpression(robert, john); } function getMarriedWomanExpression(){ const julie = new TerminalExpression("Julie"); const married = new TerminalExpression("Married"); return new AndExpression(julie, married); } // 判断语句断言 const isMale = getMaleExpression(); const isMarriedWoman = getMarriedWomanExpression(); console.log("John is male? " + isMale.interpret("John")); console.log("Julie is a married women? " ) |
中介者模式(Mediator Pattern)
1 2 3 |
定义:用来降低多个对象和类之间的通信复杂性。 目的:用一个中介对象来封装一系列的对象交互,中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互。 场景:MVC框架中的控制器C就是模型M和识图V的中介者。 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
let mediator = (() => { let msg = {} return { register: (type, action) => { if (!msg[type]) msg[type] = [] msg[type].push(action) }, send: (type) => { if (msg[type]) { for (let i = 0; i < msg[type].length; i++) { msg[type][i] && msg[type][i]() } } } } })() mediator.register('demo', () => { console.log('first') }) mediator.register('demo', () => { console.log('second') }) mediator.send('demo') |
Github地址:https://github.com/skillnull/Design-Mode-Example[……]
职责链模式(Chain of Responsibility Pattern)
1 2 3 |
定义:为请求创建了一个接收者对象的链。 目的:避免请求发送者与接收者耦合在一起,让多个对象都有可能接收请求,将这些对象连接成一条链,并且沿着这条链传递请求,直到有对象处理它为止。 场景:红楼梦中的"击鼓传花"。 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
// 采购请求 let PurchaseRequest = (amount, productName) => { this.amount = amount this.productName = productName } // 处理方 let Approver = (name, nextApprover) => { this.name = name this.nextApprover = nextApprover } Approver.prototype.processRequest = () => { throw new Error() } // ConcreteHandler let Manager = (name, nextApprover) => { Approver.call(this, name, nextApprover) } extend(Manager, Approver) Manager.prototype.processRequest = (request) => { if (request.Amount < 10000.0) { console.log('ok') } else if (NextApprover != null) { this.nextApprover.ProcessRequest(request) } } // ConcreteHandler,副总 let VicePresident = function (name, nextApprover) { Approver.call(this, name, nextApprover) } extend(VicePresident, Approver); VicePresident.prototype.processRequest = function (request) { if (request.Amount < 25000.0) { console.log('ok'); } else if (NextApprover != null) { this.nextApprover.ProcessRequest(request) } } // ConcreteHandler,总经理 let President = function (name, nextApprover) { Approver.call(this, name, nextApprover) } extend(President, Approver) President.prototype.processRequest = function (request) { if (request.Amount < 100000.0) { console.log('ok') } else if (NextApprover != null) { this.nextApprover.ProcessRequest(request) } } let requestTelphone = new PurchaseRequest(4000.0, "Telphone") let requestSoftware = new PurchaseRequest(10000.0, "Visual Studio") let requestComputers = new PurchaseRequest(40000.0, "Computers") let manager = new Manager("LearningHard") let Vp = new VicePresident("Tony") let Pre = new President("BossTom") // 设置责任链 manager.NextApprover = Vp Vp.NextApprover = Pre // 处理请求 manager.ProcessRequest(requestTelphone) manager.ProcessRequest(requestSoftware) manager.ProcessRequest(requestComputers) |
命令模式(Command Pattern)
1 2 3 |
定义:请求以命令的形式包裹在对象中,并传给调用对象。调用对象寻找可以处理该命令的合适的对象,并把该命令传给相应的对象,该对象执行命令。 目的:将一个请求封装成一个对象,从而使您可以用不同的请求对客户进行参数化。 场景:在一个快餐店,用户向服务员点餐。服务员将用户的需求记录在清单上。 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
let dialog = { show () { console.log('show a dialog') } } let animation = { start () { console.log('show animation') } } let setCommand = (btn, cmd) => { btn.onclick = () => { cmd.run() } } class ShowDialogCommand { constructor (receiver) { this.receiver = receiver } run () { this.receiver.show() } } class StartAnimationCommand { constructor (receiver) { this.receiver = receiver } run () { this.receiver.start() } } setCommand(btn1, new ShowDialogCommand(dialog)) setCommand(btn2, new StartAnimationCommand(animation)) |
迭代器模式(Itrator Pattern)
1 2 3 |
定义:用于顺序访问集合对象的元素,不需要知道集合对象的底层表示。 目的:提供一种方法顺序访问一个聚合对象中各个元素, 而又无须暴露该对象的内部表示。 场景:$.each() for..of。 |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
let each = (arr, callBack) => { for (let i = 0; i < arr.length; i++) { if (callBack && callBack(i, arr[i]) === false) { break; } } } let arr = [1, 2, 3, 4] each(arr, (index, value) => { if (value > 2) return false console.log(index, value) }) |
备忘录模式(Memento Pattern)
1 2 3 |
定义:保存一个对象的某个状态,以便在适当的时候恢复对象。 目的:在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态。 场景:数据缓存。 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
let getPageData = (() => { let cache = {} return (page, fn) => { if (cache[page]) { // 已有指定缓存数据 fun && fn() } else { // 当前没有指定缓存数据 // 获取指定数据data cache[page] = data fn && fn() } } } )() getPageData(1, () => { // do somthing }) |
状态模式(State Pattern)
1 2 3 |
定义:创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context 对象。 目的:允许对象在内部状态发生改变时改变它的行为,对象看起来好像修改了它的类。 场景:游戏角色有跳跃、移动、射击、蹲下等状态设定,如果用if-else或者switch来进行判断,在遇到组合动作的时候,判断会变得非常复杂难读,这时可以使用状态模式来实现。 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
class SuperHero { constructor () { this.currentState = [] this.states = { jump () { console.log('jump') }, move () { console.log('move') }, shoot () { console.log('shoot') }, squat () { console.log('squat') } } } // 更改当前状态 change (arr) { this.currentState = arr return this } run () { console.log('..... begin start ......') this.currentState.forEach(item => this.states[item] && this.states[item]()) return this } } new SuperHero() .change(['jump', 'squat']) .run() .change(['move', 'shoot']) .run() |
观察者模式(Observer Pattern)
1 2 3 |
定义:当一个对象被修改时,则会自动通知它的依赖对象。 目的:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。 场景:一个对象(目标对象)的状态发生改变,所有的依赖对象(观察者对象)都将得到通知,进行广播通知。 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
class Subject { constructor () { this.state = 0 this.observers = [] } getState () { return this.state } setState (state) { this.state = state this.notifyAllObsevers() } attach (observer) { this.observers.push(observer) } notifyAllObsevers () { for (let ele of this.observers.values()) { ele.update() } } } class Observer { constructor (name, subject) { this.name = name this.subject = subject this.subject.attach(this) } update () { console.log(this.name,this.subject.getState()) } } let subject = new Subject() let observer = new Observer('observer 1', subject) subject.setState('hahaha') |
Github地址:https://github.com/skillnull/Design-Mode-Example[……]