好久没上CNode了，今天上来就来点干货吧 经常使用Vue的同学坑定知道eventBus吧，在一般的组件通信中使用这种方式还是很方便的。 下面分享一下我自己使用原生JS实现的一个eventHub，欢迎围观。。。 （唯一需要依赖的是lodash的map，不过也可以不用，喜欢的可以改造一下）

code：

// 使用原生JS实现事件消息通知类
// author: Victor - https://github.com/biggerV/something
// lodash is required

// class eventHub
(function(){
  function eventHub() {
    this.regEvents = []
    this.listenEvents = []
    this._trigerOnEvent = function (event){
      const that = this
      _.map(that.listenEvents, function(listenEventItem) {
        if(listenEventItem.event === event){
          _.map(that.regEvents, function(regEventItem) {
            if(regEventItem.event === event){
              listenEventItem.cb(regEventItem.msg)
            }
          })
        }
      })
    }
   this._hasEvent = function(events, event){
    let flag = false
    _.map(events, function(item){
      if(item.event === event){
        flag = true
      }
    })
    return flag
   }
  }
  
  eventHub.prototype.$emit = function (event, msg) {
    if ( !this._hasEvent(this.regEvents, event) ){
      this.regEvents.push({ event, msg})
    }
    this._trigerOnEvent(event)
  }
  
  eventHub.prototype.$on = function (event, cb) {
    if ( !this._hasEvent(this.listenEvents, event) ){
      this.listenEvents.push({ event, cb})
    } 
  }
  //export
  if(typeof exports === 'object'){
    modules.exports = eventHub
  }
  if(typeof window === 'object'){
    window.eventHub = eventHub
  }
})()



// try it now
var eventBus = new eventHub

// emit
function sayHi(){
  eventBus.$emit('say', 'hi')
}

function shout(){
  eventBus.$emit('shout', 'oh my god')
}

function showMyName(){
  eventBus.$emit('showMyName', {name: 'victor'})
}
// listen
eventBus.$on('shout', msg => alert(msg))
eventBus.$on('say', msg => alert(msg))
eventBus.$on('showMyName', msg => alert(msg.name))


<button onClick='sayHi()'>sayHi</button>
<button onClick='shout()'>shout</button>
<button onClick='showMyName()'>showMyName</button>

去Codepen查看效果 github OK，除了测试的代码，主代码其实不多。 主要就是注册、监听。写的如果不好请大家改正。

吐槽一下，变量命名果然是个大坑，最后还是中式英语。。。