前端设计模式之命令模式

定义

命令（Command）模式的定义如下：将一个请求封装为一个对象，使发出请求的责任和执行请求的责任分割开。这样两者之间通过命令对象进行沟通，这样方便将命令对象进行储存、传递、调用、增加与管理。

命令模式最主要的一个功能就是解耦，将发出请求的部分与执行请求的部分分离开，通过命令对象进行连接。

命令模式的结构(也可以不是类，而是方法，主要是思路而不是具体的形式)：

1. 具体命令类（Concrete Command）角色：是抽象命令类的具体实现类,连接实现者与调用者，它拥有实现者对象，并通过调用实现者的功能来完成命令要执行的操作；
2. 实现者/接收者（Receiver）角色：执行命令功能的相关操作，是具体命令对象业务的真正实现者；
3. 调用者/请求者（Invoker）角色：是请求的发送者，它通常拥有很多的命令对象，并通过访问命令对象来执行相关请求，它不直接访问接收者。

解决的问题：

将命令的发出者与命令的实现 解耦，一般可能用来处理，命令的请求者比较明确，但是具体实现不确定，为了不耽误进度，将两块分开开发，或多人协作等等…
如：

1. 开发时，一排按钮功能，与具体的实现分别为不同的人去实现，最后通过方法组合起来。
2. 电视换台操作，电视机内部的具体实现与遥控器上按钮（请求者）分开实现，最后通过遥控器组合在一起。

实现

换台操作

// 实现者，实现者一般只需要考虑自己是如何实现的
class Receiver {
  constructor(handle) {
    this.handle = handle;
  }
}

// 请求者，可以是某个对象，或者某个
class Invoker {
  constructor() {

  }
}

// 命令类，连结实现者与请求者
class Command {
  constructor() {}
  setCommand(invoer, handle) {
    invoer.handle = handle;
  }
}


// 1. 初始化实现者，先将需求完成
const previousMethod = new Receiver(() => {
  console.log("执行了 previous");
});
const nextMethod = new Receiver(() => {
  console.log("执行了 next");
});

// 2.初始化请求者
const previousbtn = new Invoker();
const nextbtn = new Invoker();


// 3. 初始化命令类，用来连结 请求者 和 实现者
const command = new Command();
command.setCommand(previousbtn, previousMethod.handle);
command.setCommand(nextbtn, nextMethod.handle);

previousbtn.handle();
nextbtn.handle();