当前位置：首页 > JavaScript

js 实现恢复

2026-04-05 16:10:53JavaScript

JavaScript 实现恢复功能

撤销与恢复的基本原理

撤销和恢复功能通常基于命令模式或状态快照实现。命令模式记录操作历史，状态快照保存应用状态的副本。

命令模式示例：

class Command {
  constructor(execute, undo) {
    this.execute = execute;
    this.undo = undo;
  }
}

状态快照示例：

const history = [];
let currentState = 0;

实现撤销/恢复栈

维护两个栈结构分别存储撤销和恢复的操作：

js 实现恢复

const undoStack = [];
const redoStack = [];

function executeCommand(command) {
  command.execute();
  undoStack.push(command);
  redoStack.length = 0; // 清空重做栈
}

撤销操作实现

function undo() {
  if (undoStack.length === 0) return;

  const command = undoStack.pop();
  command.undo();
  redoStack.push(command);
}

恢复操作实现

function redo() {
  if (redoStack.length === 0) return;

  const command = redoStack.pop();
  command.execute();
  undoStack.push(command);
}

完整示例代码

class TextEditor {
  constructor() {
    this.text = '';
    this.undoStack = [];
    this.redoStack = [];
  }

  insert(str) {
    const prevText = this.text;
    this.text += str;

    this.undoStack.push({
      execute: () => this.text = prevText,
      undo: () => this.text = prevText + str
    });

    this.redoStack.length = 0;
  }

  undo() {
    if (this.undoStack.length === 0) return;

    const action = this.undoStack.pop();
    action.execute();
    this.redoStack.push(action);
  }

  redo() {
    if (this.redoStack.length === 0) return;

    const action = this.redoStack.pop();
    action.undo();
    this.undoStack.push(action);
  }
}