vue工程师必会封装的埋点指令思路知识总结

前言

最近项目中需要做埋点功能，梳理下产品的埋点文档，发现点击埋点的场景比较多。因为使用的是阿里云sls日志服务去埋点，所以通过使用手动侵入代码式的埋点。定好埋点的形式后，技术实现方法也有很多，哪种比较好呢？

稍加思考…

决定封装个埋点指令，这样使用起来会比较方便，因为指令的颗粒度比较细能够直击要害，挺适合上面所说的业务场景。

指令基础知识

在此之前，先来复习下vue自定义指令吧，这里只介绍常用的基础知识。更全的介绍可以查看官方文档。

钩子函数

bind：只调用一次，指令第一次绑定到元素时调用。
inserted：被绑定元素插入父节点时调用。
update：所在组件的 vnode 更新时调用。

钩子函数参数

el：指令所绑定的dom元素。
binding：一个对象，包含以下 property：
- value：指令的绑定值，例如：v-my-directive=”1 + 1″ 中，绑定值为 2。
- arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
vnode：指令所绑定的当前组件vnode。

在这里分享个小技巧，钩子函数参数中没有可以直接获取当前实例的参数，但可以通过 vnode.context 获取到，这个在我之前的vue技巧文章中也有分享到，有兴趣可以去看看。

正文

进入正题，下面会介绍埋点指令的使用，内部是怎么实现的。

用法与思路

一般我在封装一个东西时，会先确定好它该怎么去用，然后再从用法入手去封装。这样会令整个思路更加清晰，在定义用法时也可以思考下易用性，不至于封装完之后因为用法不理想而返工。

埋点上报的数据会分为公共数据（每个埋点都要上报的数据）和自定义数据（可选的额外数据，和公共数据一起上报）。那么公共数据在内部就进行统一处理，对于自定义数据则需要从外部传入。于是有了以下两种用法：

一般用法

<div v-track:clickbtn></div>

自定义数据

<div v-track:clickbtn="{other:'xxx'}"></div>

可以看到埋点事件是通过 arg 的形式传入，在此之前也看到有些小伙伴封装的埋点事件是在 value 传入。但我个人比较喜欢 arg 的形式，这种更能让人一目了然对应的埋点事件是什么。

另外上报数据结构大致为：

{   
    eventname: 'clickbtn'
    userid: 1,
    username: 'xxx',
    data: {
        other: 'xxx'
    }
}

eventname 是埋点对应的事件名，与之同级的是公共数据，而自定义数据放在 data 内。

实现

定义一个 track.js 的文件

import slsweblogger from 'js-sls-logger'

function getslswebloggerinstance (options = {}) {
  return new slsweblogger({
    host: '***',
    project: '***',
    logstore: `***`,
    time: 10,
    count: 10,
    ...options
  })
}

export default {
  install (vue, {basedata = {}, slsoptions = {}) {
    const slsweblogger = getslswebloggerinstance(slsoptions)
    // 获取公共数据的方法
    let getbasetrackdata = typeof basedata === 'function' ? basedata : () => basedata
    let basetrackdata = null
    const track = {
      name: 'track',
      inserted (el, binding) {
        el.addeventlistener('click', () => {
          if (!binding.arg) {
            console.error('track slsweblogger 事件名无效')
            return
          }
          if (!basetrackdata) {
            basetrackdata = getbasetrackdata()
          }
          basetrackdata.eventname = binding.arg
          // 自定义数据
          let trackdata = binding.value || {}
          const submitdata = object.assign({}, basetrackdata, {data: trackdata})
          // 上报
          slsweblogger.send(submitdata)
          if (process.env.node_env === 'development') {
            console.log('track slsweblogger', submitdata)
          }
        })
      }
    }
    vue.directive(track.name, track)
  }
}

封装比较简单，主要做了两件事，首先是为绑定指令的 dom 添加 click 事件，其次处理上报数据。在封装埋点指令时，公共数据通过basedata传入，这样可以增加通用性，第二个参数是上报平台的一些配置参数。

在初始化时注册指令：

import store from 'src/store'
import track from 'lib/directive/track'

function getbasetrackdata () {
  let userinfo = store.state.user.user_info
  // 公共数据
  const basetrackdata = {
    userid: userinfo.user_id, // 用户id
    username: userinfo.user_name // 用户名
  }
  return basetrackdata
}

vue.use(track, {basedata: getbasetrackdata})

vue.use 时会自动寻找 install 函数进行调用，最终在全局注册指令。

加点通用性

除了点击埋点之外，如果有停留埋点等场景，上面的指令就不适用了。为此，可以增加手动调用的形式。

export default {
  install (vue, {basedata = {}, slsoptions = {}) {
    // ...
    vue.directive(track.name, track)
    // 手动调用
    vue.prototype.slsweblogger = {
      send (trackdata) {
        if (!trackdata.eventname) {
          console.error('track slsweblogger 事件名无效')
          return
        }
        const submitdata = object.assign({}, getbasetrackdata(), trackdata)
        slsweblogger.send(submitdata)
        if (process.env.node_env === 'development') {
          console.log('track slsweblogger', submitdata)
        }
      }
  }
}

这种挂载到原型的方式可以在每个组件实例上通过 this 方便进行调用。

export default {
    // ...
    created () {
        this.slsweblogger.send({
            //...
        })
    }
}

总结

本文分享了封装埋点指令的过程，封装并不难实现。主要有两种形式，点击埋点通过绑定 dom click 事件监听点击上报，而其他场景下提供手动调用的方式。主要是想记录下封装的思路，以及使用方式。埋点实现也是根据业务做了一些调整，比如注册埋点指令可以接受上报平台的配置参数。毕竟人是活的，代码是死的。只要能满足业务需求并且能维护，怎么使用舒服怎么来嘛。

到此这篇关于vue工程师必会封装的埋点指令思路知识总结的文章就介绍到这了,更多相关vue封装埋点指令思路内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！

黄山市民网：https://www.huangshanshimin.com/

目录

前言

指令基础知识

钩子函数

钩子函数参数

正文

用法与思路

实现

加点通用性

总结

相关文章