JavaScript撤销重做功能实现教程

想要为你的 JavaScript 应用添加强大的撤销重做功能吗？本文将深入探讨如何利用**命令模式**结合**双栈**数据结构，轻松实现这一目标。通过将每个用户操作封装成可执行和可撤销的命令对象，并使用 `undoStack` 和 `redoStack` 精确管理操作历史，我们能够实现灵活的操作回退和重现。本文将提供详细的代码示例，包括通用的命令管理器和具体的命令实现，例如模拟文本编辑器的修改操作。同时，我们还将分享实际应用中的优化建议，例如限制历史长度、合并连续操作以及使用不可变数据，助你打造更稳定、更高效的撤销重做功能。掌握这些技巧，让你的 JavaScript 应用更上一层楼！

答案是使用命令模式结合双栈实现撤销重做。通过封装操作为带execute和undo方法的命令对象，利用undoStack和redoStack管理操作历史，执行时入undo栈，撤销时转移到redo栈，重做则反向执行，并在执行新操作后清空redo栈以保证操作顺序正确。

实现一个支持撤销和重做的 JavaScript 应用，关键在于记录用户操作的历史状态，并能按顺序回退或重新应用。最常见的方式是使用“命令模式”结合两个栈结构：一个用于存储已执行的操作（undo 栈），另一个用于存储被撤销的操作（redo 栈）。

1. 基本思路：命令模式 + 双栈

每个用户操作被封装成一个“命令”对象，该对象包含 执行（execute） 和 撤销（undo） 两个方法。每次执行操作时，将其推入 undo 栈；撤销时从 undo 栈弹出，执行其 undo 方法，并推入 redo 栈；重做时则相反。

核心数据结构：

• undoStack：存放可撤销的操作
• redoStack：存放可重做的操作（被撤销的操作）

2. 实现一个通用的命令管理器

<code>class CommandManager {
  constructor() {
    this.undoStack = [];
    this.redoStack = [];
  }

  // 执行新命令
  execute(command) {
    command.execute();
    this.undoStack.push(command);
    this.redoStack = []; // 执行新操作后，清除 redo 栈
  }

  // 撤销上一步
  undo() {
    if (this.undoStack.length === 0) return;
    const command = this.undoStack.pop();
    command.undo();
    this.redoStack.push(command);
  }

  // 重做
  redo() {
    if (this.redoStack.length === 0) return;
    const command = this.redoStack.pop();
    command.execute();
    this.undoStack.push(command);
  }

  // 清空历史（例如页面重置）
  clear() {
    this.undoStack = [];
    this.redoStack = [];
  }
}
</code>

3. 定义具体命令

每个操作实现自己的 execute 和 undo 逻辑。例如，模拟一个文本编辑器的修改操作：

<code>class SetValueCommand {
  constructor(model, newValue) {
    this.model = model;
    this.newValue = newValue;
    this.oldValue = model.value; // 记录旧值用于撤销
  }

  execute() {
    this.model.value = this.newValue;
  }

  undo() {
    this.model.value = this.oldValue;
  }
}

// 使用示例
const model = { value: '初始内容' };
const cmdManager = new CommandManager();

cmdManager.execute(new SetValueCommand(model, '第一次修改'));
cmdManager.execute(new SetValueCommand(model, '第二次修改'));

console.log(model.value); // 输出：第二次修改

cmdManager.undo();
console.log(model.value); // 输出：第一次修改

cmdManager.redo();
console.log(model.value); // 输出：第二次修改
</code>

4. 实际应用中的优化建议

• 限制历史长度：避免内存溢出，可设置最大步数，超出时移除最早的操作
• 合并连续操作：如用户连续输入文字，可合并为一个命令，提升体验
• 不可变数据：在复杂状态管理中，使用不可变更新（如 immer 或 Redux 风格）更安全
• UI 同步：监听 undo/redo 状态变化，动态启用/禁用按钮

基本上就这些。只要把操作抽象成带撤销能力的命令，并用两个栈管理流向，就能稳定实现 Undo/Redo 功能。不复杂但容易忽略细节，比如清空 redo 栈和保存前后状态。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。