原型模式

桥接模式

组合模式

  • vue里的vnode

享元模式

  • 内存共享
  • 相同数据，共享使用

策略模式

  • 不同策略分开处理
  • 避免用太多if...else...或者switch...case ```javascript class OrdinaryUser { buy() { console.log(‘普通用户 buy’) } } class MemberUser { buy() { console.log(‘会员用户 buy’) } } class VipUser { buy() { console.log(‘Vip用户 buy’) } }

const u1 = new OrdinaryUser() u1.buy() const u2 = new VipUser() u2.buy() const u3 = new MemberUser() u3.buy()

  2. <a name="BmOhe"></a>
  3. #### 模板方法模式
  5. - 抽象父类，具体子类
  6. ```javascript
  7. class Drink {
  8.   init() {
  9.     this.boilWater();
  10.     this.brew();
  11.     this.pourInCup();
  12.     if (!this.customerWantsCondiments()) return;
  13.     // 默认需要调料
  14.     this.addCondiments();
  15.   }
  17.   boilWater() {
  18.     console.log("把水煮沸");
  19.   }
  20.   brew() {
  21.     throw new Error("子类必须重写 brew 方法");
  22.   }
  23.   pourInCup() {
  24.     throw new Error("子类必须重写 pourInCup 方法");
  25.   }
  26.   addCondiments() {
  27.     throw new Error("子类必须重写 addCondiments 方法");
  28.   }
  30.   // 此处为钩子函数
  31.   customerWantsCondiments() {
  32.     return true;
  33.   }
  34. }
  36. class Coffee extends Drink {
  37.   brew() {
  38.     console.log("用沸水冲泡咖啡");
  39.   }
  40.   pourInCup() {
  41.     console.log("把咖啡倒进杯子");
  42.   }
  43.   addCondiments() {
  44.     console.log("加糖和牛奶");
  45.   }
  46.   customerWantsCondiments() {
  47.     return window.confirm("请问需要调料吗？");
  48.   }
  49. }
  51. const c = new Coffee()
  52. c.init()

职责链模式

  • 一步操作分多个职责角色完成
  • 将发起者和各个处理者隔离
  • 例子：请假审批，js的链式操作，jquery的链式操作 ``javascript class Action { constructor(name) { this.name = name this.nextAction = null } setNextAction(action) { this.nextAction = action } handle() { console.log(${this.name} 审批`); if(this.nextAction != null) {
    1. this.nextAction.handle()
    } } }

const a1 = new Action(‘组长’) const a2 = new Action(‘经理’) const a3 = new Action(‘总监’) a1.setNextAction(a2) a2.setNextAction(a3) a1.handle()

  2. <a name="jzvz6"></a>
  3. #### 命令模式
  5. - 发布者和接收者分开
  6. ```javascript
  7. class Receiver {
  8.   exec() {
  9.     console.log('exec');
  10.   }
  11. }
  12. class Command {
  13.   constructor(receiver) {
  14.     this.receiver = receiver
  15.   }
  16.   cmd() {
  17.     console.log('触发命令');
  18.     this.receiver.exec()
  19.   }
  20. }
  22. class Invoker {
  23.   constructor(command) {
  24.     this.command = command
  25.   }
  26.   invoke() {
  27.     console.log('start');
  28.     this.command.cmd()
  29.   }
  30. }
  31. // 士兵
  32. const soldier = new Receiver()
  33. // 小号手
  34. const trumpeter = new Command(soldier)
  35. // 将军
  36. const general = new Invoker(trumpeter)
  37. general.invoke()
  • 应用场景
    • 网页富文本操作，浏览器封装了一个命令对象（document.execCommand）

备忘录模式

  • 随时记录一个状态的变化
  • 随时恢复到之前的某个状态
  • 编辑器 ```javascript class Memento { constructor(content) { this.content = content; } getContent() { return this.content; } } class CareTaker { constructor() { this.list = []; } add(memento) { this.list.push(memento); } get(index) { return this.list[index]; } }

class Editor { constructor() { this.content = null; } setContent(content) { this.content = content; } getContent() { return this.content; } saveContentToMemento() { return new Memento(this.content); } getContentFromMemento(memento) { this.content = memento.getContent(); } }

const editor = new Editor(); const careTaker = new CareTaker();

editor.setContent(“1111”); editor.setContent(“1212”); careTaker.add(editor.saveContentToMemento()); editor.setContent(“1515”); careTaker.add(editor.saveContentToMemento()); editor.setContent(“1818”);

console.log(editor.getContent()); editor.getContentFromMemento(careTaker.get(1)); console.log(editor.getContent()); editor.getContentFromMemento(careTaker.get(0)); console.log(editor.getContent()); ```

中介者模式

访问者模式

  • 将数据操作和数据结构分离

解释器模式

  • babel