最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

前端设计模式——命令模式

来源：博客园


【资料图】

命令模式（Command Pattern）：它允许你将操作封装成对象。这些对象包括了被调用的方法及其参数。这些命令对象可以被存储、传递和执行。

在前端开发中，命令模式可以被用于实现可撤销和重做的操作。例如，在一个文本编辑器中，可以使用命令模式来实现撤销和重做操作。对于每一个编辑操作，可以创建一个命令对象来表示这个操作，然后将这个命令对象存储在一个历史列表中。当需要撤销操作时，可以从历史列表中取出最近的命令对象并执行它的反向操作。

命令模式还可以被用于实现菜单和工具栏等用户界面元素。例如，可以创建一个菜单项对象来表示一个命令，并将这个对象添加到菜单中。当用户点击这个菜单项时，菜单项对象将执行对应的操作。

下面是一个简单的实现可撤销操作的例子：

// 定义一个命令对象class Command {  constructor(receiver, args) {    this.receiver = receiver;    this.args = args;    this.executed = false;  }    execute() {    if (!this.executed) {      this.receiver.execute(this.args);      this.executed = true;    }  }    undo() {    if (this.executed) {      this.receiver.undo(this.args);      this.executed = false;    }  }}// 定义一个接收者对象class Receiver {  constructor() {    this.value = 0;  }    execute(args) {    this.value += args;    console.log(`执行操作，value = ${this.value}`);  }    undo(args) {    this.value -= args;    console.log(`撤销操作，value = ${this.value}`);  }}// 创建一个接收者对象和一些命令对象const receiver = new Receiver();const command1 = new Command(receiver, 1);const command2 = new Command(receiver, 2);const command3 = new Command(receiver, 3);// 创建一个历史列表并将命令对象添加到其中const history = [command1, command2, command3];// 依次执行命令对象history.forEach((command) => {  command.execute();});// 撤销最后一个操作history.pop().undo(); // 撤销操作，value = 3

在这个例子中，`Command` 类表示一个命令对象，它包含了一个接收者对象、命令参数以及一个 `executed` 属性，用于标记命令是否已经被执行过。`Receiver` 类表示接收者对象，它实现了具体的操作。在这个例子中，命令对象执行的操作是将 `args` 参数加到 `Receiver` 对象的 `value` 属性上。命令对象的 `execute` 和 `undo` 方法分别执行和撤销这个操作，并通过 `executed` 属性来避免重复执行操作。

在实际的前端开发中，命令模式的应用还有很多，比如实现动画效果的控制器、网络请求的队列等。命令模式可以让代码更加灵活和可扩展，同时也可以更好地实现代码的解耦。

关键词：