js实现撤销重做核心是通过命令模式维护操作历史栈；1. 使用数组存储状态历史，每次操作后推入新状态；2. 将操作封装为包含execute和undo方法的命令对象；3. 撤销时弹出当前命令并执行undo，重做时从重做栈弹出并执行execute；4. 处理复杂对象状态需使用深拷贝（如json.parse(json.stringify(obj))或_.clonedeep）避免引用共享，或采用immutable.js创建不可变数据；5. 性能优化可限制历史栈长度、采用差量更新仅记录变化部分，并结合节流防抖减少状态记录频率；6. 异步操作可通过封装promise并在命令中保存resolve/reject来实现撤销重做，无法直接撤销的操作需设计补偿机制如退款或撤销请求；该方案完整支持同步与异步操作的撤销重做，且兼顾内存与性能。
JS实现撤销重做，核心在于维护一个操作历史栈。每次操作都记录下来，撤销时回退到上一个状态，重做则前进到下一个状态。这听起来简单，但魔鬼藏在细节里，尤其是状态的管理和操作的抽象。
解决方案
- 状态管理： 使用一个数组来存储状态历史。每次修改后，将新的状态推入数组。
- 操作抽象： 将每个操作封装成一个对象，包含
execute
（执行）和
undo
（撤销）方法。
- 撤销和重做： 撤销时，从状态历史中弹出当前状态，并应用前一个状态。重做时，从重做栈中弹出操作，并执行它。
- 命令模式： 可以考虑使用命令模式来更好地组织操作。
class Command { constructor(execute, undo) { this.execute = execute; this.undo = undo; } } class Editor { constructor() { this.text = ""; this.history = []; this.redoStack = []; } executeCommand(command) { command.execute(); this.history.push(command); this.redoStack = []; // 清空重做栈 } undo() { if (this.history.length === 0) return; const command = this.history.pop(); command.undo(); this.redoStack.push(command); } redo() { if (this.redoStack.length === 0) return; const command = this.redoStack.pop(); command.execute(); this.history.push(command); } } // 示例 const editor = new Editor(); const insertCommand = new Command( () => { const text = prompt("Enter text to insert:"); if (text) { const insertIndex = editor.text.length; editor.text += text; console.log("Inserted:", text, "New text:", editor.text); insertCommand.undo = () => { editor.text = editor.text.slice(0, insertIndex); console.log("Undo Insert:", text, "New text:", editor.text); }; } else { insertCommand.execute = () => {}; // 防止空输入导致问题 insertCommand.undo = () => {}; } }, () => {} // 初始undo为空，execute中定义 ); const deleteCommand = new Command( () => { const deleteCount = parseInt(prompt("Enter number of characters to delete:")); if (!isNaN(deleteCount) && deleteCount > 0 && deleteCount <= editor.text.length) { const deletedText = editor.text.slice(editor.text.length - deleteCount); editor.text = editor.text.slice(0, editor.text.length - deleteCount); console.log("Deleted:", deletedText, "New text:", editor.text); deleteCommand.undo = () => { editor.text += deletedText; console.log("Undo Delete:", deletedText, "New text:", editor.text); }; } else { deleteCommand.execute = () => {}; // 防止无效输入导致问题 deleteCommand.undo = () => {}; } }, () => {} // 初始undo为空，execute中定义 ); // 使用示例 editor.executeCommand(insertCommand); editor.executeCommand(deleteCommand); editor.undo(); editor.redo();
如何处理复杂的对象状态？
处理复杂对象状态的关键在于深拷贝。 浅拷贝只会复制对象的引用，导致撤销重做时修改的是同一个对象，无法正确回退。可以使用
JSON.parse(JSON.stringify(obj))
进行简单的深拷贝，或者使用Lodash等库提供的
_.cloneDeep()
方法。 对于包含循环引用的对象，需要自定义深拷贝算法来避免栈溢出。 另外，考虑使用Immutable.js等库来创建不可变数据结构，每次修改都返回新的对象，避免直接修改原始对象，从而简化状态管理。
性能优化：避免存储过多的状态历史
状态历史无限增长会导致内存占用过高。 可以设置状态历史的最大长度，超过限制后删除最旧的状态。 另一种优化方法是差量更新，只存储状态之间的差异，而不是完整状态。 这种方法需要仔细设计操作的结构，确保可以根据差异恢复到之前的状态。 例如，文本编辑器可以只存储插入、删除的字符和位置，而不是每次都存储整个文本。 此外，可以考虑使用节流或防抖技术，避免频繁地记录状态，例如只在用户停止输入一段时间后才记录状态。
如何处理异步操作的撤销重做？
异步操作的撤销重做更加复杂，因为无法立即撤销或重做。 一种方法是将异步操作封装成Promise，并在操作对象中存储Promise的
resolve
和
reject
方法。 撤销时，可以
reject
当前的Promise，并重新执行之前的操作。 重做时，重新
resolve
之前的Promise。 另一种方法是使用Redux Saga或RxJS等库来管理异步操作，它们提供了更强大的撤销重做机制。 需要注意的是，某些异步操作可能无法完全撤销，例如发送电子邮件或支付交易。 在这种情况下，需要设计相应的补偿机制，例如发送撤销邮件或退款。
评论（已关闭）
评论已关闭