命令模式是什么，以及命令模式在React中的应用🐝🐝🐝

命令模式是一种行为设计模式，它允许将请求或操作封装为一个对象，从而使我们可以参数化客户端对象，队列请求，将请求记录到日志中，支持可撤销的操作等。

命令模式的概念

命令模式是一种行为型设计模式，它的核心思想是将命令请求封装成一个对象，使得我们可以将这些命令对象存储、传递、调用、排队或撤销。它通常包括以下角色：

• 命令接口（Command Interface）：定义了命令的抽象接口，包括执行（execute）和撤销（undo）等方法。

• 具体命令（Concrete Command）：实现了命令接口，封装了命令的具体操作和接收者对象，负责执行这些操作。

• 接收者（Receiver）：负责执行具体的操作，但不了解命令对象。接收者是命令的实际执行者。

• 调用者（Invoker）：负责调用命令对象执行请求，通常将命令对象存储在队列中或者用于支持撤销。

• 客户端（Client）：创建并配置命令对象、接收者和调用者，以组装具体的命令并执行请求。

命令模式适用于多种场景，包括但不限于以下情况：

• 支持撤销和重做：命令模式使得可以轻松实现撤销和重做操作，因为每个命令都知道如何执行和撤销自己。

• 队列请求：可以将命令对象存储在队列中，以按顺序执行或撤销它们。这对于处理多个请求的情况非常有用。

• 日志和记录：命令模式可以用于记录操作，生成操作日志或事务记录。

• 远程控制：命令模式可用于创建远程控制应用程序，通过网络发送命令来控制远程对象。

• 菜单和按钮：命令模式可用于创建菜单和按钮系统，其中每个按钮或菜单项都是一个命令。

• 事务处理：在需要确保一系列操作以原子方式执行或回

命令模式的例子---快餐店

命令模式和快餐店之间存在一定的关联性，可以通过一个快餐店的示例来解释命令模式的应用。在这个示例中，我们将使用命令模式来管理快餐店的订单和操作。

命令接口（Command Interface）

在这个场景中，命令接口可以表示为一个抽象的订单命令，包括点菜（execute）和取消订单（undo）等方法。

class Command {
  execute() {}
  undo() {}
}

具体命令（Concrete Command）

具体命令是实际的订单命令，每个具体命令对应一个菜品或操作。

class OrderBurgerCommand extends Command {
  constructor(kitchen) {
    super();
    this.kitchen = kitchen;
  }

  execute() {
    this.kitchen.makeBurger();
  }

  undo() {
    this.kitchen.cancelBurger();
  }
}

// 其他具体命令...

接收者（Receiver）接收者表示厨房，负责执行具体的订单命令，制作食物。

class Kitchen {
  makeBurger() {
    console.log("制作汉堡");
  }

  cancelBurger() {
    console.log("取消汉堡订单");
  }

  // 其他制作食物的方法...
}

调用者（Invoker）

调用者是收银台，负责接收顾客的订单，并将订单命令传递给厨房。

class Cashier {
  constructor() {
    this.command = null;
  }

  takeOrder(command) {
    this.command = command;
  }

  submitOrder() {
    this.command.execute();
  }

  cancelOrder() {
    this.command.undo();
  }
}

客户端（Client）

客户端表示顾客，负责创建订单命令和与收银台互动。

const kitchen = new Kitchen();
const cashier = new Cashier();

const orderBurgerCommand = new OrderBurgerCommand(kitchen);

cashier.takeOrder(orderBurgerCommand);
cashier.submitOrder(); // 制作汉堡
cashier.cancelOrder(); // 取消汉堡订单

在这个示例中，命令模式被用来管理快餐店的订单系统。顾客通过与收银台交互来创建订单命令，并将命令传递给厨房，厨房根据命令制作食物。命令模式使得订单操作可以轻松地执行和取消，同时允许添加新的具体命令以扩展菜单。这个示例突出了命令模式在将请求参数化、队列请求、支持撤销等方面的应用。

命令模式在 React 中的应用

命令模式在 React 中可以有多种应用场景，它通常用于处理用户界面上的交互和操作。以下是一些命令模式在 React 中的常见应用方式：

以下是一些完整的示例，演示了命令模式在 React 中的不同应用场景。

按钮和事件处理

这个示例演示了如何使用命令模式来处理按钮点击事件，将用户的操作封装为命令对象，以便执行相应操作。

