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工程師必會封裝的埋點指令有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！