class Event {
    constructor() {
      this.event = {},
      this.onceFn = []
    }
  
    on(type, fn) {
      if (!this.event[type]) {
        this.event[type] = []
      }
      this.event[type].push(fn)
    }
  
    emit(type, data) {
      this.event[type].forEach((item) => {
        item(data)
      })
    }
  
    off(type, fn) {
      this.event[type] = this.event[type].filter((item) => item !== fn)
    }
  
    once(type, fn) {
      if (this.onceFn.includes(fn)) {
        return
      }
      this.onceFn.push(fn)
      this.on(type, fn)
    }
  
  }

在上述代码中我们使用类构造函数创建了一个Event函数,在构造函数中我们创建了四个函数on(),emit(),off(),once().且在 constructor()创建了一个对象this.evnet用于存储时间及其对应的处理器列表,数组this.onceFn用于存储只执行一次的函数.那么我们创建的四个函数分别时什么作用呢？

on()是用于订阅事件的.那么这个订阅的思路是如何实现的呢？on()接收两个参数type和fn,其中type表示的是事件类型,fn是事件函数。if (!this.event[type])在对象中如果不存在该属性,this.event[type] = []就添加该属性并把该属性的值设置成一个数组,最后将该事件type的函数存到数组中.这就是on()的作用

emit()发布订阅,接收两个参数type，data这个data是代表函数中的参数,我们使用forEach循环遍历this.evnet[type]数组并执行函数.

off()这是取消订阅事件,它接收参数的意义和on()其实是一模一样的我们使用filter过滤器去除事件类型为type中的某一个函数fn并重新把它赋值给this.event[type].这样的话我们就是实现了取消订阅.

once()也是接收两个参数.但是它的作用是保证同一事件函数值被调用一次,防止被多次调用.首先我们会检查在数组onceFn中是否存在只需要执行一个的函数,如果存在的话,就直接return返回就就不会走下一步.如果存在,就先将该函数添加到数组onceFn中,然后调用on()订阅该事件.