recycler-view

import { Recycler, Source, Renderer } from 'recycler';
 
declare type DataType = number;
 
const data: DataType[] = [1, 2, 3, 4, 5];
 
// 继承 Renderer 抽象类，实现 MyRenderer 类
class MyRenderer extends Renderer<DataType> {
  public createElement(data?: DataType): HTMLElement {
    return document.createElement('div');
  }
  
  public update(el: HTMLElement, data: DataType): HTMLElement {
    el.textContent = data;
    return el;
  }
}
 
// 继承 Source 抽象类，实现 MySource 类
class MySource extends Source<DataType> {
  private renderer: MyRenderer = new MyRenderer(); // 此项根据需要决定是否提供
  
  public getWidth(index: number): string {
    return '100%';
  }
  
  public getHeight(index: number): number {
    return 100;
  }
  
  public getScrollTop(index: number): number {
    return index * this.getHeight();
  }
  
  public getMaxScrollHeight(): number {
    return this.getLength() * this.getHeight();
  }
  
  public getLength(): number {
    return data.length;
  }
  
  public getData(index: number): DataType {
    return data[index];
  }
  
  // 此方法可以没有，如果没有，在 Recycler Options 中就必须提供
  public getRenderer(index: number): MyRenderer {
    return this.renderer;
  }
  
  // 此方法可以没有，如果没有就不会尝试加载更多
  public fetch(): Promise<boolean> {
    const newData = [1, 2, 3, 4, 5];
    data = data.concat(newData);
    return Promise.resolve(true);
  }
}
 
// 绑定 scroller、Source 和 Renderer，启动监听和视图更新
const recycler = new Recycler<DataType>(
  document.getElementById('scroller'),
  new MySource(),
  { 
    container: document.getElementById('container'),
    renderer: new MyRenderer() // 此项可以没有，如果没有，在 Renderer 中就必须实现 getRenderer 方法
  }
);

/* at Renderer.ts */
 
// 这里贴出一部分关于 Renderer 抽象类的源码，以便对照
 
interface IQueue {
  unused: HTMLElement[];
  using: Set<HTMLElement>
}
 
abstract class Renderer<T> {
  // 该对象包含 using（使用中的节点）和 unused（未在使用中的节点）
  protected queue: IQueue = {
    unused: [],
    using: new Set()
  };
  
  // 释放使用中的节点
  public release(el: HTMLElement, recycler: Recycler): void {
    this.queue.using.delete(el);
    this.queue.unused.push(el);
  }
  
  // 渲染函数
  public render(data: T, recycler: Recycler): HTMLElement {
    // 从 queue.unused 中弹出一个节点
    let el = this.queue.unused.pop();
    
    // 如果 el 不存在则创建一个新的节点。createNewElement 自行实现，返回一个 HTMLElement
    if (!el) {
      el = this.createNewElement(data);
    }
    
    // 无论是刚创建的元素还是原来就有的元素，都走 update 更新
    this.update(el, data, recycler);
    
    // 向 queue.using 中添加一个节点
    this.queue.using.add(el);
    
    // 返回节点
    return el;
  }
  
  // createElement 抽象方法
  public abstract createElement(data?: T): HTMLElement;
  
  // update 抽象方法
  public abstract update(el: HTMLElement, data: T, recycler: IRecycler): HTMLElement;
}

/* at MyRenderer.ts */
 
// 继承 Renderer 抽象类，并实现 createElement 和 update 方法
class MyRenderer extends Renderer<MyDataType> {
  // 创建新节点，这里推荐创建的节点与 data 无关
  // 只创建一个架子，接下来由 update 方法更新视图，这样不用写重复逻辑，速度也快
  public createElement(data?: MyDataType) {
    const el = document.createElement('div');
    
    el.innerHTML = '....';
    
    return el;
  }
  
  public update(el: HTMLElement, data: MyDataType, recycler: Recycler) {
    // Do some udpate to el...
    return el;
  }
  
  // 这里可以根据需要改造，比如移除 el 节点
  @Override
  public release(el: HTMLElement, recycler: Recycler) {
    super.release(el, recycler);
    
    el.remove(); // 把 el 从 Dom 树中移除
  }
}

import MyComponent from 'my-component';
 
class MyRenderer extends Renderer<MyDataType> {
  public createElement(data?: MyDataType): HTMLElement {
    // 创建 Vue 实例
    const vm = new Vue(MyComponent);
 
    // 把 Vue 实例绑定到真实 Dom 元素上
    vm.$el.vm = vm;
    
    // 返回真实 Dom 元素
    return vm.$el;
  }
  
