我的个人博客

简单的事件发射器/发布订阅模式

Published on
Published on
/2 mins read/---

简单的事件发射器或发布订阅模式

event-emitter.js
class Event {
  constructor() {
    this.events = {}
  }
 
  subscribe(event, handler) {
    this.events[event] = this.events[event] || []
    this.events[event].push(handler)
    return () => this.unSubscribe(event, handler)
  }
 
  unSubscribe(event, handler) {
    let handlers = this.events[event]
    if (handlers && Array.isArray(handlers)) {
      for (let i = 0; i < handlers.length; i++) {
        if (handlers[i] === handler) {
          handlers.splice(i, 1)
          break
        }
      }
    }
  }
 
  emit(event, ...args) {
    ;(this.events[event] || []).forEach((handler) => {
      handler(...args)
    })
  }
}

使用方法

main.js
// 在你的应用中创建一个全局实例
let globalEvent = new Event()
 
let handler1 = (data) => console.log(`handler1(): FOO事件发出,数据为: ${data}`)
let handler2 = (data) => console.log(`handler2(): FOO事件发出,数据为: ${data}`)
 
// 订阅事件
globalEvent.subscribe('FOO', handler1)
globalEvent.subscribe('FOO', handler2)
 
// 在需要时发出事件
globalEvent.emit('FOO', 'foo')
 
// 预期输出:
// handler1(): FOO事件发出,数据为: foo
// handler2(): FOO事件发出,数据为: foo
 
// 取消订阅事件
globalEvent.unSubscribe('FOO', handler2)
 
// 然后
globalEvent.emit('FOO', 'bar')
 
// 预期输出:
// handler1(): FOO事件发出,数据为: bar