背景

在一次项目中有大量的点击埋点事件，我下意识想到的就是封装一个方法，然后每个元素绑定一个点击事件，点击的时候调用封装好的方法。而我同事比我机制多了，他直接写了一个自定义指令去实现点击曝光

自定义指令

把点击埋点写成自定义指令的有点很明显就是降低耦合度，和业务逻辑分开了，彼此之间互不影响。写在dom上面参数控制，查找更改都方便

1. 自定义指令里面写点击事件

2. 知道自定义指令怎么写

3. 挂在在全局

4. 在页面中使用他

5. 测试

简单的说就是这几部走，但是实际写起来可比这复杂多了

具体代码实现

1. 点击事件的封装

export default class Click {
    add({el, params}) {
      // 点击的时候添加事件
        this.update({el, params});// 这里是为了解决动态赋值的问题
        el.addEventListener('click', (ev)=>{
            ev.stopPropagation();
            // 埋点事件
        });
    }
    update({el, params}){
        el.track_params = params // 埋点参数
    }
}

1. 自定义指令挂在事件 ``` import Click from ‘./click’ const cli = new Click() export default { mounted(el, binding) { const { arg=’click’,value } = binding arg.split(‘|’).forEach(item => { // 点击 if (item === ‘click’) { value && cli.add({ el, params:value }) } }) }, updated(el, binding) { const { arg=’click’,value } = binding arg.split(‘|’).forEach(item => { // 点击 if (item === ‘click’) { value && cli.update({ el, params:value }) } }) } };

3. 全局挂在

`app.directive('track', track);`

4. 页面中使用

<button class=”page-box-title-left” @click=”nextHotHandler” v-track=”{event_id:’xx’}”> 换一换 </button>

现在看起来好像很简单，但实际上同事开发的时候是费了好大一番劲的。我要像他学习，他的基础特别好，张老师好几次都和我夸他，并且要我多像他学习学习，他的基础好多，随便上手一个技术，它能够很快的学会做好，所有的疑难杂症在他那都不是事。加油

第一个和他合作做一个vue3的项目，在做的过程中，get到了很多很多的东西，他的很多思想都可好好学习，多多交流

## 总结
本来呢，没有打算写这篇文件的，看公众号的时候看到一篇文章[数据上报方式是否存在最优解？](https://mp.weixin.qq.com/s/_3OSxMErTD2ZMNK7kf02LA) 里面说了数据上报的几种方式
img/ajax/[Navigator.sendBeacon()](Navigator.sendBeacon()),我上家数据上报采用的是img发送请求的形式。看到这篇文章，于是就把之前学到的东西记录一下

## 新增
如果想实现自定义指令曝光也是没有问题的

interface TrackedHTMLElement extends HTMLElement { _exposedTrack?: TrackData _clickedTrack?: TrackData } const observer: IntersectionObserver = new IntersectionObserver( (entries) => { entries.forEach((entry) => { const { intersectionRatio } = entry const target = entry.target as TrackedHTMLElement if ( intersectionRatio === 1 && typeof target._exposedTrack === ‘object’ ) { // eslint-disable-next-line @typescript-eslint/no-floating-promises report(data, type) } }) }, { threshold: 1, }, ) ```

在自定义指令的mounted 时刻监听，beforeUnmount取消监听