如何用JavaScript实现撤销重做功能：深度解析与实战

一、撤销重做的核心逻辑

在任何需要编辑功能的场景中，撤销（Undo）和重做（Redo）都是提升用户体验的关键功能。实现这一功能的核心在于状态管理和操作记录。

1.1 命令模式的应用

javascript
class Command {
execute() {}
undo() {}
}

// 具体命令实现
class InsertTextCommand extends Command {
constructor(text, position, editor) {
super();
this.text = text;
this.position = position;
this.editor = editor;
}

execute() {
this.editor.insertText(this.text, this.position);
}

undo() {
this.editor.deleteText(this.position, this.text.length);
}
}

二、完整实现方案

2.1 历史记录管理器

javascript
class HistoryManager {
constructor() {
this.undoStack = [];
this.redoStack = [];
this.maxHistory = 100; // 防止内存泄漏
}

executeCommand(command) {
command.execute();
this.undoStack.push(command);
this.redoStack = []; // 新操作时清空重做栈

if (this.undoStack.length > this.maxHistory) {
  this.undoStack.shift();
}

}

undo() {
if (this.undoStack.length > 0) {
const command = this.undoStack.pop();
command.undo();
this.redoStack.push(command);
}
}

redo() {
if (this.redoStack.length > 0) {
const command = this.redoStack.pop();
command.execute();
this.undoStack.push(command);
}
}
}

三、性能优化实践

3.1 差分存储策略

对于大文本编辑器，可以采用差分算法只记录变更部分：
javascript function getTextDiff(prevText, newText) { // 实现差异比较算法（如Myers差分算法） return { startPos: 5, deletedLength: 3, insertedText: "新内容" }; }

3.2 操作合并

对连续输入进行合并处理：javascript
let lastCommand = null;
let mergeTimeout = null;

function handleTextInput(text) {
if (mergeTimeout) clearTimeout(mergeTimeout);

if (lastCommand instanceof InsertTextCommand &&
lastCommand.position + lastCommand.text.length === currentPos) {
// 合并连续输入
lastCommand.text += text;
} else {
// 创建新命令
lastCommand = new InsertTextCommand(text, currentPos, editor);
history.executeCommand(lastCommand);
}

mergeTimeout = setTimeout(() => {
lastCommand = null;
}, 500); // 500ms内连续输入视为一次操作
}

四、实际应用场景

4.1 富文本编辑器实现

以Quill.js为例的扩展实现：javascript
class QuillUndoManager {
constructor(quill) {
this.quill = quill;
this.history = new HistoryManager();

quill.on('text-change', (delta, oldDelta, source) => {
  if (source === 'user') {
    this.recordChange(delta);
  }
});

}

recordChange(delta) {
const command = new DeltaCommand(delta, this.quill);
this.history.executeCommand(command);
}
}

4.2 图形编辑器的特殊处理

对于Canvas/SVG操作，需要序列化对象状态：javascript
class ShapeMoveCommand extends Command {
constructor(shapeId, oldPos, newPos, canvas) {
super();
this.shapeId = shapeId;
this.oldPos = oldPos;
this.newPos = newPos;
this.canvas = canvas;
}

execute() {
this.canvas.moveShape(this.shapeId, this.newPos);
}

undo() {
this.canvas.moveShape(this.shapeId, this.oldPos);
}
}

五、高级进阶技巧

5.1 分支历史记录

javascript
class BranchingHistory {
constructor() {
this.currentBranch = [];
this.branches = new Map(); // 保存不同分支
}

createBranchAt(index) {
const branch = this.currentBranch.slice(0, index+1);
this.branches.set(Date.now(), branch);
}
}

5.2 协同编辑处理

对于多人协作场景，需要使用OT（操作转换）算法：
javascript function transform(commandA, commandB) { // 解决操作冲突的核心算法 return transformedCommands; }

六、总结思考

实现撤销重做功能时，开发者需要权衡几个关键因素：
1. 内存消耗：全量快照 vs 增量记录
2. 操作粒度：字符级 vs 单词级 vs 段落级
3. 性能表现：高频操作的优化处理
4. 特殊场景：跨会话持久化、协同编辑等

在React/Vue等现代框架中，可以结合Redux或Vuex实现更优雅的状态管理。对于复杂项目，建议使用成熟的库如immutable.js来保证状态不可变性，这将使撤销重做实现更加可靠。