Published on

命令模式详解

Authors
  • avatar
    Name
    青雲
    Twitter

命令模式（Command Pattern）是一种行为型设计模式，它将请求或操作封装成一个对象，从而使得可以用不同的请求、队列或日志来参数化其他对象。同时，它还支持可撤销的操作。

命令模式的核心在于，将请求封装成一个独立的对象，使得调用和处理解耦，可以实现更灵活的请求处理方式。

为什么需要命令模式？

日常生活中，我们用遥控器来操作电视：开机、关机、调高音量、切换频道等。我们可以把遥控器看作客户端，电视看作是接收者，遥控器上的每个按钮对应一个命令。按下某个按钮就会向电视发出一个命令，比如“开机”或“切换到频道5”。

在这种情况下：

  1. 遥控器 - 相当于命令发起者或调用者（Invoker），由它触发命令请求。
  2. 按钮 - 每个按钮都可以被视为一个命令对象（Concrete Command），它封装了对电视（receiver）的操作（比如开机、调音量）。
  3. 电视 - 作为命令接收者（Receiver），执行与命令对象相关联的操作（例如打开）。
  4. 命令接口（Command）- 提供执行操作的接口，具体命令（如开机命令、调节音量命令）实现这个接口，并且在内部指定了接收者和操作。

在实际开发中，令模式可以解决以下几个问题：

  1. 请求发送者与接收者解耦：命令模式将请求的发送者与实际执行请求的对象解耦，从而提高灵活性。
  2. 支持撤销和重做：命令可以存储一个操作的历史记录，从而支持操作的撤销和重做。
  3. 支持日志记录：通过将操作记录下来，可以实现系统的日志记录功能。
  4. 支持队列请求：命令对象可以保存在队列中，从而支持请求的排队处理。

基本概念

命令模式的核心在于将请求封装成一个对象，包含以下主要角色：

  1. 命令接口（Command）：定义执行请求的方法。
  2. 具体命令（ConcreteCommand）：实现命令接口，执行具体的操作。
  3. 接收者（Receiver）：真正执行处理请求的类。
  4. 调用者（Invoker）：触发命令执行的类。
  5. 客户（Client）：创建命令并设置调用者和接收者。

实现示例

假设我们有一个智能家居系统，可以通过命令模式控制家里的电灯和风扇。 JavaScript代码示例 - JavaScript、架构设计

定义命令接口

// 命令接口，定义执行请求的方法
interface Command {
  execute(): void
  undo(): void
}

定义具体命令

// 电灯命令
class LightOnCommand implements Command {
  private light: Light

  constructor(light: Light) {
    this.light = light
  }

  execute(): void {
    this.light.on()
  }

  undo(): void {
    this.light.off()
  }
}

class LightOffCommand implements Command {
  private light: Light

  constructor(light: Light) {
    this.light = light
  }

  execute(): void {
    this.light.off()
  }

  undo(): void {
    this.light.on()
  }
}

// 风扇命令
class FanOnCommand implements Command {
  private fan: Fan

  constructor(fan: Fan) {
    this.fan = fan
  }

  execute(): void {
    this.fan.on()
  }

  undo(): void {
    this.fan.off()
  }
}

class FanOffCommand implements Command {
  private fan: Fan

  constructor(fan: Fan) {
    this.fan = fan
  }

  execute(): void {
    this.fan.off()
  }

  undo(): void {
    this.fan.on()
  }
}

定义接收者

// 电灯类
class Light {
  on(): void {
    console.log('The light is on')
  }

  off(): void {
    console.log('The light is off')
  }
}

// 风扇类
class Fan {
  on(): void {
    console.log('The fan is on')
  }

  off(): void {
    console.log('The fan is off')
  }
}

定义调用者

// 调用者类
class RemoteControl {
  private onCommands: Command[] = []
  private offCommands: Command[] = []
  private undoCommand: Command

  setCommand(slot: number, onCommand: Command, offCommand: Command): void {
    this.onCommands[slot] = onCommand
    this.offCommands[slot] = offCommand
  }

  onButtonPressed(slot: number): void {
    this.onCommands[slot].execute()
    this.undoCommand = this.onCommands[slot]
  }

  offButtonPressed(slot: number): void {
    this.offCommands[slot].execute()
    this.undoCommand = this.offCommands[slot]
  }

  undoButtonPressed(): void {
    this.undoCommand.undo()
  }
}

使用命令模式控制智能家居设备

const light = new Light()
const fan = new Fan()

const lightOnCommand = new LightOnCommand(light)
const lightOffCommand = new LightOffCommand(light)
const fanOnCommand = new FanOnCommand(fan)
const fanOffCommand = new FanOffCommand(fan)

const remoteControl = new RemoteControl()

remoteControl.setCommand(0, lightOnCommand, lightOffCommand)
remoteControl.setCommand(1, fanOnCommand, fanOffCommand)

// 控制电灯
remoteControl.onButtonPressed(0)
remoteControl.offButtonPressed(0)
remoteControl.undoButtonPressed()

// 控制风扇
remoteControl.onButtonPressed(1)
remoteControl.offButtonPressed(1)
remoteControl.undoButtonPressed()

