如何实现一个支持撤销和重做（Undo/Redo）的JavaScript应用？-js教程-PHP中文网

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

夜晨

发布： 2025-10-17 21:58:02

原创

170人浏览过

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

如何实现一个支持撤销和重做（undo/redo）的javascript应用？

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

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

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

核心数据结构：

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

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

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

<pre class="brush:php;toolbar:false;">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 = [];
  }
}

登录后复制

3. 定义具体命令

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

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

立即学习“Java免费学习笔记（深入）”；

<pre class="brush:php;toolbar:false;">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); // 输出：第二次修改

登录后复制