翼度科技»论坛 编程开发 JavaScript 查看内容

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

7

主题

7

帖子

21

积分

新手上路

Rank: 1

积分
21
命令模式(Command Pattern):它允许你将操作封装成对象。这些对象包括了被调用的方法及其参数。这些命令对象可以被存储、传递和执行。
在前端开发中,命令模式可以被用于实现可撤销和重做的操作。例如,在一个文本编辑器中,可以使用命令模式来实现撤销和重做操作。对于每一个编辑操作,可以创建一个命令对象来表示这个操作,然后将这个命令对象存储在一个历史列表中。当需要撤销操作时,可以从历史列表中取出最近的命令对象并执行它的反向操作。
命令模式还可以被用于实现菜单和工具栏等用户界面元素。例如,可以创建一个菜单项对象来表示一个命令,并将这个对象添加到菜单中。当用户点击这个菜单项时,菜单项对象将执行对应的操作。
下面是一个简单的实现可撤销操作的例子:
  1. // 定义一个命令对象
  2. class Command {
  3.   constructor(receiver, args) {
  4.     this.receiver = receiver;
  5.     this.args = args;
  6.     this.executed = false;
  7.   }
  8.   
  9.   execute() {
  10.     if (!this.executed) {
  11.       this.receiver.execute(this.args);
  12.       this.executed = true;
  13.     }
  14.   }
  15.   
  16.   undo() {
  17.     if (this.executed) {
  18.       this.receiver.undo(this.args);
  19.       this.executed = false;
  20.     }
  21.   }
  22. }
  23. // 定义一个接收者对象
  24. class Receiver {
  25.   constructor() {
  26.     this.value = 0;
  27.   }
  28.   
  29.   execute(args) {
  30.     this.value += args;
  31.     console.log(`执行操作,value = ${this.value}`);
  32.   }
  33.   
  34.   undo(args) {
  35.     this.value -= args;
  36.     console.log(`撤销操作,value = ${this.value}`);
  37.   }
  38. }
  39. // 创建一个接收者对象和一些命令对象
  40. const receiver = new Receiver();
  41. const command1 = new Command(receiver, 1);
  42. const command2 = new Command(receiver, 2);
  43. const command3 = new Command(receiver, 3);
  44. // 创建一个历史列表并将命令对象添加到其中
  45. const history = [command1, command2, command3];
  46. // 依次执行命令对象
  47. history.forEach((command) => {
  48.   command.execute();
  49. });
  50. // 撤销最后一个操作
  51. history.pop().undo(); // 撤销操作,value = 3
复制代码
在这个例子中,`Command` 类表示一个命令对象,它包含了一个接收者对象、命令参数以及一个 `executed` 属性,用于标记命令是否已经被执行过。`Receiver` 类表示接收者对象,它实现了具体的操作。在这个例子中,命令对象执行的操作是将 `args` 参数加到 `Receiver` 对象的 `value` 属性上。命令对象的 `execute` 和 `undo` 方法分别执行和撤销这个操作,并通过 `executed` 属性来避免重复执行操作。
在实际的前端开发中,命令模式的应用还有很多,比如实现动画效果的控制器、网络请求的队列等。命令模式可以让代码更加灵活和可扩展,同时也可以更好地实现代码的解耦。

来源:https://www.cnblogs.com/ronaldo9ph/p/17217442.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

举报 回复 使用道具