其他分享
首页 > 其他分享> > js的发布订阅模式

js的发布订阅模式

作者:互联网

function Event() {
  this.handlers = {}
}

Event.prototype.$on = function (type, eventName) {
  if (!(type in this.handlers)) {
    this.handlers[type] = []

  }
  this.handlers[type].push(eventName)
}

Event.prototype.$emit = function (type, ...args) {
  if (!(type in this.handlers)) {
    throw new Error('无效事件1')

  }
  this.handlers[type].forEach(handler => {
    handler(args)
  })

}

Event.prototype.$closeEvent = function (type, eventName) {
  if (!(type in this.handlers)) {
    throw new Error('无效事件2')
  }

  if (!eventName) {
    // 没有传入方法名称
    // 直接删除数组
    delete this.handlers[type]

  } else {
    // 找到这个事件在数组的索引
    let eventNameIndex = this.handlers[type].findIndex(item => item === eventName)
    // 没有索引报错

    if (eventNameIndex === undefined) {
      throw new Error('无效事件3')
    }
    // 删除该事件
    this.handlers[type].splice(eventNameIndex, 1)
     // type类型数组长度为0,直接删除类型数组,释放空间
    if (this.handlers[type].length === 0) {
      delete this.handlers[type]
    }

  }


}

let eventceshi = new Event()
eventceshi.$on('click1', function (params) {
  console.log('click1 ' + params)
})
// eventceshi.$closeEvent('click1')
eventceshi.$emit('click1', '1的参数')

标签:function,订阅,handlers,模式,js,eventName,type,Event,click1
来源: https://blog.csdn.net/xiaoshunshi/article/details/123104256