Angular应用中撤销重做（Undo/Redo）功能的实现方案咨询

你提到的基于完整AppModel快照的思路是完全可行的，这也是实现Undo/Redo最直观的方案之一，尤其适合状态结构相对简单的场景。咱们先拆解下这个思路的核心逻辑：

• 维护一个历史状态数组，搭配currentIndex指针标记当前所处的状态位置
• 每当用户完成一个需要可撤销的操作（比如修改文本字段、调整配置），就深拷贝当前的AppModel生成新实例，推入历史数组，并把currentIndex更新到最新位置
• 执行Undo时，将currentIndex减1，把对应位置的AppModel设为当前状态；执行Redo时则相反，currentIndex加1即可

不过你也精准地注意到了这个方案的隐患：当AppModel包含500个文本字段时，每次快照会占用约10KB的空间——如果用户频繁操作（比如连续修改几十次），累计的内存占用会快速增长，在移动端这类内存受限的环境里可能会出问题。

针对这个痛点，更高效的方案是采用命令模式（Command Pattern），它不存储完整的状态快照，而是记录「导致状态变更的操作本身」。具体到Angular项目里，可以这么落地：

1. 定义命令接口 #

先抽象出一个通用的命令接口，包含执行和撤销两个核心方法：

interface Command {
  execute(): void;
  undo(): void;
}

2. 实现具体操作命令 #

针对不同的业务操作，创建对应的命令类。比如修改文本字段的命令：

class UpdateTextCommand implements Command {
  private fieldName: string;
  private oldValue: string;
  private newValue: string;
  private appModel: AppModel;

  constructor(appModel: AppModel, fieldName: string, newValue: string) {
    this.appModel = appModel;
    this.fieldName = fieldName;
    this.oldValue = appModel[fieldName];
    this.newValue = newValue;
  }

  execute(): void {
    this.appModel[this.fieldName] = this.newValue;
  }

  undo(): void {
    this.appModel[this.fieldName] = this.oldValue;
  }
}

3. 管理命令历史与执行逻辑 #

在你的组件或服务里维护命令历史栈和当前索引，处理Undo/Redo逻辑：

private commandHistory: Command[] = [];
private currentIndex = -1;

// 触发文本修改的方法
updateTextField(fieldName: string, newValue: string): void {
  const command = new UpdateTextCommand(this.appModel, fieldName, newValue);
  command.execute();
  
  // 如果用户在Undo后又做了新操作，需要清除当前索引之后的历史记录
  this.commandHistory.splice(this.currentIndex + 1);
  this.commandHistory.push(command);
  this.currentIndex++;
}

// 执行撤销
undo(): void {
  if (this.currentIndex >= 0) {
    this.commandHistory[this.currentIndex].undo();
    this.currentIndex--;
  }
}

// 执行重做
redo(): void {
  if (this.currentIndex < this.commandHistory.length - 1) {
    this.currentIndex++;
    this.commandHistory[this.currentIndex].execute();
  }
}

两种方案的对比 #

• 快照模式：优点是实现简单，状态回滚直接粗暴，适合状态结构小、操作不频繁的场景；缺点是内存占用高，深拷贝可能带来额外的性能开销
• 命令模式：优点是内存占用极低（只记录操作的关键信息），性能更优；缺点是需要为每种操作编写对应的命令类，前期开发量稍大

如果你的项目已经在用NgRx这类状态管理库，也可以结合它的store来实现Undo/Redo——比如把每个操作的action记录下来，Undo时反向触发对应的action即可，这也是一种衍生的命令模式思路。

内容的提问来源于stack exchange，提问作者sanjihan