vue工程師必會封裝的埋點指令思路知識總結

更新時間：2021年12月16日 15:38:59 作者：出來吧皮卡丘

這篇文章主要給大家總結介紹了關于vue工程師必會封裝的埋點指令思路知識,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

前言

最近項目中需要做埋點功能，梳理下產(chǎn)品的埋點文檔，發(fā)現(xiàn)點擊埋點的場景比較多。因為使用的是阿里云sls日志服務去埋點，所以通過使用手動侵入代碼式的埋點。定好埋點的形式后，技術實現(xiàn)方法也有很多，哪種比較好呢？

稍加思考...

決定封裝個埋點指令，這樣使用起來會比較方便，因為指令的顆粒度比較細能夠直擊要害，挺適合上面所說的業(yè)務場景。

指令基礎知識

在此之前，先來復習下vue自定義指令吧，這里只介紹常用的基礎知識。更全的介紹可以查看官方文檔。

鉤子函數(shù)

bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用。
inserted：被綁定元素插入父節(jié)點時調(diào)用。
update：所在組件的 VNode 更新時調(diào)用。

鉤子函數(shù)參數(shù)

el：指令所綁定的DOM元素。
binding：一個對象，包含以下 property：
- value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
- arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 "foo"。
vnode：指令所綁定的當前組件vnode。

在這里分享個小技巧，鉤子函數(shù)參數(shù)中沒有可以直接獲取當前實例的參數(shù)，但可以通過 vnode.context 獲取到，這個在我之前的vue技巧文章中也有分享到，有興趣可以去看看。

正文

進入正題，下面會介紹埋點指令的使用，內(nèi)部是怎么實現(xiàn)的。

用法與思路

一般我在封裝一個東西時，會先確定好它該怎么去用，然后再從用法入手去封裝。這樣會令整個思路更加清晰，在定義用法時也可以思考下易用性，不至于封裝完之后因為用法不理想而返工。

埋點上報的數(shù)據(jù)會分為公共數(shù)據(jù)（每個埋點都要上報的數(shù)據(jù)）和自定義數(shù)據(jù)（可選的額外數(shù)據(jù)，和公共數(shù)據(jù)一起上報）。那么公共數(shù)據(jù)在內(nèi)部就進行統(tǒng)一處理，對于自定義數(shù)據(jù)則需要從外部傳入。于是有了以下兩種用法：

一般用法

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

自定義數(shù)據(jù)

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

可以看到埋點事件是通過 arg 的形式傳入，在此之前也看到有些小伙伴封裝的埋點事件是在 value 傳入。但我個人比較喜歡 arg 的形式，這種更能讓人一目了然對應的埋點事件是什么。

另外上報數(shù)據(jù)結構大致為：

{   
    eventName: 'clickBtn'
    userId: 1,
    userName: 'xxx',
    data: {
        other: 'xxx'
    }
}

eventName 是埋點對應的事件名，與之同級的是公共數(shù)據(jù)，而自定義數(shù)據(jù)放在 data 內(nèi)。

實現(xiàn)

定義一個 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)
    // 獲取公共數(shù)據(jù)的方法
    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
          // 自定義數(shù)據(jù)
          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 事件，其次處理上報數(shù)據(jù)。在封裝埋點指令時，公共數(shù)據(jù)通過baseData傳入，這樣可以增加通用性，第二個參數(shù)是上報平臺的一些配置參數(shù)。

在初始化時注冊指令：

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

function getBaseTrackData () {
  let userInfo = store.state.User.user_info
  // 公共數(shù)據(jù)
  const baseTrackData = {
    userId: userInfo.user_id, // 用戶id
    userName: userInfo.user_name // 用戶名
  }
  return baseTrackData
}

Vue.use(track, {baseData: getBaseTrackData})

Vue.use 時會自動尋找 install 函數(shù)進行調(diào)用，最終在全局注冊指令。

加點通用性

除了點擊埋點之外，如果有停留埋點等場景，上面的指令就不適用了。為此，可以增加手動調(diào)用的形式。

export default {
  install (Vue, {baseData = {}, slsOptions = {}) {
    // ...
    Vue.directive(Track.name, Track)
    // 手動調(diào)用
    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 方便進行調(diào)用。

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

總結

本文分享了封裝埋點指令的過程，封裝并不難實現(xiàn)。主要有兩種形式，點擊埋點通過綁定 DOM click 事件監(jiān)聽點擊上報，而其他場景下提供手動調(diào)用的方式。主要是想記錄下封裝的思路，以及使用方式。埋點實現(xiàn)也是根據(jù)業(yè)務做了一些調(diào)整，比如注冊埋點指令可以接受上報平臺的配置參數(shù)。畢竟人是活的，代碼是死的。只要能滿足業(yè)務需求并且能維護，怎么使用舒服怎么來嘛。

到此這篇關于vue工程師必會封裝的埋點指令思路知識總結的文章就介紹到這了,更多相關vue封裝埋點指令思路內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: