虚拟滚动之原理及其封装

const createElements = count => {    const start = new Date();    for (let i = 0; i < count; i++) {        const element = document.createElement('div');        element.appendChild(document.createTextNode('' + i));        document.body.appendChild(element);    }
    setTimeout(function () {        console.log('渲染耗时：',new Date() - start);    }, 0);};
document.querySelector('#btn').addEventListener('click', e => createElements(10000))

const start = Date.now();// bala bala...console.log(Date.now() - start);

const vlist = new Vlist({    itemHeight: 65,    container: document.querySelector("#list"),    containerContent:document.querySelector('.ul'),    maxHeight: document.documentElement.clientHeight,    isDebounce:true,    initData: data,    render: function (itemData, index) {        return `<div class="item">                    <div data-index="${index}" class="left">                    </div>                    <div class="right">                        <div class="title">${itemData.id}</div>                        <div class="price">${itemData.name}</div>                        <div class="price">${itemData.address}</div>                    </div>                </div>`    },    itemEventHandlers:[        {            eventTargetClass:'left',            eventType:'click',            handler:function(e){                console.log(e.target)            }        }    ]});

constructor(opts) {    // mixin    this.mixin(opts);
    const {        initData,        isDebounce    } = opts;
    //初始化数据    if (initData) {        this.addData(initData);    }
    this.scrollEventBind = this.scrollEvent.bind(this);
    // 绑定滚动事件    if (isDebounce) {        this.container.addEventListener("scroll", (e) => {            this.debounce(this.scrollEventBind, 40);        });    } else {        this.container.addEventListener("scroll", this.scrollEventBind, false);    }
}

/** * 配置mixin * @param {*} opts  */mixin(opts) {    let {        itemHeight,        container,        containerContent,        maxHeight,        render,        initData,        itemEventHandlers,        isDebounce    } = opts;
    // 计算最大高度，否则取设备高度     maxHeight = maxHeight ? maxHeight : document.documentElement.clientHeight;
    const _this = {        itemHeight, // 每项高度        container,  // 滚动容器        containerContent, // 滚动内容        maxHeight, // 出现滚动条的高度        showItemCount: Math.ceil(maxHeight / itemHeight) + 1, // 视图区域显示item的个数        items: [], // 可见列表项        startIndex: 0, // 第一个item索引        render, // 渲染每一项的函数        data: [], // 列表数据        itemEventHandlers, //事件处理        isDebounce // 性能优化点：防抖    }
    Object.keys(_this).forEach(key => {        this[key] = _this[key];    })}

/** * 添加数据 * @param {*} data 所需添加的数据，在原基础上加 */addData(data) {    let isInit = this.data.length == 0;    this.data = this.data.concat(data);    const realHeight = parseInt(this.data.length * this.itemHeight);    if (realHeight > this.maxHeight) {        // 出现滚动条        this.showItemCount = Math.ceil(this.maxHeight / this.itemHeight) * 3;//视图区域显示item的个数        this.container.style.height = this.maxHeight + 'px';    } else {        // 支撑起内容高度，不触发滚动条        this.container.style.height = realHeight + 'px';        this.showItemCount = this.data.length + 1;//视图区域显示item的个数    }
    this.containerContent.style.height = realHeight + 'px';
    if (isInit) {        this.initList();    }}

/*** 初始化列表* 只根据startIndex渲染可视区范围的数据*/initList() {    const count = this.data.length < this.showItemCount ? this.data.length : this.showItemCount;    for (let i = 0; i < count; i++) {        const item = this.renderItem({            index: i        });        this.containerContent.appendChild(item.dom);        this.items.push(item);    }}
/** * 渲染单行容器样式 * @param {Object} dom内容   * 最好是以template模板的形式，并加上事件 */renderItem(item) {    const index = item.index;
    // 此处应该配置    const itemDom = item.dom ? item.dom : document.createElement("DIV");    const itemData = this.data[index];    // 填充    itemDom.innerHTML = this.render(itemData, index);
    // 绑定事件，目前只支持item内class选择器    this.itemEventHandlers.forEach((x, i) => {        const targets = itemDom.querySelectorAll(`.${x.eventTargetClass}`);        for (let j = 0; j < targets.length; j++) {            targets[j].addEventListener(x.eventType, e => x.handler(e));        }    });
    // 设置高度    itemDom.style.position = "absolute";    itemDom.style.top = (index * this.itemHeight) + "px";    itemDom.style.height = this.itemHeight + "px";    itemDom.style.width = "100%";    itemDom.style.overflow = "hidden";    item.dom = itemDom;    item.dom.setAttribute("index", index);    item.top = index * this.itemHeight;    return item;}

/*** 滚动事件*/scrollEvent() {    const containerScrollTop = this.container.scrollTop;
    const { itemHeight, startIndex, maxHeight } = this;
    // 滚动触发计算    const fakeStartIndex = Math.floor(containerScrollTop / itemHeight) - Math.ceil(maxHeight / itemHeight) - 1;    let startIndexNew = fakeStartIndex >= 0 ? fakeStartIndex : 0;    const maxStartIndex = this.data.length - this.showItemCount + 1;    startIndexNew = startIndexNew > maxStartIndex ? maxStartIndex : startIndexNew;
    if (containerScrollTop < 0) return; // ios兼容    if (startIndexNew === startIndex) return; // android兼容
    const scrollOver = startIndexNew + this.showItemCount - 1 >= this.data.length;    const renderOver = startIndexNew - startIndex === 1;
    // 如果到底没有渲染完就再渲染一次    if (scrollOver && renderOver === false) {        startIndexNew--;    }
    this.diffRender(startIndex, startIndexNew);    this.startIndex = startIndexNew;}

/** * startIndex比较渲染 * @param {*} startIndex  * @param {*} startIndexNew  */diffRender(startIndex, startIndexNew) {    const showItemCount = this.showItemCount;
    const items = this.items;    const moveCount = Math.abs(startIndex - startIndexNew);
    if (moveCount >= showItemCount) {        // 全部渲染        items.forEach((item, idx) => {            item.index = startIndexNew + idx;            this.renderItem(item);        })    } else {        // 部分渲染        if (startIndex - startIndexNew > 0) {            // 往上滚            for (let i = 1; i <= moveCount; i++) {                let item = items[showItemCount - i];                item.index = item.index - showItemCount;                this.renderItem(item);            }            this.items = items.splice(showItemCount - moveCount, moveCount).concat(items);        } else {            for (let i = 0; i < moveCount; i++) {                const item = items[i];                item.index = item.index + showItemCount;                this.renderItem(item);            }            this.items = items.concat(items.splice(0, moveCount));        }    }}