可撤销操作可通过五种方案实现：一、命令模式用栈记录执行/撤销对象；二、状态快照+索引管理；三、Proxy代理拦截变更；四、Redux中间件增强；五、Immer实现不可变状态与时间旅行。
如果您在网页中执行了某个操作（例如表单提交、DOM 修改或状态变更），但希望回退到之前的状态，则需要通过 JavaScript 实现可撤销的操作机制。以下是几种可行的实现方案：
一、命令模式记录操作历史
该方案将每个可撤销操作封装为一个具有执行（execute）和撤销（undo）方法的对象，通过栈结构保存操作历史，便于按顺序回退。
1、定义命令基类，包含 execute 和 undo 两个空方法；
2、为每类操作创建具体命令类，例如 TextEditCommand 负责文本修改，其 execute 存储当前值并更新 DOM，undo 将 DOM 恢复为 previousValue；
立即学习“Java免费学习笔记（深入）”；
3、维护一个 commands 数组作为操作栈，每次执行命令后调用 push 方法入栈；
4、触发撤销时，从 commands 数组末尾取出最近命令，调用其 undo 方法，并使用 pop 移除该命令；
5、可选实现重做功能：另设一个 redoStack 数组，在 undo 时将命令 push 进 redoStack，重做时从 redoStack pop 并 execute。
二、状态快照 + 索引管理
该方案定期或在关键操作节点对应用状态进行深拷贝并存入数组，通过维护当前索引 position 来控制前进与回退。
1、初始化一个 states 数组和 position 变量，初始值为 0；
2、每次发生可撤销操作前，调用 JSON.parse(JSON.stringify(state)) 或 structuredClone（若支持）生成当前状态快照，并 push 入 states；
3、同时将 position 设为 states.length - 1，确保指向最新状态；
4、执行撤销时，判断 position > 0，若成立则 position--，再将 states[position] 赋值给当前 state 并同步更新视图；
5、执行重做时，判断 position
三、使用 Proxy 动态拦截状态变更
该方案利用 Proxy 对状态对象进行包装，自动捕获所有赋值操作，并在每次变更前保存上一状态，形成隐式快照链。
1、创建一个 history 数组和 current 属性，初始时将初始状态存入 history 并设 current = 0；
2、用 Proxy 包裹原始状态对象，set 拦截器中先将当前状态深拷贝后 push 入 history，再更新 target；
3、每次 set 触发后，current 自增 1；
4、定义 undo 函数：若 current > 0，则 current--，并将 history[current] 浅复制或深复制回目标状态对象；
5、注意避免 Proxy 嵌套导致的性能问题，建议仅对顶层状态对象代理，子属性变更仍需手动触发 notify。
四、基于 Redux 架构的可撤销中间件
该方案扩展 Redux store，通过增强 dispatch 行为，在每次 action 分发前保存当前 state，并提供专用的 UNDO/REDO action 类型。
1、编写 middleware，监听所有非 UNDO/REDO 的 action，在 reducer 执行前将当前 getState() 结果 push 到本地 undoStack；
2、清空 redoStack（因新操作使重做失效）；
3、定义 UNDO action 处理逻辑：若 undoStack.length > 1，pop 当前 state，将前一个 state 作为新 state 传入 replaceReducer 或 dispatch 替换；
4、定义 REDO action：若 redoStack 非空，pop 一个 state 并设为当前 state；
5、使用 combineReducers 时，确保撤销逻辑作用于根 state，而非单个 slice。
五、使用 Immer 实现不可变状态与时间旅行
该方案借助 Immer 的 produce 机制，在保持代码可读性的同时自动生成不可变状态快照，配合外部索引实现撤销导航。
1、引入 immer 库，声明一个 baseState 和一个 drafts 数组用于存放 produce 后的 draft 状态；
2、每次用户操作触发 produce 调用，将返回的新状态 push 入 drafts，并更新 currentIndex；
3、撤销函数中，若 currentIndex > 0，则 currentIndex--，然后将 drafts[currentIndex] 作为当前有效状态；
4、为避免内存膨胀，限制 drafts 最大长度（如最多保留 50 个快照），超出时 shift 删除最早项；
5、视图层通过监听 currentIndex 变化，使用 drafts[currentIndex] 渲染对应状态。
