撤销操作不能简单用 history.back()，因其仅支持页面级回退，无法处理表单、画布、编辑器等应用内多级撤销；必须通过命令模式维护 undo/redo 双栈实现可逆操作。
撤销操作为什么不能简单用 history.back()
浏览器原生的 history.back() 只能退到上一页，无法支持表单内多次输入、画布多次绘制、编辑器多步修改这类“应用内多级撤销”。真正的多级撤销必须自己维护操作栈，而不是依赖路由历史。
常见错误是试图监听 window.onpopstate 或滥用 location.hash 模拟，结果导致状态不同步、无法重做、或与浏览器前进/后退键冲突。
- 真正需要的是一个可伸缩的命令模式（Command Pattern）：每步操作封装为对象，含
execute()、undo()方法 - 用两个栈分别存
undoStack和redoStack，点击撤销时把当前操作移入redoStack，再执行上一步的undo() - 每次执行新操作前，清空
redoStack——否则用户在撤销后又输入新内容，重做就该失效
用 JavaScript 实现可复用的撤销管理器
不依赖框架，纯 JS 就能搞定。核心是抽象出 UndoManager 类，它不关心具体业务逻辑，只管栈管理和生命周期。
示例场景：一个支持加粗/斜体/删除的简易富文本编辑器
class UndoManager {
constructor(limit = 50) {
this.undoStack = [];
this.redoStack = [];
this.limit = limit;
}
push(command) {
this.undoStack.push(command);
this.redoStack = []; // 新操作清空重做栈
if (this.undoStack.length > this.limit) {
this.undoStack.shift(); // 限制最大深度
}
}
undo() {
if (this.undoStack.length === 0) return;
const cmd = this.undoStack.pop();
cmd.undo();
this.redoStack.push(cmd);
}
redo() {
if (this.redoStack.length === 0) return;
const cmd = this.redoStack.pop();
cmd.execute();
this.undoStack.push(cmd);
}
canUndo() { return this.undoStack.length > 0; }
canRedo() { return this.redoStack.length > 0; }
}
注意：command 对象必须带 execute() 和 undo() 方法，且两者要互逆。比如加粗操作需记录原始 HTML 片段和光标位置，否则 undo() 会丢失格式。
HTML 按钮绑定与状态同步
按钮本身只是触发器，关键在于点击时调用 undoManager.undo()，并实时禁用/启用按钮——否则用户可能连点导致栈错乱。
不要写成：<button onclick="undoManager.undo()">撤销</button>，这样无法响应状态变化。
- 用
document.getElementById('undo-btn').disabled = !undoManager.canUndo()控制可用性 - 每次
push()后立即更新按钮状态，避免用户看到“可点”但实际无操作可撤 - 建议给按钮加
aria-label，例如aria-label="撤销上一步操作"，提升可访问性
HTML 结构只需最简按钮：
<button id="undo-btn" aria-label="撤销上一步操作">撤销</button> <button id="redo-btn" aria-label="重做上一步操作">重做</button>
容易被忽略的边界问题
多级撤销最常崩在“状态污染”：比如用户在输入框中连续打字，每敲一个键都 push 一次命令，会导致栈爆炸、内存泄漏、响应卡顿。
- 解决方案不是禁止高频操作，而是合并——例如用
debounce或“输入结束时才提交命令”，或者按字符间隔自动合并相邻的insertText命令 - DOM 直接操作（如
element.innerHTML = ...）很难精确undo()，优先用可逆的 API，比如document.execCommand()（已废弃但兼容性好）或现代ContentEditable+Range管理 - 如果操作涉及异步（如上传图片后插入），
undo()必须能取消请求或回滚临时 DOM，否则会出现“撤销了但图片还在页面上”的情况
真正难的从来不是怎么写按钮，而是怎么定义“一步操作”的粒度，以及确保每步都可逆、可序列化、不依赖外部副作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
