js实现撤销

撤销功能的实现方法

在JavaScript中实现撤销功能通常涉及记录操作历史，并在需要时回退到之前的状态。以下是几种常见的实现方式：

命令模式实现

命令模式是实现撤销/重做的经典设计模式。通过封装操作为对象，可以轻松管理历史记录：

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

class CommandManager {
  constructor() {
    this.history = [];
    this.index = -1;
  }

  execute(command) {
    command.execute(command.value);
    this.history = this.history.slice(0, this.index + 1);
    this.history.push(command);
    this.index++;
  }

  undo() {
    if (this.index >= 0) {
      this.history[this.index].undo(this.history[this.index].value);
      this.index--;
    }
  }

  redo() {
    if (this.index < this.history.length - 1) {
      this.index++;
      this.history[this.index].execute(this.history[this.index].value);
    }
  }
}

状态快照实现

对于简单场景，可以保存状态快照来实现撤销：

class StateHistory {
  constructor(initialState) {
    this.history = [initialState];
    this.currentIndex = 0;
  }

  get currentState() {
    return this.history[this.currentIndex];
  }

  pushState(newState) {
    this.history = this.history.slice(0, this.currentIndex + 1);
    this.history.push(newState);
    this.currentIndex++;
  }

  undo() {
    if (this.currentIndex > 0) {
      this.currentIndex--;
      return this.currentState;
    }
    return null;
  }

  redo() {
    if (this.currentIndex < this.history.length - 1) {
      this.currentIndex++;
      return this.currentState;
    }
    return null;
  }
}

使用不可变数据

结合不可变数据库如Immutable.js可以更高效地实现撤销：

import { List } from 'immutable';

class UndoManager {
  constructor(initialState) {
    this.past = List();
    this.present = initialState;
    this.future = List();
  }

  getState() {
    return this.present;
  }

  execute(newState) {
    this.past = this.past.push(this.present);
    this.present = newState;
    this.future = List();
  }

  undo() {
    if (this.past.size > 0) {
      this.future = this.future.unshift(this.present);
      this.present = this.past.last();
      this.past = this.past.pop();
    }
  }

  redo() {
    if (this.future.size > 0) {
      this.past = this.past.push(this.present);
      this.present = this.future.first();
      this.future = this.future.shift();
    }
  }
}

基于Memento模式

Memento模式保存对象内部状态而不暴露实现细节：

class Originator {
  constructor(state) {
    this.state = state;
  }

  save() {
    return new Memento(this.state);
  }

  restore(memento) {
    this.state = memento.getState();
  }
}

class Memento {
  constructor(state) {
    this.state = state;
  }

  getState() {
    return this.state;
  }
}

class Caretaker {
  constructor() {
    this.mementos = [];
    this.current = -1;
  }

  save(memento) {
    this.mementos = this.mementos.slice(0, this.current + 1);
    this.mementos.push(memento);
    this.current++;
  }

  undo() {
    if (this.current > 0) {
      this.current--;
      return this.mementos[this.current];
    }
    return null;
  }

  redo() {
    if (this.current < this.mementos.length - 1) {
      this.current++;
      return this.mementos[this.current];
    }
    return null;
  }
}

实现注意事项

• 内存管理：历史记录可能占用大量内存，需考虑限制历史记录长度
• 性能优化：对于大型状态，使用差异记录而非完整快照
• 用户体验：合理设置撤销深度，避免过多历史记录影响性能
• 并发控制：在多用户协作场景下需考虑操作冲突问题

以上方法可根据具体应用场景选择或组合使用，复杂应用可能需要结合多种技术实现完善的撤销/重做功能。