IntersectionObserver + vue 前端数据曝光统计

Intersection Observer

w3c中的一个新兴api,兼容性并不好，IE浏览器全军覆没，详情可can i use。
作用：异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。具体可见文档

polyfill版本

鉴于兼容性问题，w3c提供了一个npm包，提供了polyfill版本。下载地址

    npm install intersection-observer

使用

废话不多说，上代码

创建一个文件，基于intersection observer进行封装

import 'intersection-observer';

IntersectionObserver.prototype.POLL_INTERVAL = 300; // 节流时间为300毫秒

class Exposure {
  // _observerArr = [];
  constructor(maxNum) {
    this.maxNum = maxNum;
    this._observer = null; // 监听对象
    this.exposureList = {}; // 存储监听对象想要操作的数据，例如统计数据
    this.init();
  }
  init() {
    console.log('exposure init!');
    const self = this;
    this._observer = new IntersectionObserver(function (entries, observer) {
      // console.log(entries);
      // console.log(observer);
      // console.log(self.exposureList);
      entries.forEach(entry => {
        const id = entry.target.attributes['data-id'].value || ''; // 可以通过id记录标示数据，id需唯一
        console.log('id', id);
        const exposureData = self.exposureList[id] || {};
        // 如果被监听元素显示在视窗内，并且有数据，没有开始时间，则添加开始时间，用作计算被监听元素在视窗停留的时间
        if (entry.isIntersecting && JSON.stringify(exposureData) !== '{}' && !exposureData.start_time) {
          self.exposureList[id] = Object.assign(exposureData, {
            start_time: Date.now(),
          });
        }
        // 如果监听元素，从视窗消失，并且有统计数据，并且有开始时间
        if (!entry.isIntersecting && JSON.stringify(exposureData) !== '{}' && exposureData.start_time) {
          const end_time = Date.now();
      // 如果被监听元素在视窗停留的时间大于300毫秒，则上报数据
          if (end_time - exposureData.start_time > 300) {
            mini.reportSCData('product_exposure', {
              ...exposureData,
              end_time,
            });
          }
          delete exposureData['start_time'];
          self.exposureList[id] = exposureData;
        }
      });
    }, {
      root: null, // 所监听对象的具体祖先元素，未传入值或值为`null`，则默认使用顶级文档的视窗。
      rootMargin: '0px 0px 0px 0px', // 计算交叉时添加到根(root)边界盒bounding box的矩形偏移量， 可以有效的缩小或扩大根的判定范围从而满足计算需要
      threshold: 0, // 一个包含阈值的列表, 按升序排列, 列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。
    });
  }
  add(el, value, vnode) {
    if (this._observer) {
      // 使IntersectionObserver开始监听一个目标元素。
      this._observer.observe(el);
      this.exposureList[el.dataset.id] = {
        ...value,
      };
    }
  }
  remove() {
    // 使IntersectionObserver对象停止监听工作
    this._observer.disconnect();
  }
}
export default Exposure;

创建自定义指令，添加监听元素

import Vue from 'vue';
import Exposure from '@/utils/exposure';
const exp = new Exposure();
Vue.directive('exposure', {
  bind(el, binding, vnode) {
    exp.add(el, binding.value);
  },
})

页面组件，使用指令

<div v-dwdExposure="exposureData" :data-id="id"></div>