VTable中实现撤销重做功能的最佳实践

在表格组件开发中，撤销(Undo)和重做(Redo)功能是提升用户体验的重要特性。本文将以VTable项目为例，深入探讨如何在表格组件中优雅地实现这一功能。

问题背景

当开发者尝试在VTable中实现撤销重做功能时，通常会监听单元格值变更事件(change_cell_value)，并将变更记录存入历史堆栈。然而，直接使用changeCellValue()方法进行撤销操作时，会再次触发相同的事件，导致无限循环的历史记录。

核心问题分析

问题的本质在于事件传播机制。无论是用户手动修改单元格，还是通过编程方式调用changeCellValue()方法，都会触发相同的change_cell_value事件。这使得我们无法区分"用户操作"和"程序操作"。

解决方案

VTable提供了更精细的控制方式 - 通过triggerEvent参数。这个布尔参数允许开发者在调用changeCellValue()时明确指定是否触发事件：

// 撤销操作时不触发事件
this.changeCellValue(col, row, value, false);

实现模式

基于这个特性，我们可以构建一个完整的撤销重做系统：

1. 历史记录类设计：

class HistoryManager {
  constructor(applyChangeCallback) {
    this.undoStack = [];
    this.redoStack = [];
    this.applyChange = applyChangeCallback;
  }

  push(prevState, newState) {
    this.undoStack.push({prevState, newState});
    this.redoStack = []; // 清空重做栈
  }

  undo() {
    if (this.undoStack.length === 0) return;
    
    const record = this.undoStack.pop();
    this.applyChange(record.prevState, false); // 不触发事件
    this.redoStack.push(record);
  }

  redo() {
    if (this.redoStack.length === 0) return;
    
    const record = this.redoStack.pop();
    this.applyChange(record.newState, false); // 不触发事件
    this.undoStack.push(record);
  }
}

2. 事件监听与历史记录：

tableInstance.addEventListener("change_cell_value", (cell) => {
  // 只记录用户触发的变更
  const { row, col, changedValue, currentValue } = cell;
  historyManager.push(
    { row, col, value: changedValue },
    { row, col, value: currentValue }
  );
});

最佳实践建议

1. 性能优化：对于频繁的单元格变更，可以考虑批量记录而非单个操作
2. 状态管理：除了单元格值，还应考虑格式、样式等变更的撤销
3. 深度克隆：确保存储的历史状态是深拷贝，避免引用问题
4. 容量限制：设置历史堆栈的最大长度，防止内存过度消耗

总结

通过合理利用VTable提供的triggerEvent参数，开发者可以构建出健壮的撤销重做系统。关键在于区分用户操作和程序操作，避免不必要的事件循环。这种模式不仅适用于表格组件，也可推广到其他需要历史管理的交互场景中。