老大喊我做一个项目埋点方案，我给他这么搞，做前端的都用得上！

class Monitor {
  constructor() {
    
  }
  /**
   * @description 初始化方法:
   *    extentData 用于传入基于业务的数据信息，
   *    router 是vue-router对象,这里既可以通过init传入，也可以在当前类模块直接引入，
   *    config 是配置信息
   * @param {*} { extentData = null, router = null, config = {} }
   * @memberof Monitor
   */
  init({ extentData = null, router = null, config = {} }) {
        //TODO
    // 这里可以做一些覆盖默认配置，初始化监听事件等操作
    let { vpt } = config
    this.vpt = vpt ? vpt : this.vpt
    this.uaHandler()
    
    // 这里下面会讲
    this.eventHandler = this.eventCallback.bind(this) // 关键
    document.addEventListener('click', this.eventHandler, true) 
  }
}

// 这里建议在项目封装的router管理模块使用
import Monitor from './monitor'

const monitor = new Monitor()
monitor.init({
  router: router,
  extentData: {
    userInfo: {
      userName:"张三",
      account:"13666666666"
    }
  }
})

 constructor() {
    // 发送队列的阈值
    this.vpt = 10

    // 事件节点类型限制
    this.limitNodeType = ['button']

    // 用户浏览器信息
    this.uaInfo = {}

    // 页面级别的数据队列
    this.pageDataQuene = []

    // 当前操作队列ID
    this.currentQueneId = null

    // 此属性用于保存bind返回的匿名函数
    this.eventHandler = null
 }

 /**
  * @description ua信息记录
  * @memberof Monitor
 */
uaHandler() {
  this.uaInfo = {
    userAgent: navigator.userAgent,
    dpiWidth: window.screen.width,
    dpiHeight: window.screen.height
  }
}

/**
* @description 生成guid，当前操作队列的唯一标识
* @returns {*}
* @memberof Monitor
*/
guid() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = (Math.random() * 16) | 0,
        v = c == 'x' ? r : (r & 0x3) | 0x8
    return v.toString(16)
  })
}

/**
   * @description 用于外部获取操作队列
   * @returns {*} Array[]
   * @memberof Monitor
   */
get() {
  return this.pageDataQuene
}

 /**
   * @description 用于清空队列
   * @memberof Monitor
   */
clear() {
  //TODO
  this.pageDataQuene = []
}

/**
   * @description 阈值监听，达到阈值就发送数据
   * @memberof Monitor
   */
vptHandler() {
  if (this.pageDataQuene.length >= this.vpt) {
    this.sendData()  // 这里用于走上传数据业务，上传完毕后清空数据，可根据实际情况进行处理
  }
}

router.afterEach(async (to) => {
  // 离开监听
  this.updateLeaveTime()
  // 阈值监听
  this.vptHandler()
    // 当前操作页面的唯一标识
  this.currentQueneId = this.guid()
  let initPageData = [
    {
      id: this.currentQueneId,
      path: to.path, // 因为当前项目目录结构和菜单路由命名是高度一致的，所以可以采用path进行记录
      uaInfo: this.uaInfo,
      pageInfo: {
        entryTime: this.getTime() //注意这里只有enterTime，更新leaveTime的时机交给
                    
                    
关注公众号：拾黑（shiheibook）了解更多
                    
赞助链接：
                    

                        关注数据与安全，洞悉企业级服务市场：https://www.ijiandao.com/

                        四季很好，只要有你，文娱排行榜：https://www.yaopaiming.com/

                        让资讯触达的更精准有趣：https://www.0xu.cn/