关于命令模式我所知道的

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

关键词：Command

本质其实就是回调函数。

在没有函数的语言里，命令模式就是函数的替代品（代餐、平替）。

主要作用：拓展业务功能，通过发送命令来解耦执行任务的方法。

最核心的实现手段：把函数当作参数进行传递。

命令模式解决什么问题？

前端开发很多情况下需要通过后端提供的数据，例如后端返回一组按钮的数据。

{
  "btns": [
    {
      "code": "submit",
      "disable": false
    },
    {
      "code": "valid",
      "disable": false
    },
    {
      "code": "cancel",
      "disable": false
    }
  ]
}

我们第一反应是：将按钮遍历，然后在点击事件的时候添加相关的业务逻辑:

const btnsTextMap = {
  submit: '提交',
  valid: '校验',
  cancel: '取消'
}

const onHandle = (code) => {
  if(code === 'submit') {
    // ...
  }
  // ...
}

{
  btns.map(btn => <button onClick={()=>onHandle(item.code)}>{btnsTextMap[btn[item.code]]}</button>)
}

后续如果增加新按钮例如：删除。那就需要修改 onHandle 里面的函数，这样其实并不易维护。

来看下类似的功能的demo：

通过命令模式改造后：

通过调用 execute 把要执行的方法当做参数传入，就可以直接执行相关逻辑。

定义

将请求转换为一个包含与请求相关的所有信息的独立对象。能根据不同的请求，将方法参数化、 延迟请求执行或将其放入队列中， 且能实现可撤销操作。

类比日常生活

在餐厅点餐，选好菜品叫服务员下单。厨师收到订单，根据订单配料做菜，然后将做好的菜品放在托盘上，服务员看到托盘后对订单进行检查， 确保所有食物都是你要的， 然后将食物放到了你的桌上。

那份订单就是命令。

拿订餐来说，我需要向厨师发送请求，但是完全不知道厨师的名字和联系方式，也不知道厨师炒菜的方式和步骤。

命令模式把我的订单封装成 command 对象，也就是订餐中的订单对象。厨师只是把拿到的订单执行特定的业务逻辑。

图片来源于 refactoringguru

应用场景

命令模式可以解决哪类问题

主要是用来控制命令的执行，比如：异步、延迟、排队执行命令、撤销重做命令、存储命令、给命令记录日志等。

命令模式的作用不仅是封装运算块，而且可以很方便地给命令对象增加撤销操作。就像订餐时客人可以通过电话来取消订单一样。

具体实现

命令模式的设计思路和具体实现。

命令模式用到最核心的实现手段，就是将函数封装成对象。把函数当作参数进行传递。

interface Command {
  execute(): void;
}

class SimpleCommand implements Command {
  private payload: string;

  constructor(payload: string) {
    this.payload = payload;
  }

  public execute(): void {
    console.log(
      `SimpleCommand: See, I can do simple things like printing (${this.payload})`
    );
  }
}

class ComplexCommand implements Command {
  private receiver: Receiver;

  private a: string;

  private b: string;

  constructor(receiver: Receiver, a: string, b: string) {
    this.receiver = receiver;
    this.a = a;
    this.b = b;
  }

  public execute(): void {
    console.log(
      "ComplexCommand: Complex stuff should be done by a receiver object."
    );
    this.receiver.doSomething(this.a);
    this.receiver.doSomethingElse(this.b);
  }
}

class Receiver {
  public doSomething(a: string): void {
    console.log(`Receiver: Working on (${a}.)`);
  }

  public doSomethingElse(b: string): void {
    console.log(`Receiver: Also working on (${b}.)`);
  }
}

class Invoker {
  private onStart: Command;

  private onFinish: Command;

  public setOnStart(command: Command): void {
    this.onStart = command;
  }

  public setOnFinish(command: Command): void {
    this.onFinish = command;
  }

  public doSomethingImportant(): void {
    console.log("Invoker: Does anybody want something done before I begin?");
    if (this.isCommand(this.onStart)) {
      this.onStart.execute();
    }

    console.log("Invoker: ...doing something really important...");

    console.log("Invoker: Does anybody want something done after I finish?");
    if (this.isCommand(this.onFinish)) {
      this.onFinish.execute();
    }
  }

  private isCommand(object): object is Command {
    return object.execute !== undefined;
  }
}

const invoker = new Invoker();
invoker.setOnStart(new SimpleCommand("Say Hi!"));
const receiver = new Receiver();
invoker.setOnFinish(new ComplexCommand(receiver, "Send email", "Save report"));

invoker.doSomethingImportant();

参考资料：

refactoringguru