命令模式 / Command

代码示例

// 命令接口
class Command {
  execute() {
    throw new Error("必须实现 'execute'方法");
  }
}

// 接收者对象
class Receiver {
  performAction() {
    // 执行具体的操作逻辑
    console.log('执行操作');
  }
}

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

  execute() {
    this.receiver.performAction();
  }
}

// 调用者（Invoker）对象
class Invoker {
  setCommand(command) {
    this.command = command;
  }

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

// 使用示例
const receiver = new Receiver();
const command = new ConcreteCommand(receiver);
const invoker = new Invoker();

invoker.setCommand(command);
invoker.executeCommand(); // 输出：执行操作

React 函数式组件代码示例

// 定义接收者类型
interface Receiver {
  submitForm(data: any): void;
}

// 接收者对象
class FormSubmitter implements Receiver {
  submitForm(data: any): void {
    console.log('提交表单数据：', data);
    // 这里可以包含提交表单到服务器的逻辑
  }
}

// 命令类型（在函数式编程中，命令通常就是函数）
type Command = (data: any) => void;

// 创建命令函数
function createFormSubmitCommand(submitter: Receiver): Command {
  return (data: any) => submitter.submitForm(data);
}

// React 函数式组件
const MyForm: React.FC = () => {
  // 创建接收者对象
  const formSubmitter = new FormSubmitter();

  // 创建命令
  const formSubmitCommand: Command = createFormSubmitCommand(formSubmitter);

  // 获取表单数据
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const formData = {
      /* ... */
    }; // 假设这里是从表单中获取的数据

    // 执行命令
    formSubmitCommand(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单输入字段 */}
      <button type="submit">提交</button>
    </form>
  );
};

组合多个命令

命令模式允许我们将多个命令组合成一个宏命令。我们可以创建多个命令对象，然后将它们组合起来，形成一个宏命令来执行。

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

// 具体命令类
class OpenFileCommand implements Command {
  execute(): void {
    console.log('打开文件');
  }
}

class SaveFileCommand implements Command {
  execute(): void {
    console.log('保存文件');
  }
}

class CloseFileCommand implements Command {
  execute(): void {
    console.log('关闭文件');
  }
}

// 宏命令类
class MacroCommand implements Command {
  private commands: Command[] = [];

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

  execute(): void {
    this.commands.forEach((command) => command.execute());
  }
}

// 使用示例
const macroCommand = new MacroCommand();
macroCommand.add(new OpenFileCommand());
macroCommand.add(new SaveFileCommand());
macroCommand.add(new CloseFileCommand());

// 执行宏命令
macroCommand.execute();

TIP

上面这段代码实际上还用到了组合模式，在组合模式中，组合对象和单个对象都遵循相同的接口，这是组合模式的关键特征。在上述代码中，MacroCommand 和具体的命令类（如 OpenFileCommand）都实现了相同的 Command 接口。这样，无论是单个命令还是宏命令，都可以通过调用 execute 方法来执行。

组合模式的好处在于，它允许我们构建复杂的命令结构，同时保持代码的简洁和可维护性。我们可以创建包含其他宏命令的宏命令，或者将单个命令和宏命令混合在一起，从而实现非常灵活的命令组合。