vue项目中使用ts自定义装饰器实现无侵入埋点

前言

日前在公司项目中，有一个BI埋点的需求，由于项目刚好是使用ts开发的， 就想到了使用装饰器这一利器来实现， 优点是，对原有代码做到最小的侵入性。为什么是最小的侵入性还不是零侵入性呢？是因为日前还没有使用装饰器+axios改造完成，导致有些接口的报错上传，仍然要侵入原有代码。

实现

之前的项目是基于vue全家桶+ts开发的， 因此不需要特别去开启装饰器。如果ts项目未开启装饰器的话，是要先在tsconfig里面开启装饰器

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

开启之后就是埋点装饰器的具体实现了， 具体实现如下

export function SEND_EVENT(eventName: string, param: any = {}) {
  return function factory(target: any, propKey: string, descriptor: PropertyDescriptor) {
    const fn = descriptor.value // 保存原函数
    descriptor.value = funciton fn(...args: any[]) {
      // --> 在这里调用埋点方法
      fn.call(this, ...args) // 调用原函数
    }
  }
}

至此一个机遇ts装饰器的埋点就实现了，这里要特别注意的，几处匿名（这里因为eslint规则命名了）函数切不可改为箭头函数，因为vue诡异的this机制，最后执行原函数也不能像普通装饰器直接call target。

用法

使用就比较容易了，比如我们要埋点用户点击了某按钮

@Component
export default class SomeComponent extends Vue {
  // ....

  @SEND_EVENT('btnClick') // 埋点成功
  handlerBtnClick() {
    // .... do sth
  }
}

从使用上我们可以看出， 增加埋点对原业务代码无任何侵入， 只需要在需要埋点的事件上添加装饰器传入埋点事件即可，当然需要传入原函数的参数也简单, 只需要在call原方法之前把参数传给埋点方法即可，此时应根据需要传入相应的值的key