技术沉淀汇总

[XingGuoZM]

• 命令式队列管理的弹窗：
命令式队列管理弹窗、
promisify弹窗
• 无限滚动列表/瀑布流：
长列表与视频、
长列表与埋点、
long-list
• 时长统计脚本
• 用户行为跟踪
• 特殊字体动态打包webpack plugin
fontmin
• 数据预请求
• 复用组件与自定义hook
进度条组件
h5头部适配组件
自定义复用hook

vue 树形表格、自定义指令v-drag,自由拖动
node工具，json与excel文件互转、批量修改json文件
swiper.js在项目中的应用、anime.js在项目中的应用

[XingGuoZM]

无限滚动（虚拟列表）

• 可视区域第一条startIndex
• 渲染列表最后一条endIndex
• 列表偏移量offset
• 列表展示items数量showCount
• 每个item的高度itemHeight

滚动的过程中不断更新startIndex和offset，如果滚动到最后一条（endIndex.current >= startIndex.current + showCount - 1）时加载下一页，加载完成之后，更新endIndex

// 当前滚动位置
const scrollTop = scroller.scrollTop;
// 滚动高度超过一个itemHeight
if (Math.abs(scrollTop - preScrollTop.current) >= itemHeight) {
  // 此时可视区域第一条item的索引
  startIndex.current = Math.floor(scrollTop / itemHeight);
  // 最后一条item索引
  if (endIndex.current >= startIndex.current + showCount - 1) {
    // loadMore结束之后，更新endIndex
    loadMore();
  }
  //偏移
  offsetRef.current = scrollTop - (scrollTop % itemHeight);
  // 缓存当前scrollTop
  preScrollTop.current = scrollTop;
}

[XingGuoZM]

时长统计脚本

1. 统计开始的时机，页面加载过程的哪个阶段开始，document.readyState