JavaScript撤销重做实现方法

想要为你的 JavaScript 应用添加强大的撤销重做功能？本文将为你揭秘如何使用 JavaScript 实现一个高效的状态管理器。无需依赖任何外部库，通过维护历史快照数组和当前指针，轻松实现状态的撤销与重做。文章提供了一个简洁实用的 `UndoRedoManager` 类，支持最大步数限制，并通过深拷贝确保状态存储的安全性。此外，还提供了详细的使用示例和优化建议，帮助你将这一模式应用到文本编辑器、表单管理等各种需要操作回退的场景中。掌握这一技巧，让你的应用更加用户友好！

答案：通过维护历史快照数组和当前指针实现撤销重做，支持最大步数限制与深拷贝状态存储。

实现一个支持撤销和重做功能的状态管理器，核心思路是记录每次状态变化的历史，并通过指针管理当前所处的历史位置。JavaScript 可以轻松实现这一机制，无需依赖外部库。

基本设计思路

状态管理器需要维护：

• 一个历史快照数组（保存所有状态）
• 一个当前状态的指针（指示当前在历史中的位置）
• 最大历史步数限制（可选，防止内存溢出）

每次更新状态时，将新状态存入历史，并移动指针；撤销时指针前移，重做时指针后移。

实现可撤销的状态管理器类

以下是一个简洁、实用的 JavaScript 类实现：

class UndoRedoManager {
  constructor(maxSteps = 50) {
    this.history = [];
    this.currentIndex = -1;
    this.maxSteps = maxSteps;
  }

  setState(newState) {
    // 截断当前点之后的历史（处理重做后的新操作）
    this.history = this.history.slice(0, this.currentIndex + 1);

    // 添加新状态
    this.history.push(JSON.parse(JSON.stringify(newState)));

    // 更新指针
    this.currentIndex++;

    // 超出最大步数时，删除最老的记录
    if (this.history.length > this.maxSteps) {
      this.history.shift();
      this.currentIndex--;
    }
  }

  undo() {
    if (this.canUndo()) {
      this.currentIndex--;
      return JSON.parse(JSON.stringify(this.history[this.currentIndex]));
    }
    return null;
  }

  redo() {
    if (this.canRedo()) {
      this.currentIndex++;
      return JSON.parse(JSON.stringify(this.history[this.currentIndex]));
    }
    return null;
  }

  canUndo() {
    return this.currentIndex > 0;
  }

  canRedo() {
    return this.currentIndex < this.history.length - 1;
  }

  getCurrentState() {
    if (this.currentIndex === -1) return null;
    return JSON.parse(JSON.stringify(this.history[this.currentIndex]));
  }
}

使用示例

假设你在开发一个简单的文本编辑器或表单状态管理：

const manager = new UndoRedoManager(10);

manager.setState({ text: "Hello" });
manager.setState({ text: "Hello World" });
manager.setState({ text: "Hello Everyone" });

console.log(manager.undo());  // { text: "Hello World" }
console.log(manager.undo());  // { text: "Hello" }
console.log(manager.redo());  // { text: "Hello World" }

注意：使用 JSON.parse(JSON.stringify()) 实现深拷贝适用于纯数据对象。若状态包含函数、undefined、Symbol 或循环引用，需改用更健壮的深拷贝方法。

优化建议

• 对大型状态对象，考虑只存储“变更差量”而非完整快照，节省内存
• 监听状态变化并触发 UI 更新（如结合事件机制或观察者模式）
• 在 setState 前比较前后状态，避免无意义的历史记录
• 提供 clear() 方法重置历史

基本上就这些。这个模式简单有效，适合集成到表单、画布编辑、配置工具等需要操作回退的场景。

本篇关于《JavaScript撤销重做实现方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！