设计模式之其他设计模式（7-2）

1、命令模式

• 自己敲一遍

// 命令模式

// 执行者
class Receiver {
  act() {
    console.log("执行命令3");
  }
}

// 触发命令
class Command {
  constructor(receiver) {
    this.receiver = receiver;
  }

  cmd() {
    console.log("传递命令2");
    this.receiver.act();
  }
}

// 触发者
class Invoker {
  constructor(command) {
    this.command = command;
  }

  invoker() {
    console.log("下达开始进攻1");
    this.command.cmd();
  }
}

// 测试代码
// 士兵
let receiver = new Receiver();
// 传号者
let command = new Command(receiver);
// 将军
let invoker = new Invoker(command);
invoker.invoker();

• 结果展示

• 非常nice

2、备忘录 模式

• 撤销 拷贝 场景

• 自己敲一遍

// 备忘类
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;
  }
  // 关键步骤 先存到 Memento 类中
  saveContentToMemento() {
    return new Memento(this.content);
  }
  // 取得 刚才 存的内容
  getContentFromMemento(memento) {
    this.content = memento.getContent();
  }
}

// 测试代码
let editor = new Editor();
let careTaker = new CareTaker();

editor.setContent("111");
editor.setContent("222");
careTaker.add(editor.saveContentToMemento()); // 备份到 Memento 类中
editor.setContent("333");
careTaker.add(editor.saveContentToMemento()); // 备份到 Memento 类中
editor.setContent("444");

console.log(editor.getContent()); // 444
editor.getContentFromMemento(careTaker.get(1)); // 撤销一步
console.log(editor.getContent()); // 333
editor.getContentFromMemento(careTaker.get(0)); // 撤销一步
console.log(editor.getContent()); // 222

• 页面展示 非常nice ！

3、中介者 模式

• 类似于 买房/租房中间中介的作用

• 自己敲一遍

// 中介者模式
class A {
  constructor() {
    this.number = 0;
  }
  // m 是中介者
  setNumber(num, m) {
    this.number = num;
    if (m) {
      m.setB();
    }
  }
}

class B {
  constructor() {
    this.number = 0;
  }
  // m 是中介者
  setNumber(num, m) {
    this.number = num;
    if (m) {
      m.setA();
    }
  }
}

class Mediator {
  constructor(a, b) {
    this.a = a;
    this.b = b;
  }

  setB() {
    let number = this.a.number;
    this.b.setNumber(number * 100);
  }

  setA() {
    let number = this.a.number;
    this.a.setNumber(number / 100);
  }
}

// 测试代码
let a = new A();
let b = new B();
let m = new Mediator(a, b);
a.setNumber(100, m);
console.log(a.number, b.number); // 100 10000
b.setNumber(100, m);
console.log(a.number, b.number); // 1 100

• 结果展示 非常nice

4、访问者/显示器 模式

5、总结