  public update(el: HTMLElement, data: MyDataType, recycler: Recycler): HTMLElement {
    // 拿到绑定在真实 Dom 元素上的 Vue 实例，并更新
    Object.assign(el.vm.props, data);
    
    // 返回更新后的 Dom 元素
    return el;
  }
}

let ratio = 1;
 
window.onresize = function() {
  ratio = window.innerWidth / 375;
  recycler.forceUpdate();
}
 
class MySource extends Source {
  getHeight(index: number): number {
    return ratio * 100;
  }
  
  getScrollTop(index: number): number {
    return this.getHeight() * index;
  }
}

const columns = 3;
 
class MySource extends Source<MyDataType> {
  private columns: number = columns;
  private width: number = 1 / columns * 100 + '%';
  
  public getHeight(index: number): number {
    return 100;
  }
  
  public getWidth(): number {
    return this.width;
  }
  
  public getScrollTop(index: number): number {
    return this.getHeight() * Math.floor(index / this.columns);
  }
}

// 首先我们需要每一项的高度，这个值在实际项目中需要想办法知道
 
let ratio = 1;
 
window.onresize = function() {
  ratio = window.innerWidth / 375;
}
 
class MySource extends Source<MyDataType> {
  // 缓存每一项的 scrollTop
  private scrollTopCollector: number[] = [];
  private columns: number = 3;
  
  public getData(index: number): MyDataType {
    return {}
  }
  
  public getHeight(index: number): number {
    // 这里乘一个系数，用于动态改变高度
    return ((this.getData(index) || {}).height || 0) * ratio;
  }
  
  public getScrollTop(index: number): number {
    // 这里乘一个系数，用于动态改变高度时，scrollTop 也要跟着变
    return (this.scrollTopCollector[index] || 0) * ratio;
  }
  
  // 此方法向 scrollTopCollector 中添加新的 scrollTop 缓存
  private collectScrollTop(/*新增数据的长度*/newDataLength: number) {
    const collector = this.scrollTopCollector;
    
    for (let i = 0;i < newDataLength;i++) {
      const topItemIndex = collector.length - this.columns;
      const topItemHeight = this.getHeight(topItemIndex);
      const topItemScrollTop = this.getScrollTop(topItemIndex);
      
      collector.push(topItemScrollTop + topItemHeight);
    }
  }
}

let ratio = 1;
const columns = 3;
 
window.onresize = function() {
  ratio = window.innerWidth / 375;
}
 
class MySource extends Source<MyDataType> {
  // 缓存每一项的 scrollHeight 和 column（处于第几列）
  private positions: {scrollHeight: number, column: number}[] = [];
  // 当前 n 列，每列最大 scrollHeight 集合
  private maxScrollHeightOfPerColumn: number[] = (new Array(co)).fill(0);
  // 列数
  private columns: number = columns;
  
  public getData(index: number): MyDataType {
    return {
      height: (index % 5 + 1) * 30
    }
  }
  
  public getHeight(index: number): number {
    // 这里乘一个系数，用于动态改变高度
    return ((this.getData(index) || {}).height || 0) * ratio;
  }
  
  // 宽度假设为平均分配
  public getWidth(): string {
    return 1 / this.columns * 100 + '%';
  }
  
  // 这里获取 x 方向偏移
  public getOffset(index: number): {x: string, y: number} {
    const position = this.positions[index];
    const x = position.column / this.columns * 100;
    
    return {
      x: x > 0 ? x + '%' : x + '',
      y: 0
    }
  }
  
  public getScrollTop(index: number): number {
    // 这里乘一个系数，用于动态改变高度时，scrollTop 也要跟着变
    // 之所以要减掉一个 height 是因为缓存的是 scrollHeight，包括了元素本身的高度
    return (this.position[index].scrollHeight - this.getData(index).height) * ratio;
  }
  
  // 此方法向 positions 中添加新的 position 缓存
  // 由于循环体中使用了 indexOf 和 Math.min，因此每次添加的 data 不宜过多
  private collectPositions(/*新增的数据*/datas: MyDataType[]) {
    const maxScrollHeightOfPerColumn = this.maxScrollHeightOfPerColumn;
    const length = datas.length;
    
    for (let i = 0;i < length;i++) {
      const minScrollHeight = Math.min(...maxScrollHeightOfPerColumn);
      const index = maxScrollHeightOfPerColumn.indexOf(minScrollHeight);
      const scrollHeight = minScrollHeight + datas[i].height;
      
      this.positions.push({
        scrollHeight,
        column: index
      });
      
      maxScrollHeightOfPerColumn[index] = scrollHeight;
    }
  }
}