命令模式

通过命令模式，我们可以将执行具体的任务的对象和调用该任务的对象解耦。

假设我们有一个在线视频配送平台，用户可以下单、跟踪和取消订单。

class OrderManager() {
  constructor() {
    this.orders = []
  }

  placeOrder(order, id) {
    this.orders.push(id)
    // return `You have successfully ordered ${order} (${id})`;
    return `你已成功点单 ${order} (${id})`;
  }

  trackOrder(id) {
    // return `Your order ${id} will arrive in 20 minutes.`
    return `你的订单 ${id} 将在 20 分钟后送达。`
  }

  cancelOrder(id) {
    this.orders = this.orders.filter(order => order.id !== id)
    return `你已成功取消订单 ${id}`
    // return `You have canceled your order ${id}`
  }
}

在 OrderManager 类中，我们创建了 placeOrder、trackOrder 和 cancelOrder 方法。它们在 JavaScript 中完全可用，并且可以直接调用。

const manager = new OrderManager();

manager.placeOrder("Pad Thai", "1234");
manager.trackOrder("1234");
manager.cancelOrder("1234");

However, there are downsides to invoking the methods directly on the manager instance. It could happen that we decide to rename certain methods later on, or the functionality of the methods change.

Say that instead of calling it placeOrder, we now rename it to addOrder! This would mean that we would have to make sure that we don’t call the placeOrder method anywhere in our codebase, which could be very tricky in larger applications. Instead, we want to decouple the methods from the manager object, and create separate command functions for each command!

Let’s refactor the OrderManager class: instead of having the placeOrder, cancelOrder and trackOrder methods, it will have one single method: execute. This method will execute any command it’s given.

Each command should have access to the orders of the manager, which we’ll pass as its first argument.

class OrderManager {
  constructor() {
    this.orders = [];
  }

  execute(command, ...args) {
    return command.execute(this.orders, ...args);
  }
}

We need to create three Commands for the order manager:

• PlaceOrderCommand
• CancelOrderCommand
• TrackOrderCommand

class Command {
  constructor(execute) {
    this.execute = execute;
  }
}

function PlaceOrderCommand(order, id) {
  return new Command((orders) => {
    orders.push(id);
    return `You have successfully ordered ${order} (${id})`;
  });
}

function CancelOrderCommand(id) {
  return new Command((orders) => {
    orders = orders.filter((order) => order.id !== id);
    return `You have canceled your order ${id}`;
  });
}

function TrackOrderCommand(id) {
  return new Command(() => `Your order ${id} will arrive in 20 minutes.`);
}

Perfect! Instead of having the methods directly coupled to the OrderManager instance, they’re now separate, decoupled functions that we can invoke through the execute method that’s available on the OrderManager.

在演练场中查看代码

Pros

The command pattern allows us to decouple methods from the object that executes the operation. It gives you more control if you’re dealing with commands that have a certain lifespan, or commands that should be queued and executed at specific times.

Cons

The use cases for the command pattern are quite limited, and often adds unnecessary boilerplate to an application.

References

• Command Design Pattern - SourceMaking
• Command Pattern - Refactoring Guru
• Command Pattern - Carlos Caballero