设计模式之其他设计模式(7-2)

简介: 设计模式之其他设计模式(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、总结

网络异常,图片无法展示
|



相关文章
|
设计模式 存储 安全
【设计模式】五种创建者模式
创建者模式 创建型模式的主要关注点是“怎样创建对象?”,它的主要特点是“将对象的创建与使用分离”。 这样可以降低系统的耦合度,使用者不需要关注对象的创建细节。 创建型模式分为: 单例模式 工厂方法模式 抽象工程模式 原型模式 建造者模式 单例设计模式 单例模式(Singleton Pattern)是 Java 中最简单的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 这种模式涉及到一个单一的类,该类负责创建自己的对象,同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式,可以直接访问,不需要实例化该类的对象。 单例模式的结构 单例模式的
79 0
|
8月前
|
设计模式 前端开发 C++
什么是设计模式?
什么是设计模式?
76 0
|
设计模式 存储 算法
|
设计模式 存储 NoSQL
为什么我们需要设计模式?
设计模式解决什么问题设计模式一直被认为是一门难以学习的课程。究其原因是因为我们不清楚设计模式在解决哪些问题方面发挥作用。简言之,设计是为了实现特定的目标,基于不断更新的局部知识来获得解决方案的过程。我们通常熟悉的范式是在几乎掌握所有知识的情况下解决问题,例如解数学题、物理题等。然而,在软件编程过程中,我们掌握的知识往往不充分,而且会不断更新,因此需要我们关注有哪些知识,没有哪些知识,可以获取哪些知
9348 1
|
设计模式 程序员
设计模式(二)
设计模式
138 1
|
设计模式 Java
23种设计模式
23种设计模式
149 0
|
设计模式 XML 开发框架
设计模式的理解
设计模式的理解
|
设计模式 Arthas Java
设计模式(四)
设计模式
208 0
|
设计模式 存储 缓存
|
设计模式 算法 Java
0202年了!你还不知道模版方法设计模式?
0202年了!你还不知道模版方法设计模式?
118 0