如何在JavaScript中实现虚拟列表？

class VirtualList {
  constructor(container, items, itemHeight) {
    this.container = container;
    this.items = items;
    this.itemHeight = itemHeight;
    this.visibleItems = [];
    this.startIndex = 0;
    this.endIndex = 0;
    this.scrollTop = 0;

    this.init();
  }

  init() {
    this.container.style.overflow = 'auto';
    this.container.addEventListener('scroll', this.handleScroll.bind(this));
    this.render();
  }

  handleScroll() {
    this.scrollTop = this.container.scrollTop;
    this.updateVisibleItems();
  }

  updateVisibleItems() {
    const containerHeight = this.container.clientHeight;
    this.startIndex = Math.floor(this.scrollTop / this.itemHeight);
    this.endIndex = this.startIndex + Math.ceil(containerHeight / this.itemHeight);

    this.render();
  }

  render() {
    this.container.innerHTML = '';
    const totalHeight = this.items.length * this.itemHeight;
    this.container.style.height = `${totalHeight}px`;

    const fragment = document.createDocumentFragment();
    for (let i = this.startIndex; i < Math.min(this.endIndex, this.items.length); i++) {
      const item = document.createElement('div');
      item.style.position = 'absolute';
      item.style.top = `${i * this.itemHeight}px`;
      item.style.height = `${this.itemHeight}px`;
      item.textContent = this.items[i];
      fragment.appendChild(item);
    }

    this.container.appendChild(fragment);
  }
}

// 使用示例
const items = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);
const container = document.getElementById('list-container');
const virtualList = new VirtualList(container, items, 30);

handleScroll() {
  if (!this.scrollRaf) {
    this.scrollRaf = requestAnimationFrame(() => {
      this.scrollRaf = null;
      this.scrollTop = this.container.scrollTop;
      this.updateVisibleItems();
    });
  }
}

class DynamicVirtualList extends VirtualList {
  constructor(container, items, estimateHeight) {
    super(container, items, estimateHeight);
    this.heights = new Array(items.length).fill(estimateHeight);
    this.totalHeight = items.length * estimateHeight;
  }

  updateVisibleItems() {
    const containerHeight = this.container.clientHeight;
    let accumulatedHeight = 0;
    this.startIndex = 0;
    while (this.startIndex < this.items.length && accumulatedHeight + this.heights[this.startIndex] <= this.scrollTop) {
      accumulatedHeight += this.heights[this.startIndex];
      this.startIndex++;
    }

    this.endIndex = this.startIndex;
    while (this.endIndex < this.items.length && accumulatedHeight + this.heights[this.endIndex] < this.scrollTop + containerHeight) {
      accumulatedHeight += this.heights[this.endIndex];
      this.endIndex++;
    }

    this.render();
  }

  render() {
    this.container.innerHTML = '';
    this.container.style.height = `${this.totalHeight}px`;

    const fragment = document.createDocumentFragment();
    let accumulatedHeight = 0;
    for (let i = this.startIndex; i < Math.min(this.endIndex, this.items.length); i++) {
      const item = document.createElement('div');
      item.style.position = 'absolute';
      item.style.top = `${accumulatedHeight}px`;
      item.style.height = `${this.heights[i]}px`;
      item.textContent = this.items[i];
      fragment.appendChild(item);

      accumulatedHeight += this.heights[i];
    }

    this.container.appendChild(fragment);
  }

  // 假设我们有一个方法来更新单个项目的高度
  updateItemHeight(index, height) {
    const oldHeight = this.heights[index];
    this.heights[index] = height;
    this.totalHeight += height - oldHeight;

    if (index >= this.startIndex && index < this.endIndex) {
      this.render();
    }
  }
}

updateVisibleItems() {
  const containerHeight = this.container.clientHeight;
  const buffer = 5; // 预加载的项目数量
  this.startIndex = Math.max(0, Math.floor(this.scrollTop / this.itemHeight) - buffer);
  this.endIndex = Math.min(this.items.length, this.startIndex + Math.ceil(containerHeight / this.itemHeight) + buffer);

  this.render();
}