JavaScript命令模式如何实现撤销重做功能

命令模式是一种经典的行为型设计模式，其核心思想是将请求或操作封装成独立的对象。这种封装方式使得我们可以对请求进行参数化、延迟执行，或者将其放入队列中进行管理。在构建具备撤销和重做功能的应用程序时，命令模式展现出了得天独厚的优势。由于每个操作都被独立封装，系统可以轻松地记录操作的历史轨迹，并定义与之对应的反向操作，从而实现状态的精准回滚与恢复。

命令模式的核心思想与结构解析

要实现一个健壮的撤销重做系统，首先需要深入理解命令模式的核心结构。一个标准的命令模式实现通常包含三个关键部分：命令接口、具体命令类以及命令调用者。命令接口定义了执行和撤销的抽象方法；具体命令类则负责实现这些方法，并在执行时保存必要的上下文状态；命令调用者（通常表现为命令管理器）则负责维护命令的执行历史，并触发相应的撤销或重做指令。

在状态管理方面，命令管理器内部通常会维护两个核心的数据结构：执行栈和撤销栈。执行栈用于按顺序存储已经成功执行的命令对象，而撤销栈则用于存储已经被撤销的命令对象。当用户触发撤销操作时，系统从执行栈中弹出栈顶命令并调用其undo方法，随后将该命令压入撤销栈。反之，当触发重做操作时，系统从撤销栈中弹出命令并重新执行，再将其压回执行栈。这种双栈机制确保了操作历史的严格顺序和状态的一致性。

基础命令类与具体命令的编码实现

在代码层面，我们首先需要定义一个基础的命令抽象类，以此规范所有具体命令的行为。这个基类强制要求子类必须实现执行和撤销方法，从而保证了命令接口的一致性。通过抛出异常的方式，可以确保任何继承该基类的具体命令都不会遗漏核心的状态控制逻辑。

// 命令基类
class Command {
  execute() {
    throw new Error('子类必须实现execute方法');
  }
  undo() {
    throw new Error('子类必须实现undo方法');
  }
}

接下来，我们以文本编辑器中的文本添加操作为例，来具体演示如何编写一个具体的命令类。在这个示例中，添加文本命令不仅需要知道要插入的内容和位置，还必须在执行前保存当前的文本状态。这是撤销操作能够成功的关键，因为只有通过恢复之前的状态，才能真正实现撤销的语义。

// 文本添加命令
class AddTextCommand extends Command {
  constructor(editor, text, position) {
    super();
    this.editor = editor;
    this.text = text;
    this.position = position;
    this.prevText = '';
  }

  execute() {
    this.prevText = this.editor.content;
    const before = this.editor.content.slice(0, this.position);
    const after = this.editor.content.slice(this.position);
    this.editor.content = before + this.text + after;
    console.log('执行添加文本，当前内容：', this.editor.content);
  }

  undo() {
    this.editor.content = this.prevText;
    console.log('撤销添加文本，当前内容：', this.editor.content);
  }
}

除了添加操作，删除操作也是文本编辑器中不可或缺的功能。删除命令的实现逻辑与添加命令类似，但它的重点在于记录被删除的具体内容。在执行删除时，系统需要截取并保存即将被移除的文本片段，以便在撤销时能够将其原封不动地恢复到原来的位置。

// 文本删除命令
class DeleteTextCommand extends Command {
  constructor(editor, start, end) {
    super();
    this.editor = editor;
    this.start = start;
    this.end = end;
    this.deletedText = '';
    this.prevText = '';
  }

  execute() {
    this.prevText = this.editor.content;
    this.deletedText = this.editor.content.slice(this.start, this.end);
    this.editor.content = this.editor.content.slice(0, this.start) + this.editor.content.slice(this.end);
    console.log('执行删除文本，当前内容：', this.editor.content);
  }

  undo() {
    const before = this.editor.content.slice(0, this.start);
    const after = this.editor.content.slice(this.start);
    this.editor.content = before + this.deletedText + after;
    console.log('撤销删除文本，当前内容：', this.editor.content);
  }
}

命令管理器的调度逻辑与完整测试

命令管理器是整个撤销重做系统的大脑，它负责协调命令的执行、撤销和重做流程。在管理器的设计中，有一个非常关键的业务逻辑：当用户执行了一个新的命令后，之前被撤销的命令历史必须被清空。这是因为新的操作改变了当前的状态基线，旧的撤销历史已经失去了参考价值，如果不进行清空，会导致状态恢复时出现逻辑混乱。

class CommandManager {
  constructor() {
    this.executeStack = [];
    this.undoStack = [];
  }

  executeCommand(command) {
    command.execute();
    this.executeStack.push(command);
    // 执行新命令后，清空撤销栈
    this.undoStack = [];
  }

  undo() {
    if (this.executeStack.length === 0) {
      console.log('没有可撤销的操作');
      return;
    }
    const command = this.executeStack.pop();
    command.undo();
    this.undoStack.push(command);
  }

  redo() {
    if (this.undoStack.length === 0) {
      console.log('没有可重做的操作');
      return;
    }
    const command = this.undoStack.pop();
    command.execute();
    this.executeStack.push(command);
  }
}

为了验证上述设计的正确性，我们可以构建一个完整的测试场景。通过创建一个简单的编辑器实例和命令管理器实例，我们可以模拟用户的真实操作流程：连续执行多次文本添加，然后进行多次撤销，最后再进行重做。通过观察控制台输出的内容变化，可以清晰地验证双栈机制是否按照预期正常工作。

class Editor {
  constructor() {
    this.content = '';
  }
}

const editor = new Editor();
const commandManager = new CommandManager();

const addCommand1 = new AddTextCommand(editor, 'Hello', 0);
commandManager.executeCommand(addCommand1);

const addCommand2 = new AddTextCommand(editor, ' World', 5);
commandManager.executeCommand(addCommand2);

commandManager.undo();
commandManager.undo();

commandManager.redo();
commandManager.redo();

实际工程中的优化策略与注意事项

在真实的工程实践中，直接套用基础的命令模式可能会面临一些性能和内存方面的挑战。首先，如果操作涉及大量的数据，例如大型文档的编辑，每次执行都保存完整的状态快照会迅速耗尽内存。在这种情况下，开发者应当考虑采用增量记录的方式，只保存状态发生变化的差异部分，或者采用定期生成完整快照与增量差异相结合的混合策略，以此来平衡内存占用与恢复效率。

其次，命令管理器的历史栈不能无限增长。如果不加以限制，长时间运行的应用可能会因为积累了过多的历史命令而导致内存溢出。因此，在实际开发中，通常需要为执行栈和撤销栈设置一个最大长度阈值。当栈的长度超过该阈值时，应当自动移除最旧的命令记录，以维持内存占用的平稳。此外，对于某些没有明显反向操作的业务逻辑，可能需要在命令中引入补偿事务的概念，通过定义能够抵消原操作影响的新操作，来保证系统状态最终的一致性。

综上所述，命令模式通过将请求封装为对象，为撤销和重做功能提供了优雅且可扩展的解决方案。通过合理设计命令接口、维护双栈历史记录，并结合实际场景进行内存和边界优化，开发者可以构建出稳定可靠的状态管理系统。在面对复杂的用户交互和状态流转时，深入掌握并灵活运用命令模式，将极大提升代码的健壮性与可维护性。

JavaScript命令模式撤销重做设计模式修改时间：2026-06-19 05:39:38