首页 > 文章 > 前端

JavaScript实现撤销重做功能详解

时间：2025-11-24 14:00:58 486浏览收藏

本文深入探讨了如何使用 JavaScript 命令模式实现撤销（Undo）和重做（Redo）功能，这是一种实用的前端行为设计模式。命令模式通过将操作封装成对象，使得执行、撤销和记录操作变得灵活可控。文章详细介绍了命令模式的核心角色，包括 Command（命令）、ConcreteCommand（具体命令）、Receiver（接收者）和 Invoker（调用者），并以文本编辑器为例，演示了如何通过 `InsertCommand` 和 `DeleteCommand` 实现可逆操作。同时，阐述了 `CommandManager` 如何维护 undoStack 和 redoStack 栈，实现命令的执行、撤销和重做。这种模式特别适用于需要状态回溯的应用场景，如表单操作、绘图工具、游戏指令等。

命令模式通过封装操作为对象实现撤销与重做功能，核心角色包括Command、ConcreteCommand、Receiver和Invoker；以文本编辑器为例，InsertCommand和DeleteCommand分别记录插入与删除操作的位置及内容，确保可逆；CommandManager维护undoStack和redoStack栈，执行新命令时压入undo栈并清空redo栈，调用undo时将命令从undo栈弹出并压入redo栈，redo则相反；TextEditor作为接收者提供insert、delete等实际方法；客户端通过CommandManager触发命令，实现灵活的操作历史管理；该模式适用于需状态回溯的场景如表单、绘图、游戏指令等。

JavaScript命令模式_撤销重做功能设计

在前端开发中，命令模式是一种非常实用的行为设计模式，特别适合实现撤销（Undo）和重做（Redo）功能。通过将操作封装为对象，命令模式让执行、撤销、记录操作变得灵活可控。下面介绍如何使用 JavaScript 实现一个支持撤销与重做的命令模式系统。

命令模式核心结构

命令模式包含四个基本角色：

Command（命令）：定义执行和撤销操作的接口
ConcreteCommand（具体命令）：实现具体的操作逻辑
Receiver（接收者）：真正执行任务的对象
Invoker（调用者）：触发命令执行，并管理撤销/重做栈

以文本编辑器为例，我们模拟“插入文字”和“删除文字”的撤销重做功能。

实现可撤销的命令类

每个命令需要实现 execute 和 undo 方法，保证操作可逆。

class InsertCommand {
  constructor(editor, text) {
    this.editor = editor;
    this.text = text;
    this.position = editor.getContent().length; // 记录插入位置
  }

  execute() {
    this.editor.insert(this.text);
  }

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

class DeleteCommand {
  constructor(editor, start, length) {
    this.editor = editor;
    this.start = start;
    this.length = length;
    this.deletedText = this.editor.getContent().slice(start, start + length); // 保存被删内容
  }

  execute() {
    this.editor.deleteAt(this.start, this.length);
  }

  undo() {
    this.editor.insertAt(this.start, this.deletedText);
  }
}

调用者管理命令栈

调用者负责执行命令，并维护撤销和重做栈。每次执行新命令时，清空重做栈，确保操作历史线性。

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

接收者与客户端使用

接收者是实际处理数据的对象，比如文本编辑器。客户端通过调用者触发命令。

class TextEditor {
  constructor() {
    this.content = '';
  }

  insert(text) {
    this.content += text;
  }

  insertAt(pos, text) {
    this.content =
      this.content.slice(0, pos) + text + this.content.slice(pos);
  }

  deleteAt(start, length) {
    this.content =
      this.content.slice(0, start) +
      this.content.slice(start + length);
  }

  getContent() {
    return this.content;
  }
}

// 使用示例
const editor = new TextEditor();
const manager = new CommandManager();

manager.execute(new InsertCommand(editor, 'Hello'));
manager.execute(new InsertCommand(editor, ' World'));

console.log(editor.getContent()); // "Hello World"

manager.undo();
console.log(editor.getContent()); // "Hello"

manager.redo();
console.log(editor.getContent()); // "Hello World"

基本上就这些。只要每个命令保存足够的上下文信息，就能精准还原状态。这种结构清晰、扩展性强，适用于表单操作、绘图工具、游戏指令等多种场景。

到这里，我们也就讲完了《JavaScript实现撤销重做功能详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于JavaScript,命令模式,设计模式,撤销,重做的知识点！

JavaScript 命令模式设计模式撤销重做