前端开发设计模式 - 命令模式

目录

一、命令模式的定义和特点

1.定义：                

2. 特点：

二、命令模式的结构与原理

1.结构：

2.原理：

三、命令模式的实现方式

1.定义接口命令：

2.创建具体的命令类：

3.定义接收者：

4.创建调用者：

四、命令模式的使用场景

1.界面按钮的点击操作：

        1.1  定义命令接口和接收者

        1.2 创建具体命令类：

        1.3 创建调用者：

        1.4 使用示例：

2.表单提交：

3.可撤销的操作：

五、命令模式的优点

六、命令模式的缺点

七、命令模式的注意事项

1.合理设计命令对象：

2.考虑命令的撤销和重做：

3.注意命令的性能：

---

一、命令模式的定义和特点

1.定义：                

        在前端开发中，命令模式是一种行为设计模式，它将请求封装成一个对象，从而使你可以用不同的请求对客户进行参数化，对请求排队或记录请求日志，以及支持可撤销的操作。

2. 特点：

        解耦请求的发送者和接收者。发送者无需了解接收者的具体实现，只需要知道如何发送一个命令对象。

                易于实现可撤销的操作。可以通过保存命令对象的历史记录，实现撤销和重做功能。

                支持命令的排队和执行。可以将多个命令对象放入队列中，依次执行。

二、命令模式的结构与原理

1.结构：

        命令接口：定义了执行命令的方法。

        具体命令类：实现命令接口，封装了具体的请求操作。

        调用者：负责接收请求并执行相应的命令。

        接收者：执行具体的操作。

2.原理：

        调用者接收命令对象，并调用命令对象的执行方法。命令对象持有接收者的引用，并在执行方法中调用接收者的具体操作。

三、命令模式的实现方式

1.定义接口命令：

interface Command {
  execute(): void;
}

2.创建具体的命令类：

class ConcreteCommand implements Command {
  private receiver: Receiver;

  constructor(receiver: Receiver) {
    this.receiver = receiver;
  }

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

3.定义接收者：

class Receiver {
  action() {
    console.log('Receiver is performing an action.');
  }
}

4.创建调用者：

class Invoker {
  private command: Command;

  setCommand(command: Command) {
    this.command = command;
  }

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

四、命令模式的使用场景

1.界面按钮的点击操作：

        可以将按钮的点击事件封装成命令对象，当按钮被点击时，调用者执行相应的命令对象，从而实现具体的操作。

        示例：网页按钮的点击操作

        1.1  定义命令接口和接收者

                （1）命令接口：

interface Command {
  execute(): void;
}

                 这个接口定义了一个execute方法，用于执行命令。

                （2）接收者（处理具体操作的对象）：

class ButtonHandler {
  clickAction() {
    console.log('Button was clicked!');
  }
}

                 这个接收者类有一个方法clickAction，用于处理按钮点击后的具体操作。

        1.2 创建具体命令类：

class ButtonClickCommand implements Command {
  private handler: ButtonHandler;

  constructor(handler: ButtonHandler) {
    this.handler = handler;
  }

  execute() {
    this.handler.clickAction();
  }
}

                这个命令类在execute方法中调用接收者的clickAction方法 。

        1.3 创建调用者：

class Invoker {
  private command: Command;

  setCommand(command: Command) {
    this.command = command;
  }

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

                调用者有设置命令和触发命令执行的方法。 

        1.4 使用示例：

const handler = new ButtonHandler();
const command = new ButtonClickCommand(handler);
const invoker = new Invoker();

invoker.setCommand(command);
invoker.triggerCommand();

        在这个示例中，当点击按钮时（这里模拟通过调用者触发），调用者Invoker执行命令对象ButtonClickCommand，命令对象再调用接收者ButtonHandler的方法来完成具体的操作。这样就实现了命令模式，将按钮点击操作与具体的处理逻辑解耦 

2.表单提交：

        将表单提交的操作封装成命令对象，在提交表单时，调用者执行命令对象，进行数据验证、提交等操作。

3.可撤销的操作：

        通过保存命令对象的历史记录，可以实现撤销和重做功能。

五、命令模式的优点

        1.解耦了请求的发送者和接收者，使得代码更加灵活和可维护。

        2.易于实现可撤销的操作，提高了用户体验。

        3.支持命令的排队和执行，方便进行复杂的操作控制。

六、命令模式的缺点

        1.可能会增加系统的复杂性，特别是当命令对象的数量较多时。

        2.需要额外的代码来实现命令模式，增加了开发成本。

七、命令模式的注意事项

1.合理设计命令对象：

        命令对象应该尽可能地独立和可复用，避免与特定的调用者或接收者紧密耦合。

2.考虑命令的撤销和重做：

        如果需要实现可撤销的操作，需要在命令对象中保存足够的信息，以便能够撤销和重做操作。

3.注意命令的性能：

        如果命令对象的执行时间较长，可能会影响系统的性能。可以考虑使用异步执行或者优化命令的实现

关于设计模式中的命令模式就介绍到这了，如果对于其他模式感兴趣的话，可以点击右下角的“专栏目录”查看更多设计模式。码字不易，点个赞再走吧