The light is on
The light is off
The light is on
The fan is on
The fan is off
The fan is on

应用场景

撤销/重做操作

在文本编辑器、图形编辑器等内容创作工具，需要支持撤销（Undo）和重做（Redo）功能。命令模式允许将每次编辑作为命令对象进行存储，从而方便实现撤销和重做。

文本编辑器的撤销/重做功能

// 定义命令接口
interface Command {
  execute(): void
  undo(): void
}

// 文本编辑器可以添加和删除文本
class TextEditor {
  private text: string = ''

  addText(newText: string): void {
    this.text += newText
  }

  removeText(length: number): void {
    this.text = this.text.slice(0, -length)
  }

  getText(): string {
    return this.text
  }
}

// 具体命令类：添加文本命令
class AddTextCommand implements Command {
  private editor: TextEditor
  private text: string

  constructor(editor: TextEditor, text: string) {
    this.editor = editor
    this.text = text
  }

  execute(): void {
    this.editor.addText(this.text)
  }

  undo(): void {
    this.editor.removeText(this.text.length)
  }
}

// 管理命令的历史记录
class TextEditorHistory {
  private commands: Command[] = []
  private redoStack: Command[] = []

  executeCommand(command: Command): void {
    command.execute()
    this.commands.push(command)
    this.redoStack = []
  }

  undo(): void {
    const command = this.commands.pop()
    if (command) {
      command.undo()
      this.redoStack.push(command)
    }
  }

  redo(): void {
    const command = this.redoStack.pop()
    if (command) {
      command.execute()
      this.commands.push(command)
    }
  }
}

// 使用示例
const editor = new TextEditor()
const history = new TextEditorHistory()

const addHello = new AddTextCommand(editor, 'Hello ')
history.executeCommand(addHello)

const addWorld = new AddTextCommand(editor, 'World!')
history.executeCommand(addWorld)

console.log(editor.getText()) // 输出: Hello World!

history.undo()
console.log(editor.getText()) // 输出: Hello

history.redo()
console.log(editor.getText()) // 输出: Hello World!

每次编辑作为命令对象存储在历史记录中，通过命令对象的 execute 和 undo 方法，轻松实现撤销和重做功能。

操作的队列执行

在处理一系列异步操作（如API请求）时，命令模式可以将每个操作封装为命令对象，以便按顺序执行和管理。

API请求的队列执行

// 定义命令接口
interface Command {
  execute(): Promise<void>
}

// 具体命令类：API请求命令
class APIRequestCommand implements Command {
  private url: string

  constructor(url: string) {
    this.url = url
  }

  async execute(): Promise<void> {
    const response = await fetch(this.url)
    const data = await response.json()
    console.log(data)
  }
}

// 管理命令的队列
class CommandQueue {
  private queue: Command[] = []

  addCommand(command: Command): void {
    this.queue.push(command)
  }

  async processQueue(): Promise<void> {
    while (this.queue.length > 0) {
      const command = this.queue.shift()
      if (command) {
        await command.execute()
      }
    }
  }
}

// 使用示例
const queue = new CommandQueue()
queue.addCommand(new APIRequestCommand('https://jsonplaceholder.typicode.com/posts/1'))
queue.addCommand(new APIRequestCommand('https://jsonplaceholder.typicode.com/posts/2'))

queue.processQueue().then(() => console.log('All requests processed.'))

命令对象添加到队列中并按顺序执行，方便管理和扩展。此外，队列中也可以动态添加和移除命令对象。

事件处理系统

复杂的 Web 应用或游戏需要处理大量事件和用户交互。使用命令模式将事件处理逻辑封装成命令，根据不同事件触发不同命令对象，使事件处理结构更加清晰。

游戏事件处理

// 定义命令接口
interface Command {
  execute(): void
}

// 具体命令类：Jump和Fire命令
class JumpCommand implements Command {
  execute(): void {
    console.log('Player jumps!')
  }
}

class FireCommand implements Command {
  execute(): void {
    console.log('Player fires!')
  }
}

// 控制游戏操作的调用者
class GameController {
  private commands: Map<string, Command> = new Map()

  setCommand(action: string, command: Command): void {
    this.commands.set(action, command)
  }

  handleAction(action: string): void {
    const command = this.commands.get(action)
    if (command) {
      command.execute()
    }
  }
}

// 使用示例
const controller = new GameController()
controller.setCommand('jump', new JumpCommand())
controller.setCommand('fire', new FireCommand())

// 模拟用户输入
controller.handleAction('jump')
controller.handleAction('fire')

不同事件触发相应命令对象的执行，使得事件处理逻辑清晰、易于扩展。

组件间通信

前端框架（如 React、Vue）中，父子组件或兄弟组件间的通信可以通过命令模式管理，将通信行为封装为命令对象，使组件间的数据流动更加明确。

// 定义命令接口
interface Command {
  execute(): void
}

// 组件A
class ComponentA {
  updateData(data: string): void {
    console.log(`ComponentA data updated to: ${data}`)
  }
}

