前言

最近項(xiàng)目中需要做埋點(diǎn)功能，梳理下產(chǎn)品的埋點(diǎn)文檔，發(fā)現(xiàn)點(diǎn)擊埋點(diǎn)的場(chǎng)景比較多。因?yàn)槭褂玫氖前⒗镌苨ls日志服務(wù)去埋點(diǎn)，所以通過使用手動(dòng)侵入代碼式的埋點(diǎn)。定好埋點(diǎn)的形式后，技術(shù)實(shí)現(xiàn)方法也有很多，哪種比較好呢？

稍加思考...

決定封裝個(gè)埋點(diǎn)指令，這樣使用起來會(huì)比較方便，因?yàn)橹噶畹念w粒度比較細(xì)能夠直擊要害，挺適合上面所說的業(yè)務(wù)場(chǎng)景。

指令基礎(chǔ)知識(shí)

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

鉤子函數(shù)

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

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

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

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

正文

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

用法與思路

一般我在封裝一個(gè)東西時(shí)，會(huì)先確定好它該怎么去用，然后再?gòu)挠梅ㄈ胧秩シ庋b。這樣會(huì)令整個(gè)思路更加清晰，在定義用法時(shí)也可以思考下易用性，不至于封裝完之后因?yàn)橛梅ú焕硐攵倒ぁ?/p>

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

一般用法

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

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

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

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

另外上報(bào)數(shù)據(jù)結(jié)構(gòu)大致為：

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

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

實(shí)現(xiàn)

定義一個(gè) 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})
          // 上報(bào)
          slsWebLogger.send(submitData)
          if (process.env.NODE_ENV === 'development') {
            console.log('Track slsWebLogger', submitData)
          }
        })
      }
    }
    Vue.directive(Track.name, Track)
  }
}

封裝比較簡(jiǎn)單，主要做了兩件事，首先是為綁定指令的 DOM 添加 click 事件，其次處理上報(bào)數(shù)據(jù)。在封裝埋點(diǎn)指令時(shí)，公共數(shù)據(jù)通過baseData傳入，這樣可以增加通用性，第二個(gè)參數(shù)是上報(bào)平臺(tái)的一些配置參數(shù)。

在初始化時(shí)注冊(cè)指令：

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 時(shí)會(huì)自動(dòng)尋找 install 函數(shù)進(jìn)行調(diào)用，最終在全局注冊(cè)指令。

加點(diǎn)通用性

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

export default {
  install (Vue, {baseData = {}, slsOptions = {}) {
    // ...
    Vue.directive(Track.name, Track)
    // 手動(dòng)調(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)
        }
      }
  }
}

這種掛載到原型的方式可以在每個(gè)組件實(shí)例上通過 this 方便進(jìn)行調(diào)用。

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

總結(jié)

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

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

最新評(píng)論