JS如何实现撤销重做-js教程-PHP中文网

JS如何实现撤销重做

月夜之吻

发布： 2025-08-16 08:21:01

原创

768人浏览过

js实现撤销重做核心是通过命令模式维护操作历史栈；1. 使用数组存储状态历史，每次操作后推入新状态；2. 将操作封装为包含execute和undo方法的命令对象；3. 撤销时弹出当前命令并执行undo，重做时从重做栈弹出并执行execute；4. 处理复杂对象状态需使用深拷贝（如json.parse(json.stringify(obj))或_.clonedeep）避免引用共享，或采用immutable.js创建不可变数据；5. 性能优化可限制历史栈长度、采用差量更新仅记录变化部分，并结合节流防抖减少状态记录频率；6. 异步操作可通过封装promise并在命令中保存resolve/reject来实现撤销重做，无法直接撤销的操作需设计补偿机制如退款或撤销请求；该方案完整支持同步与异步操作的撤销重做，且兼顾内存与性能。

JS如何实现撤销重做

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等库来创建不可变数据结构，每次修改都返回新的对象，避免直接修改原始对象，从而简化状态管理。

造物云营销设计

造物云是一个在线3D营销设计平台，0基础也能做电商设计

查看详情

性能优化：避免存储过多的状态历史

状态历史无限增长会导致内存占用过高。可以设置状态历史的最大长度，超过限制后删除最旧的状态。另一种优化方法是差量更新，只存储状态之间的差异，而不是完整状态。这种方法需要仔细设计操作的结构，确保可以根据差异恢复到之前的状态。例如，文本编辑器可以只存储插入、删除的字符和位置，而不是每次都存储整个文本。此外，可以考虑使用节流或防抖技术，避免频繁地记录状态，例如只在用户停止输入一段时间后才记录状态。