js实现recyclerview

在JavaScript中实现类似Android的RecyclerView功能，可以通过以下方法实现高效列表渲染和动态数据管理：

核心实现思路

使用虚拟滚动（Virtual Scrolling）技术，仅渲染可视区域内的DOM元素，通过动态计算位置和复用节点来优化性能。以下是一个基础实现示例：

class RecyclerView {
  constructor(container, itemHeight, renderItem, totalItems) {
    this.container = container;
    this.itemHeight = itemHeight;
    this.renderItem = renderItem;
    this.totalItems = totalItems;
    this.visibleItems = Math.ceil(container.clientHeight / itemHeight) + 2;
    this.startIndex = 0;
    this.endIndex = this.visibleItems;
    this.pool = [];

    this.container.style.position = 'relative';
    this.container.style.overflow = 'auto';
    this.scroller = document.createElement('div');
    this.scroller.style.height = `${totalItems * itemHeight}px`;
    this.container.appendChild(this.scroller);

    this.container.addEventListener('scroll', this.handleScroll.bind(this));
    this.render();
  }

  handleScroll() {
    const scrollTop = this.container.scrollTop;
    const newStartIndex = Math.floor(scrollTop / this.itemHeight);

    if (newStartIndex !== this.startIndex) {
      this.startIndex = newStartIndex;
      this.endIndex = Math.min(this.startIndex + this.visibleItems, this.totalItems);
      this.render();
    }
  }

  render() {
    // 回收不可见元素
    Array.from(this.scroller.children).forEach(child => {
      const index = parseInt(child.dataset.index);
      if (index < this.startIndex || index >= this.endIndex) {
        this.pool.push(child);
        this.scroller.removeChild(child);
      }
    });

    // 渲染可见元素
    for (let i = this.startIndex; i < this.endIndex; i++) {
      let item = this.pool.pop();
      if (!item) {
        item = document.createElement('div');
        item.style.position = 'absolute';
        item.style.height = `${this.itemHeight}px`;
        item.style.width = '100%';
      }

      item.style.top = `${i * this.itemHeight}px`;
      item.dataset.index = i;
      this.renderItem(item, i);
      this.scroller.appendChild(item);
    }
  }
}

使用示例

const container = document.getElementById('list-container');
const itemHeight = 50;
const totalItems = 1000;

const recyclerView = new RecyclerView(
  container,
  itemHeight,
  (itemElement, index) => {
    itemElement.textContent = `Item ${index + 1}`;
  },
  totalItems
);

性能优化技巧

实现动态高度支持需要额外计算每个项目的位置，可以使用二分查找快速定位滚动位置对应的项目索引。

// 在构造函数中添加
this.heights = Array(totalItems).fill(itemHeight); // 默认高度
this.positions = this.heights.reduce((acc, h, i) => {
  acc.push((acc[i] || 0) + h);
  return acc;
}, []);

// 修改handleScroll使用二分查找
handleScroll() {
  const scrollTop = this.container.scrollTop;
  this.startIndex = this.binarySearch(this.positions, scrollTop);
  this.endIndex = Math.min(this.startIndex + this.visibleItems, this.totalItems);
  this.render();
}

binarySearch(arr, target) {
  let low = 0, high = arr.length - 1;
  while (low <= high) {
    const mid = Math.floor((low + high) / 2);
    if (arr[mid] === target) return mid;
    arr[mid] < target ? low = mid + 1 : high = mid - 1;
  }
  return low;
}

高级功能扩展

实现数据变更通知机制，当数据源变化时自动更新列表：

updateData(newTotalItems) {
  this.totalItems = newTotalItems;
  this.scroller.style.height = `${this.totalItems * this.itemHeight}px`;
  this.heights = Array(this.totalItems).fill(this.itemHeight);
  this.positions = this.heights.reduce((acc, h, i) => {
    acc.push((acc[i] || 0) + h);
    return acc;
  }, []);
  this.render();
}

以上实现提供了RecyclerView的核心功能，包括项目复用、滚动优化和动态高度支持。实际应用中可根据需求进一步扩展功能，如添加动画效果、实现下拉刷新等。