命令模式实现 undo 和 redo

在设计一个实现 撤销 和 重做（undo 和 redo）功能的应用程序或系统时，通常采用的一种设计模式是命令模式（Command Pattern）。

在 JavaScript 中，可以通过以下方式实现这种设计模式：

class Command {
  constructor(executor) {
    this.executor = executor;
  }


  execute() {
    this.executor();
  }
}


class AddCommand extends Command {
  constructor(undoCommand, value) {
    super(() => {
      console.log(`Add: ${value}`);
      undoCommand.savedValue = value;
    });
    this.undoCommand = undoCommand;
  }


  undo() {
    console.log(`Undo Add: ${this.undoCommand.savedValue}`);
    this.undoCommand.savedValue = null;
  }
}


class DeleteCommand extends Command {
  constructor(undoCommand, value) {
    super(() => {
      console.log(`Delete: ${value}`);
      undoCommand.savedValue = value;
    });
    this.undoCommand = undoCommand;
  }


  undo() {
    console.log(`Redo Delete: ${this.undoCommand.savedValue}`);
    this.undoCommand.savedValue = null;
  }
}


class History {
  constructor() {
    this.commands = [];
    this.savedValue = null;
  }


  addCommand(command) {
    this.commands.push(command);
  }


  undo() {
    if (this.commands.length > 0) {
      const lastCommand = this.commands[this.commands.length - 1];
      lastCommand.undo();
      this.commands.pop();
    } else {
      console.log("No commands to undo");
    }
  }


  redo() {
    if (this.commands.length > 0) {
      const lastCommand = this.commands[this.commands.length - 1];
      lastCommand.execute(); // Here we execute the last command again, effectively redoing it
      this.commands.pop(); // Pushing the executed command to the history stack again for future redos
    } else {
      console.log("No commands to redo");
    }
  }
  execute() {
    // Here we execute all the commands that are in the commands array
    for(let command of this.commands) {
      command.execute();
    }
  }
}

这样我们就可以创建一个 History 对象并添加 AddCommand 或 DeleteCommand 对象来执行撤销和重做操作了：

const history = new History();
const addCommand1 = new AddCommand(history, "Value 1");
const addCommand2 = new AddCommand(history, "Value 2");
const deleteCommand = new DeleteCommand(history, "Value 2");
history.addCommand(addCommand1);
history.addCommand(addCommand2);
history.addCommand(deleteCommand);
history.execute();
history.undo();
history.redo();

首先，这段代码主要实现了撤销和重做功能，采用的是命令模式（Command Pattern）。这是一种软件设计模式，它封装了一个或多个操作的对象，直到这些操作被调用。

Command 类：这是一个抽象类，定义了一个 execute() 方法，这个方法是在发出命令时要执行的逻辑。同时，这个类还定义了一个 undo() 方法，这个方法是在撤销命令时执行的逻辑。

AddCommand 和 DeleteCommand 类：这两个类是继承了 Command 类的具体子类，分别实现了添加和删除操作的命令。在构造函数中，它们都接受一个 undoCommand 和一个值，当执行命令时，它们会将这个值保存在 undoCommand 的 savedValue 中。

History 类：这个类负责保存所有的命令，并且提供了撤销和重做的功能。在执行命令时，它会在命令列表的末尾添加新的命令。在撤销命令时，它会调用最后一个命令的 undo() 方法，并且从命令列表中移除这个命令。在重做命令时，它会再次执行最后一个命令，并且将这个命令重新添加到命令列表的末尾。

所以，当创建一个 History 对象并添加 AddCommand 或 DeleteCommand 对象，然后依次执行这些命令时，可以通过 undo() 和 redo() 方法来回退和重做这些命令。