lazeForEach 懒加载数据，长列表数据渲染，性能优化

1. ForEach 进行的加载，数据有多少，组件就会创建多少，占用对应的内存会越来越多
2. 而用了 LazyForEach 进行优化后：只会创建可视范围内的组件，相比于 forEach 组件少了很多很多, 无论用户如何加载更多数据，内存的消耗，只有一点点不会有很大的变化

//lazeForEach
/**
 * BasicDataSource 类实现了 IDataSource 接口，提供了数据源的基本功能
 * 它可以被用作 LazyForEach 组件的数据源，负责维护数据集合及其变化
 */
class BasicDataSource implements IDataSource {
  // 存储数据变化监听器的数组
  private listeners: DataChangeListener[] = [];
  // 存储原始数据的数组
  private originDataArray: object[] = [];

  /**
   * 返回数据总条数
   * @returns 总条数，当前实现中始终返回 0
   */
  public totalCount(): number {
    return 0;
  }

  /**
   * 根据索引获取数据项
   * @param index 数据项的索引
   * @returns 索引对应的的数据项
   */
  public getData(index: number): object {
    return this.originDataArray[index];
  }

  /**
   * 注册数据变化监听器
   * 该方法供框架使用，以便 LazyForEach 组件向数据源添加 listener 监听
   * @param listener 数据变化监听器
   */
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener');
      this.listeners.push(listener);
    }
  }

  /**
   * 取消注册数据变化监听器
   * 该方法供框架使用，以便 LazyForEach 组件在数据源处移除 listener 监听
   * @param listener 数据变化监听器
   */
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener');
      this.listeners.splice(pos, 1);
    }
  }

  /**
   * 通知所有监听器数据已重新加载
   * 这将导致 LazyForEach 组件重新加载所有子组件
   */
  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }

  /**
   * 通知所有监听器在指定索引处添加数据
   * @param index 添加数据的索引
   */
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }

  /**
   * 通知所有监听器指定索引处的数据已更改
   * @param index 数据更改的索引
   */
  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    })
  }

  /**
   * 通知所有监听器在指定索引处删除数据
   * @param index 删除数据的索引
   */
  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    })
  }

  /**
   * 通知所有监听器交换两个索引处的数据
   * @param from 交换开始的索引
   * @param to 交换结束的索引
   */
  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    })
  }
}

/**
 * GoodsItemsDataSource 继承自 BasicDataSource，用于处理商品条目数据
 * 它提供了对数据集合的增删改查操作，并能通知 LazyForEach 组件更新视图
 */
export class GoodsItemsDataSource extends BasicDataSource {
  // 存储商品数据的数组
  private dataArray: object[] = [];

  /**
   * 返回数据总条数
   * @returns 数据数组的长度
   */
  public totalCount(): number {
    return this.dataArray.length;
  }

  /**
   * 根据索引获取数据项
   * @param index 数据项的索引
   * @returns 索引对应的的数据项
   */
  public getData(index: number): object {
    return this.dataArray[index];
  }

  /**
   * 在指定索引处添加数据
   * @param index 添加数据的索引
   * @param data 要添加的数据项
   */
  public addData(index: number, data: object): void {
    this.dataArray.splice(index, 0, data);
    this.notifyDataAdd(index);
  }

  /**
   * 在数组末尾添加数据，并通知监听器
   * @param data 要添加的数据项
   */
  public pushData(data: object): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }

  /**
   * 重新加载数据源，并通知监听器全部数据已更改
   * @param data 新的数据数组
   */
  public reloadData(data: object[]): void {
    this.dataArray = data;
    this.notifyDataReload();
  }
}