如何利用 J*aScript 实现一个支持撤销和重做功能的状态管理器？

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何利用 J*aScript 实现一个支持撤销和重做功能的状态管理器？

2025-10-04

浏览次数：次

返回列表

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

如何利用 javascript 实现一个支持撤销和重做功能的状态管理器？

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

基本设计思路

状态管理器需要维护：

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

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

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

以下是一个简洁、实用的 J*aScript 类实现：

UXbot

AI产品设计工具

185 查看详情 UXbot

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 }

  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 或循环引用，需改用更健壮的深拷贝方法。