js实现一个基本的Event Bus

最新推荐文章于 2025-07-09 16:48:37 发布

原创最新推荐文章于 2025-07-09 16:48:37 发布 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

101 篇文章

订阅专栏

本文深入探讨了组件通信的实现机制，通过一个简单的EventEmitter类，解释了如何在不同组件间触发与监听事件，展示了基本的事件驱动编程模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 组件通信，一个触发与监听的过程
class EventEmitter {
  constructor () {
    // 存储事件
    this.events = this.events || new Map()
  }
  // 监听事件
  addListener (type, fn) {
    if (!this.events.get(type)) {
      this.events.set(type, fn)
    }
  }
  // 触发事件
  emit (type) {
    let handle = this.events.get(type)
    handle.apply(this, [...arguments].slice(1))
  }
}

// 测试
let emitter = new EventEmitter()
// 监听事件
emitter.addListener('ages', age => {
  console.log(age)
})
// 触发事件
emitter.emit('ages', 18)  // 18