vue工程师必会封装的埋点指令有哪些

本篇内容主要讲解“Vue工程师必会封装的埋点指令有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue工程师必会封装的埋点指令有哪些”吧!

指令基础知识

在此之前，先来复习下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({            //...        })    }}

到此，相信大家对“vue工程师必会封装的埋点指令有哪些”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！