import React, { Component } from "react";

// 命令接口
class Command {
  execute() {}
}

// 具体命令对象
class SaveCommand extends Command {
  constructor(component) {
    super();
    this.component = component;
  }

  execute() {
    console.log(`Saving value: ${this.component.state.value}`);
    // 执行保存操作
  }
}

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
    this.command = null;
  }

  handleInputChange = (e) => {
    this.setState({ value: e.target.value });
  };

  executeCommand = () => {
    if (this.command) {
      this.command.execute();
    }
  };

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleInputChange} />
        <button onClick={this.executeCommand}>Execute</button>
      </div>
    );
  }
}

const myComponent = new MyComponent();
myComponent.command = new SaveCommand(myComponent);

export default myComponent;

在这个示例中，用户的输入值被封装为一个命令对象（SaveCommand），当用户点击按钮时，命令对象的 execute 方法执行保存操作。

撤销和重做

这个示例演示了如何使用命令模式来实现撤销和重做功能。

import React, { Component } from "react";

// 命令接口
class Command {
  execute() {}
  undo() {}
}

// 具体命令对象
class AddTextCommand extends Command {
  constructor(editor, text) {
    super();
    this.editor = editor;
    this.text = text;
  }

  execute() {
    this.editor.addText(this.text);
  }

  undo() {
    this.editor.removeLastText();
  }
}

class TextEditor extends Component {
  constructor(props) {
    super(props);
    this.state = { text: "", history: [] };
  }

  addText = (text) => {
    const newText = this.state.text + text;
    this.setState({ text: newText });
    this.state.history.push(new AddTextCommand(this, text));
  };

  removeLastText = () => {
    const history = this.state.history;
    if (history.length > 0) {
      const lastCommand = history.pop();
      lastCommand.undo();
    }
  };

  render() {
    return (
      <div>
        <div>{this.state.text}</div>
        <button onClick={() => this.addText("Hello ")}>Add Text</button>
        <button onClick={this.removeLastText}>Undo</button>
      </div>
    );
  }
}

export default TextEditor;

这个示例中，我们创建了一个简单的文本编辑器，用户可以添加文本并执行撤销操作。每次添加文本时，一个命令对象会记录操作，以支持撤销。

菜单和导航

这个示例演示了如何使用命令模式来管理应用程序的菜单和导航。

import React, { Component } from "react";

// 命令接口
class Command {
  execute() {}
}

// 具体命令对象
class OpenMenuCommand extends Command {
  constructor(menuItem) {
    super();
    this.menuItem = menuItem;
  }

  execute() {
    // 打开菜单项的对应页面
    console.log(`Opening ${this.menuItem}`);
  }
}

class MenuBar extends Component {
  constructor(props) {
    super(props);
    this.state = { activeMenuItem: null };
  }

  handleMenuItemClick = (menuItem) => {
    this.setState({ activeMenuItem: menuItem });
    const command = new OpenMenuCommand(menuItem);
    command.execute();
  };

  render() {
    return (
      <div>
        <ul>
          <li onClick={() => this.handleMenuItemClick("Home")}>Home</li>
          <li onClick={() => this.handleMenuItemClick("About")}>About</li>
          <li onClick={() => this.handleMenuItemClick("Contact")}>Contact</li>
        </ul>
        <div>Active Menu Item: {this.state.activeMenuItem}</div>
      </div>
    );
  }
}

export default MenuBar;

在这个示例中，我们创建了一个简单的菜单栏，用户点击菜单项时会执行相应的命令，以打开对应的页面。

这些示例突出了命令模式在 React 中的不同应用场景，包括按钮和事件处理、撤销和重做、菜单和导航等。命令模式可以帮助我们更好地组织和管理用户界面的交互行为，并支持撤销和扩展功能。

总结

命令模式是一种设计模式，它允许将操作封装成对象，使得我们可以在不同的时间和地点执行这些操作。它主要有五个关键角色：命令接口、具体命令、接收者、调用者和客户端。命令模式的主要优点是解耦了命令的发起者和执行者，支持撤销操作，以及能够实现命令的延迟执行和批处理。这种模式在需要将操作参数化、记录日志、支持撤销等情况下非常有用。

最后分享两个我的两个开源项目,它们分别是:

• 前端脚手架 create-neat
• 在线代码协同编辑器

这两个项目都会一直维护的,如果你也喜欢,欢迎 star 🚗🚗🚗