自定义指令实现埋点解耦

公司的埋点方式是引入sdk注册到全局后，在需要埋点的地方使用js调用进行埋点，埋点代码完全混合在业务代码里，有时甚至得专门加个事件和方法来埋点。经过一番研究后发现，使用自定义指令可以很好地实现埋点代码和业务代码的分离。

埋点主要有三种埋点，点击埋点，页面曝光埋点，DOM曝光埋点。页面曝光埋点可以直接配置自动监听无需在优化，主要是DOM曝光埋点和点击埋点需要优化。

1.点击埋点优化

在优化前，直接给元素添加点击事件，事件中发送，就像下面这样。

<router-link to="/" @click.native="trace">廉政反腐</router-link>

trace(){
    mcTracer.click(spm)   //mcTracer已经注册在全局
}

使用自定义指令优化后： 

Vue.directive('trace-click', {
  bind(el, binding) {
    el.addEventListener('click', function(){
      mcTracer.click(binding.value)
    })
  }
})

<router-link to="/" v-trace-click="'n.3386.6032.0'">廉政反腐</router-link>

只需在需要点击埋点的地方添加指令并传入spm。

2.曝光埋点优化

这个需修改sdk支持，只需提供和click一样的方式即可

let io;
Vue.directive('trace-exposure', {
  bind(el, binding) {
    let show;
    io = new IntersectionObserver((entries) => {
      show = entries[0].isIntersecting
      if (show) {
        setTimeout(function expose() {
          if (show) {
            console.log("曝光");
          }
        },3000)
      }
    })
    io.observe(el)
  },
  unbind(el, binding) {//解绑
    io.disconnect()
  }
})

<div class="work-world" v-trace-click="'n.3386.6049.0'" v-trace-exposure="'n.3386.6049.0'">