JS设计模式之命令模式的用法详解

// 接收者对象
class Light {
    turnOn() {}
    turnOff() {}
}
// 命令接口
abstract class Command {
    abstract execute():void;
}
// 具体命令：打开灯
class TurnOnCommand extends Command {
    constructor(public light: Light) { super() }
    execute() { this.light.turnOn() }
}
// 具体命令：关闭灯
class TurnOffCommand extends Command {
    constructor(public light: Light) { super() }
    execute() { this.light.turnOff() }
}
// 调用者对象
class RemoteControl {
    command: Command;
    setCommand(command: Command) { this.command = command }
    pressButton() { this.command.execute() }
}
// 使用示例
// 创建执行者
const light = new Light();
// 创建具体命令对象，封装执行者
const turnOnCommand = new TurnOnCommand(light);
const turnOffCommand = new TurnOffCommand(light);
// 创建调用者对象
const remoteControl = new RemoteControl();
// 设置具体命令对象然后执行
remoteControl.setCommand(turnOnCommand);
remoteControl.pressButton();

// 请求接收者
class Reciever {
  async get(path: string) {
    const res = await fetch(`https://rec.example.com/${path}`);
    const data = await res.json();
  }
}
// 命令接口
class Cmd { exe() {} }
// 具体命令：发送请求
class RCd extends Cmd {
  constructor(public rec, public url) {
    super();
  }
  exe() {
    return this.rec.get(this.url);
  }
}
// 调用者对象
class RM {
  cQueue: Cmd[] = [];
  add(command: Cmd) {
    this.cQueue.push(command);
  }
  pReq() {
    const promises = this.cQueue.map((command) => command.exe());
    return Promise.all(promises);
  }
}
// 使用示例
const rec = new Reciever(); // 创建请求接收者
const rM = new RM(); // 创建请求管理者
// 添加具体请求命令
rM.add(new RCd(rec, 'data1'));
rM.add(new RCd(rec, 'data2'));
rM.add(new RCd(rec, 'data3'));
rM.pReq()
  .then(() => {
    console.log('所有请求已完成');
  })
  .catch((error) => {
    console.error('请求出错：', error);
  });

// 命令接口：想要用命令策略实现撤销、重做就必须先在抽象接口中定义好撤销的接口
abstract class Cmd {
  abstract exe(): void;
  abstract undo(): void;
}
// 具体命令类 - 加法命令
class AddCmd extends Cmd {
  constructor(public rec: Rec, public value: number) {
    super();
  }
  exe() {
    this.rec.add(this.value);
  }
  undo() {
    this.rec.subtract(this.value);
  }
}
// 接收者类
class Rec {
  result = 0;
  add(value: number) { this.result += value }
  subtract(value: number) { this.result -= value }
}
// 调用者/发送者
class Invoker {
  cmds: Cmd[] = [];
  xcmd: Cmd[] = [];
  exe(cmd: Cmd) {
    cmd.exe();
    this.cmds.push(cmd);
  }
  // 重点
  undo() {
    const cmd = this.cmds.pop();
    if (!cmd) return;
    cmd.undo();
    this.xcmd.push(cmd);
  }
  // 重点
  redo() {
    const cmd = this.xcmd.pop();
    if (cmd) {
      cmd.exe();
      this.cmds.push(cmd);
    }
  }
}
// 示例用法
const rec = new Rec(); // 创建接收者对象
const ivk = new Invoker(); // 创建调用者对象
const addCmd = new AddCmd(rec, 5); // 创建加法命令
ivk.exe(addCmd); // 执行加法命令，结果为：5
ivk.undo(); // rec.result = 0
ivk.redo(); // rec.result = 5