IntersectionObserver API 实现广告位曝光埋点

// observe-exposure.js

/**
 * v-exposure="callback"
 * v-exposure="{callback,time:2000,disabled:false,once:false,intersection:{root:null,rootMargin:'0',threshold:0}}"
 * @description 曝光指令（漏出面积比例 and 达到多长时间）
 * @param {function} callback(entry) 曝光回调
 * @param {object} entry IntersectionObserverEntry对象
 * @param {number} time @default 2000 曝光持续时间
 * @param {boolean} disabled @default false 是否禁用（true->false 可以重新开启曝光检测，使用方式：在callback时置为true，当需要重新观察时改为false）
 * @param {boolean} once @default false 只曝光一次
 * @param {object} intersection IntersectionObserver 的 option
 */

import 'intersection-observer' // 兼容 polyfill
import { processCallbackOptions, deepEqual } from './util.js'
IntersectionObserver.prototype['THROTTLE_TIMEOUT'] = 300 // 兼容时 节流 300ms触发一次

class Exposure {
  constructor (el, options, vnode) {
    this._el = el // 被观察元素
    this._options = null
    this._observer = null // 观察者
    this._frozen = false // 只触发一次曝光回调（设置了once）
    this._timer = null // 定时器ID
    this._callback = null // 曝光回调
    this._oldResult = undefined // 出现 or 隐藏 (对于root)
    this.createObserver(options, vnode) // 创造观察者
  }

  // 曝光交集边界值
  get _threshold () {
    return this._options.intersection?.threshold ?? 0
  }

  /**
   * 创造观察者
   * 1. 初始化
   * 2. 指令入参更新
   */
  createObserver (options, vnode) {
    if (this._observer) {
      // 销毁之前的观察者
      this.destroyObserver()
    }
    if (this._frozen) {
      // 设置了once，且已经曝光
      return
    }
    // 处理option（直传callback和对象模式）
    this._options = processCallbackOptions(options)
    this._callback = (entry) => {
      // 曝光回调
      this._options.callback(entry)
      if (this._options.once) {
        // 设置了once，停止观察
        this.destroyObserver()
        this._frozen = true
      }
    }
    this._oldResult = undefined
    this._observer = new IntersectionObserver(entries => {
      let entry = entries[0]
      const result = entry.isIntersecting && entry.intersectionRatio >= this._threshold
      if (result !== this._oldResult) {
        this._oldResult = result
        if (result) {
          // 显示（对于root）切换
          this._timer = setTimeout(() => {
            this._callback(entry)
          }, this._options.time ?? 2000)
        } else {
          // 隐藏（对于root）切换
          clearTimeout(this._timer)
          this._timer = null
        }
      }
    }, this._options.intersection)
    // 渲染完成后观察
    vnode.context.$nextTick(() => {
      this._observer.observe(this._el)
    })
  }
  // 销毁观察者
  destroyObserver () {
    if (this._observer) {
      this._observer.disconnect()
      this._observer = null
    }
    if (this._timer) {
      clearTimeout(this._timer)
      this._timer = null
    }
  }

  /**
   * 解冻
   * 可以使设置了once的已曝光元素重新接受曝光检测
   */
  resetFrozen () {
    this._frozen = false
  }
}

export default {
  bind (el, { value }, vnode) {
    if (!value || value?.disabled) return
    if (typeof value === 'function' || ((value instanceof Object) && typeof value.callback === 'function')) {
      const observer = new Exposure(el, value, vnode)
      el._vue_exposure = observer
    } else {
      console.warn('[v-exposure] You should pass in a value of type function or an object containing a callback of type function. ')
    }
  },
  update (el, { value, oldValue }, vnode) {
    // 值未改变（vnode更新）
    if (deepEqual(value, oldValue)) return
    let observer = el._vue_exposure
    if (observer && (!value || value?.disabled)) {
      observer.destroyObserver()
      return
    }
    if (typeof value === 'function' || ((value instanceof Object) && typeof value.callback === 'function')) {
      if (observer) {
        // 更新指令传值
        if (value?.disabled === false && oldValue.disabled === true) {
          // 如果设置了once，只有disabled被修改为false，才会解除冻结
          // 之前未曝光的不受disabled修改为false影响，会被createObserver()更新曝光设置（重新生成新的观察者）
          // 之前已经曝光的会重新接受曝光检测，也会更新新的option创建观察者
          observer.resetFrozen()
        }
        observer.createObserver(value, vnode)
      } else {
        observer = new Exposure(el, value, vnode)
        el._vue_exposure = observer
      }
    } else {
      console.warn('[v-exposure] You should pass in a value of type function or an object containing a callback of type function. ')
      observer && observer.destroyObserver()
    }
  },
  unbind (el) {
    const observer = el._vue_exposure
    if (observer) {
      observer.destroyObserver()
      delete el._vue_exposure
    }
  }
}

// util.js

// 处理option（直传callback和对象模式）
export function processCallbackOptions (value) {
  let options
  if (typeof value === 'function') {
    options = {
      callback: value
    }
  } else {
    options = value
  }
  return options
}

// 判断两值是否相等
export function deepEqual (val1, val2) {
  if (val1 === val2) return true
  if (typeof val1 === 'object') {
    for (const key in val1) {
      if (!deepEqual(val1[key], val2[key])) {
        return false
      }
    }
    return true
  }
  return false
}