答案是使用命令模式结合双栈实现撤销重做。通过封装操作为带execute和undo方法的命令对象，利用undoStack和redoStack管理操作历史，执行时入undo栈，撤销时转移到redo栈，重做则反向执行，并在执行新操作后清空redo栈以保证操作顺序正确。
实现一个支持撤销和重做的 JavaScript 应用，关键在于记录用户操作的历史状态，并能按顺序回退或重新应用。最常见的方式是使用“命令模式”结合两个栈结构：一个用于存储已执行的操作（undo 栈），另一个用于存储被撤销的操作（redo 栈）。
1. 基本思路：命令模式 + 双栈
每个用户操作被封装成一个“命令”对象，该对象包含 执行（execute） 和 撤销（undo） 两个方法。每次执行操作时，将其推入 undo 栈；撤销时从 undo 栈弹出，执行其 undo 方法，并推入 redo 栈；重做时则相反。
核心数据结构：
undoStack：存放可撤销的操作 redoStack：存放可重做的操作（被撤销的操作）
2. 实现一个通用的命令管理器
以下是一个简单的 UndoManager 示例：
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 逻辑。例如，模拟一个文本编辑器的修改操作：
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 栈和保存前后状态。
以上就是如何实现一个支持撤销和重做（Undo/Redo）的JavaScript应用？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530383.html
微信扫一扫 
支付宝扫一扫 