// 具体命令类：更新数据命令
class UpdateDataCommand implements Command {
  private component: ComponentA
  private data: string

  constructor(component: ComponentA, data: string) {
    this.component = component
    this.data = data
  }

  execute(): void {
    this.component.updateData(this.data)
  }
}

// 组件B
class ComponentB {
  private command: Command

  setUpdateCommand(command: Command): void {
    this.command = command
  }

  updateData(): void {
    if (this.command) {
      this.command.execute()
    }
  }
}

// 使用示例
const componentA = new ComponentA()
const componentB = new ComponentB()

const updateCommand = new UpdateDataCommand(componentA, 'New Data')
componentB.setUpdateCommand(updateCommand)

// 模拟事件触发
componentB.updateData()

通信行为封装为命令对象，使组件间的通信行为明确、可维护。

批处理操作

多个对象执行相同操作（如批量删除选中的列表项），通过命令模式封装操作命令，对选定对象集合执行命令，简化代码逻辑。

批量删除操作

// 定义命令接口
interface Command {
  execute(): void
}

// 具体命令类：删除项命令
class DeleteItemCommand implements Command {
  private item: string

  constructor(item: string) {
    this.item = item
  }

  execute(): void {
    console.log(`Item deleted: ${this.item}`)
  }
}

// 批处理记录类
class BatchProcessor {
  private commands: Command[] = []

  addCommand(command: Command): void {
    this.commands.push(command)
  }

  executeCommands(): void {
    this.commands.forEach((command) => command.execute())
    this.commands = []
  }
}

// 使用示例
const processor = new BatchProcessor()

processor.addCommand(new DeleteItemCommand('Item 1'))
processor.addCommand(new DeleteItemCommand('Item 2'))
processor.addCommand(new DeleteItemCommand('Item 3'))

processor.executeCommands()

命令对象用于批处理操作，封装单一操作后，命令对象进行集合执行，简化代码逻辑。

开源库中的应用

Redux

Redux 是一种状态管理库，广泛应用于 React 和其他 JavaScript 应用中。Redux 的 Action 和 Reducer 就采用了命令模式的理念。

Action 本质上是命令，描述了要进行的变化。Reducer 执行这些命令，根据当前状态和 action 返回新的状态。

// Action 类型
interface Action {
  type: string
  payload?: any
}

// Action Creators
const addUser = (user: string): Action => ({
  type: 'ADD_USER',
  payload: user,
})

// Initial State
const initialState = {
  users: [],
}

// Reducer
const userReducer = (state = initialState, action: Action) => {
  switch (action.type) {
    case 'ADD_USER':
      return {
        ...state,
        users: [...state.users, action.payload],
      }
    default:
      return state
  }
}

Cypress

Cypress 是一个前端测试框架，广泛应用于现代 Web 应用的自动化测试。Cypress 使用命令模式来封装测试步骤，将每个测试操作作为一个命令对象。

// 每个测试步骤就是一个命令
describe('Cypress Test', () => {
  it('should display the correct title', () => {
    // 访问页面
    cy.visit('https://example.com')

    // 输入搜索内容
    cy.get('input[name="q"]').type('Cypress')

    // 提交表单
    cy.get('form').submit()

    // 断言结果
    cy.title().should('include', 'Cypress')
  })
})

MobX-state-tree

MobX-state-tree 是一个基于 MobX 的状态管理库，使用命令模式来管理状态的变化。它将每个操作封装成树节点上的命令，并将记录每个命令的变化，以便支持撤销和重做功能。

import { types, onAction } from 'mobx-state-tree'

// 模型定义
const Todo = types
  .model('Todo', {
    title: types.string,
    done: types.boolean,
  })
  .actions((self) => ({
    toggle() {
      self.done = !self.done
    },
  }))

const RootStore = types.model('RootStore', {
  todos: types.array(Todo),
})

const store = RootStore.create({
  todos: [{ title: 'Learn MST', done: false }],
})

onAction(store, (call) => {
  console.log(`Action ${call.name} was called`)
})

// 执行命令
store.todos[0].toggle() // Action toggle was called

优缺点

优点

  1. 解耦发送者和接收者：发送请求的对象与执行请求的对象解耦，从而提高系统的灵活性。
  2. 支持撤销和重做：命令模式可以记录命令，支持操作的撤销和重做。
  3. 易于扩展：可以方便地增加新的命令类型，而不会影响其他的类。
  4. 支持日志记录和队列请求：命令模式可以记录日志，从而实现提供回放功能，并支持将请求排队执行。

缺点

  1. 增加复杂性：需要定义多个命令类和调用者类，增加了系统的复杂性。
  2. 命令数量多：如果具体命令种类过多，可能会导致命令类数量的急剧增加。

总结

命令模式是一种非常实用且灵活的模式，通过将请求封装成对象，实现了请求发送者与接收者的解耦，能够支持撤销和重做、记录日志、队列请求等功能，使得系统的灵活性与可维护性大大提高。在各种实际应用中，命令模式非常适合复杂操作的处理、事件系统的管理、组件间的通信以及批处理操作的实现。

Discuss on Twitter • View on GitHub