JS如何实现撤销重做

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

JS实现撤销重做，核心在于维护一个操作历史栈。每次操作都记录下来，撤销时回退到上一个状态，重做则前进到下一个状态。这听起来简单，但魔鬼藏在细节里，尤其是状态的管理和操作的抽象。

解决方案

1. 状态管理： 使用一个数组来存储状态历史。每次修改后，将新的状态推入数组。
2. 操作抽象： 将每个操作封装成一个对象，包含

   execute

   （执行）和

   undo

   （撤销）方法。
3. 撤销和重做： 撤销时，从状态历史中弹出当前状态，并应用前一个状态。重做时，从重做栈中弹出操作，并执行它。
4. 命令模式： 可以考虑使用命令模式来更好地组织操作。

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))

_.cloneDeep()

先锋多用户商城系统

修改自网上仿乐购商城，新增功能：1、数据库在线备份与导入功能，可以随时备份数据库，数据受损可以导入数据库，确保数据安全；2、增加组合商品概念，可以用于组配商品销售（比如外套有蓝色和红色，鞋子有40码和41码等），买一送一、组合销售（比如上衣＋围巾＋长裙做为一个套装商品）和加价购买等销售方式；3、按照商品重量和送货距离实时计算精确运费，并可在订单中予以显示，使运费金额实现实时动态准确显示、清晰明了；

下载

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

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

如何处理异步操作的撤销重做？

异步操作的撤销重做更加复杂，因为无法立即撤销或重做。 一种方法是将异步操作封装成Promise，并在操作对象中存储Promise的

resolve

reject

reject

resolve