likes
comments
collection
share

前端埋点:如何拦截Message的弹窗信息?

作者站长头像
站长
· 阅读数 10

这里总结了三种方式:

1.apply

2.Object.defineProperty

3.proxy (补充)

下面会以同一个案例分析三种拦截的实现方式:拦截Message的error弹窗信息

1.apply

const tempError = Message.error
 Message.error = function (e) {
 
    // e为我们需要拦截的message数据
    console.log(e)
 
    tempError.apply(this, arguments);
}

1.1 apply的作用是什么?

apply的作用是改变this指向,让我们tempError的this指向和原生的Message.error 的this指向一样。

1.2 可是apply在这个函数拦截里面有什么作用呢?

也许在其他的函数拦截里面有作用,但是在这个函数拦截里面,似乎没什么作用,因为我们不需要获取到this指向里面的其他值!

所以,我们可以这样写:

const tempError = Message.error
 Message.error = function (e) {
 
    // e为我们需要拦截的message数据
    console.log(e)
 
    tempError(e)
}

2.Object.defineProperty

let oldMessageError = Message.error
Object.defineProperty(Message, 'error', {
  get(){
    return (message)=>{
 
    // message为我们需要拦截的message数据
      console.log(message)
 
      return oldMessageError(message)
    }
  }
})

我们不仅仅需要拦截Message的error方法,还需要拦截success,info等方法,我们可以使用 Object.defineProperties 进行多个属性拦截:

let oldMessageError = Message.error
let oldMessageSuccess = Message.success
Object.defineProperties(Message, {
 error:{
   get(){
     return (message)=>{
       // message为我们需要拦截的message数据
       console.log(message, 'error...')
       return oldMessageError(message)
     }
   }
 },
  success:{
    get(){
      return (message)=>{
        // message为我们需要拦截的message数据
        console.log(message, 'success...')
        return oldMessageSuccess(message)
      }
    }
  }
})

3.Proxy

Message.error = new Proxy(Message.error, {
  apply(target,ctx,args) {
 
    // args 为我们需要拦截的message数据
    console.log(args)
 
    return target(...args)
  }
});

Proxy 低版本浏览器不支持,斟酌使用!