前端設計模式——命令模式-有解無憂

命令模式（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 = https://www.cnblogs.com/ronaldo9ph/archive/2023/03/15/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 = https://www.cnblogs.com/ronaldo9ph/archive/2023/03/15/3

在這個例子中，`Command` 類表示一個命令物件，它包含了一個接收者物件、命令引數以及一個 `executed` 屬性，用于標記命令是否已經被執行過，`Receiver` 類表示接收者物件，它實作了具體的操作，在這個例子中，命令物件執行的操作是將 `args` 引數加到 `Receiver` 物件的 `value` 屬性上，命令物件的 `execute` 和 `undo` 方法分別執行和撤銷這個操作，并通過 `executed` 屬性來避免重復執行操作，

在實際的前端開發中，命令模式的應用還有很多，比如實作影片效果的控制器、網路請求的佇列等，命令模式可以讓代碼更加靈活和可擴展，同時也可以更好地實作代碼的解耦，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/546931.html

標籤：其他

上一篇：淺談var,let,const

下一篇：淺談var,let,const