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

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

实现一个支持撤销和重做的 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 逻辑。例如，模拟一个文本编辑器的修改操作：

立即学习“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); // 输出：第二次修改

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

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

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