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

命令模式是一种行为型设计模式，它把请求封装成独立的对象，让你可以根据不同的请求将方法参数化、延迟请求执行或者把请求放入队列中。在实现撤销重做功能时，命令模式是非常合适的选择，因为它天然支持对操作的封装和反向操作的定义。

命令模式的核心结构

要实现撤销重做，首先需要定义命令的基本结构，每个命令需要包含执行操作和撤销操作两个核心方法，同时可以根据需要添加重做方法（也可以直接复用执行方法）。

• 执行方法：执行当前命令对应的具体操作，同时记录操作前的状态，方便后续撤销。
• 撤销方法：回滚执行方法造成的状态变更，恢复到操作前的状态。
• 命令管理器：负责维护已执行命令的栈和已撤销命令的栈，控制撤销和重做的流程。

基础命令类的实现

我们先定义一个基础的命令基类，后续的每个具体操作命令都继承这个基类，实现自己的执行和撤销逻辑。

// 命令基类
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 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();

实际开发注意事项

在实际项目中使用命令模式实现撤销重做时，需要注意以下几点：

• 命令对象需要完整记录操作前后的状态，复杂的操作可能需要记录更多上下文信息，避免撤销时出现状态不一致的问题。
• 如果操作涉及大量数据，比如大文件编辑，直接保存完整状态会占用过多内存，可以考虑只保存状态差异，或者使用快照的方式定期保存完整状态。
• 命令管理器可以根据需求扩展，比如添加清空历史、限制历史栈长度等功能，避免栈无限增长占用过多内存。
• 对于没有反向操作的操作，比如删除操作，需要在命令中实现对应的撤销逻辑，比如删除时保存被删除的内容，撤销时再重新插入。

其他常见命令示例

除了添加文本，删除文本也是编辑器常见操作，下面是删除文本命令的实现示例：

// 文本删除命令
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);
  }
}

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