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

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"