当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript撤销重做功能实现教程

JavaScript撤销重做功能实现教程

2025-11-21 18:37:28 0浏览收藏

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

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

如何实现一个支持撤销和重做（Undo/Redo）的JavaScript应用？

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

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

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

核心数据结构：

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

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

以下是一个简单的 UndoManager 示例：

<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>