手写事件总线 EventEmitter（发布订阅模式） ​

// 发布者
class Publisher {
  constructor(name, context) {
    this.name = name
    this.context = context
  }
  publish(type, content) {
    this.context.publish(type, content)

    // 当发布者发布消息时，通过调度中心，通知所有订阅者
    this.context.notify(type)
  }
}

// 订阅者
class Subscriber {
  constructor(name, context) {
    this.name = name
    this.context = context
  }
  subscribe(type, cb) {
    this.context.subscribe(type, cb)
  }
}

// 发布订阅中心
class PubSub {
  constructor() {
    this.messages = {}
    this.listeners = {}
  }
  publish(type, content) {
    const existContent = this.messages[type]
    if (!existContent) {
      this.messages[type] = []
    }
    this.messages[type].push(content)
  }
  subscribe(type, cb) {
    const existListener = this.listeners[type]
    if (!existListener) {
      this.listeners[type] = []
    }
    this.listeners[type].push(cb)
  }
  notify(type) {
    const messages = this.messages[type]
    const subscribers = this.listeners[type] || []
    subscribers.forEach((cb) => cb(messages))
  }
}

// testing
const TYPE_MUSIC = 'music'
const TYPE_MOVIE = 'movie'
const TYPE_NOVEL = 'novel'

const pubsub = new PubSub()

const publisherA = new Publisher('publisherA', pubsub)
const publisherB = new Publisher('publisherB', pubsub)
const publisherC = new Publisher('publisherC', pubsub)

publisherA.publish(TYPE_MUSIC, 'we are young')
publisherA.publish(TYPE_MOVIE, 'the silicon valley')
publisherB.publish(TYPE_MUSIC, 'stronger')
publisherC.publish(TYPE_MOVIE, 'imitation game')

const subscriberA = new Subscriber('subscriberA', pubsub)
subscriberA.subscribe(TYPE_MUSIC, (res) => {
  console.log('subscriberA received', res)
})
const subscriberB = new Subscriber('subscriberB', pubsub)
subscriberB.subscribe(TYPE_NOVEL, (res) => {
  console.log('subscriberB received', res)
})
const subscriberC = new Subscriber('subscriberC', pubsub)
subscriberC.subscribe(TYPE_MOVIE, (res) => {
  console.log('subscriberC received', res)
})

pubsub.notify(TYPE_MUSIC)
pubsub.notify(TYPE_MOVIE)
pubsub.notify(TYPE_NOVEL)

// 事件总线（发布订阅模式）
class EventEmitter {
  constructor() {
    this.events = {}
  }
  on(name, fn) {
    const fns = this.events[name] || []
    fns.push({
      name,
      fn
    })
    this.events[name] = fns

    return this
  }
  off(name, fn) {
    const fns = this.events[name] || []

    const liveFns = []
    for (const item of fns) {
      if (item.fn !== fn && item.fn._ !== fn) {
        liveFns.push(item.fn)
      }
    }
    this.events[name] = liveFns

    return this
  }
  emit(name, ...rest) {
    // 创建副本，如果回调函数内继续注册相同事件，会造成死循环
    const fns = [...(this.events[name] || [])]

    for (const item of fns) {
      item.fn(...rest)
    }

    return this
  }
  once(name, fn) {
    const self = this

    function listener() {
      self.off(name, fn)
      fn(...arguments)
    }
    listener._ = fn

    return this.on(name, listener)
  }
}

// testing
const eventBus = new EventEmitter()

const fn1 = (name, age) => {
  console.log(`${name}'s age is ${age}`)
}
const fn2 = (name, age) => {
  console.log(`hello, ${name}'s age is ${age}`)
}
eventBus.on('say', fn1)
eventBus.on('say', fn1)
eventBus.once('say', fn2)
eventBus.emit('say', 'jack', 20)

// 源码 https://github.com/scottcorgan/tiny-emitter/blob/master/index.js

function E() {
  // Keep this empty so it's easier to inherit from
  // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
}

E.prototype = {
  on: function (name, callback, ctx) {
    var e = this.e || (this.e = {})

    ;(e[name] || (e[name] = [])).push({
      fn: callback,
      ctx: ctx
    })

    return this
  },

  once: function (name, callback, ctx) {
    var self = this
    function listener() {
      self.off(name, listener)
      callback.apply(ctx, arguments)
    }

    listener._ = callback
    return this.on(name, listener, ctx)
  },

  emit: function (name) {
    var data = [].slice.call(arguments, 1)
    var evtArr = ((this.e || (this.e = {}))[name] || []).slice()
    var i = 0
    var len = evtArr.length

    for (i; i < len; i++) {
      evtArr[i].fn.apply(evtArr[i].ctx, data)
    }

    return this
  },

  off: function (name, callback) {
    var e = this.e || (this.e = {})
    var evts = e[name]
    var liveEvents = []

    if (evts && callback) {
      for (var i = 0, len = evts.length; i < len; i++) {
        if (evts[i].fn !== callback && evts[i].fn._ !== callback)
          liveEvents.push(evts[i])
      }
    }

    // Remove event from queue to prevent memory leak
    // Suggested by https://github.com/lazd
    // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910

    liveEvents.length ? (e[name] = liveEvents) : delete e[name]

    return this
  }
}

module.exports = E
module.exports.TinyEmitter = E