03事件模型-发布订阅模式

vue加入发布订阅模型:就是解耦

发布订阅模式:(形式不限于函数,可以是函数或者对象等)

中间的全局容器,用来存储可以被触发的东西(函数、对象)

需要有一个方法,可以往容器里面传入东西(函数,对象等)

需要有一个方法,可以将容器里面的东西取出来使用(函数调用,对象方法的调用)

class Event {
  constructor() {
    this.list = {} //{key1:[f1,f2],key2:[]}
  }
  on(type, handler) {
    this.list[type] = (this.list[type] || []).concat(handler)
  }
  emit(type, ...data) {
    const fns = this.list[type]
    if (!fns || (!fns.length)) return false
    fns.forEach(fn => fn.apply(this, data))
  }
  off(type, handler) {
    const fns = this.list[type]
    if (!type && !handler) this.list = {}  // 移除所有事件 event.off() 删除所有事件 
    else if (!fns || !fns.length) return false //event.off('乱传的type')
    else if (type && !handler) {
      delete this.list[type] //event.off('click') //删除所有的click事件
    } else { //传入两个参数 event.off("click",handler)
      this.list[type] = fns.filter(fn => fn !== handler)
    }

  }
}

原文地址:https://www.cnblogs.com/xiaoliziaaa/p/15017428.html