当前位置：首页 > 文章列表 > 文章 > 前端 > 命令模式实现撤销重做，关键在操作记录与回退

命令模式实现撤销重做，关键在操作记录与回退

2025-10-26 09:52:49 0浏览收藏

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《命令模式实现撤销重做功能，关键在于记录操作历史并提供回退机制。以下是实现步骤和示例代码：一、核心概念Command 接口定义执行和撤销方法。ConcreteCommand（具体命令）实现 Command 接口，保存需要执行的操作和参数。Invoker（调用者）负责触发命令，并维护命令的历史记录。Receiver（接收者）执行具体操作的对象。History（历史记录）存储已执行的命令，用于撤销或重做。二、实现步骤1. 定义 Command 接口class Command { execute() {} undo() {} }2. 创建具体命令类（如：加法、减法） class AddCommand extends Command { constructor(receiver, value) { super(); this.receiver = receiver; this.value = value; } execute() { this.receiver.add(this.value); } undo() { this.receiver.subtract(this.value); } } class SubtractCommand extends Command { constructor(receiver, value) { super(); this.receiver = receiver; this.value = value; } execute() { this.receiver.subtract(this.value);》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

实现撤销和重做功能的关键是将操作封装为命令对象，通过历史栈管理执行与反向逻辑。1. 定义命令类如SetTextCommand，保存执行前后的状态；2. 创建CommandManager管理undo和redo栈，执行命令时压入undo栈并清空redo栈；3. 调用undo时将命令从undo栈弹出，执行反操作后压入redo栈；4. redo则反向操作，恢复已撤销的命令。示例中文本编辑器通过该模式实现内容修改、撤销与重做。扩展可支持复合命令、限制栈大小、添加命令描述等。核心在于动作对象化与栈的顺序控制，注意清空redo栈的时机以保证操作一致性。

怎样实现一个支持撤销重做的 JavaScript 命令模式？

实现一个支持撤销和重做的命令模式，关键在于把每个操作封装成对象，记录执行和反向操作的逻辑，并通过历史栈管理这些命令。下面是一个简洁、实用的实现方式。

定义命令接口

每个命令需要统一结构，包含执行（execute）、撤销（undo）方法。这样能保证调用一致性。

例如，假设我们在做一个简单的文本编辑器，可以修改内容：

class SetTextCommand {
  constructor(editor, newText) {
    this.editor = editor;
    this.newText = newText;
    this.oldText = editor.text; // 保存之前的状态用于撤销
  }

  execute() {
    this.editor.text = this.newText;
  }

  undo() {
    this.editor.text = this.oldText;
  }
}

创建命令管理器

命令管理器负责执行命令，并维护撤销和重做栈。

class CommandManager {
  constructor() {
    this.undoStack = [];
    this.redoStack = [];
  }

  execute(command) {
    command.execute();
    this.undoStack.push(command);
    this.redoStack = []; // 执行新命令后，清空重做栈
  }

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

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

使用示例

将命令模式应用到具体场景中：

const editor = { text: "" };
const commandManager = new CommandManager();

// 修改文本
commandManager.execute(new SetTextCommand(editor, "Hello"));
console.log(editor.text); // 输出: Hello

commandManager.execute(new SetTextCommand(editor, "Hello World"));
console.log(editor.text); // 输出: Hello World

// 撤销
commandManager.undo();
console.log(editor.text); // 输出: Hello

// 重做
commandManager.redo();
console.log(editor.text); // 输出: Hello World