event-bus 事件总线

原创已于 2025-01-30 20:31:33 修改 · 116 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

于 2023-04-26 11:40:46 首次发布

JavaScript 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了如何创建一个简单的EventBus类，用于在不同文件和组件之间进行通信。通过实例化EventBus，可以注册监听器(on)并在合适的时候触发(emit)事件，如navclick事件，使得不同模块能协同工作。

事件总线：event-bus，跨文件、跨组件进行通信。

手写事件总线：

// 创建 EventBus 事件总线类
class EventBus {
	constructor() {
		this.eventMap = {}
	}

	// 保存 on 方法中的 callback 回调函数
	on(eventName, callback) {
		let eventCallbacks = this.eventMap[eventName]
		!eventCallbacks && (eventCallbacks = [])
		eventCallbacks.push(callback)

		this.eventMap[eventName] = eventCallbacks
	}

	// 一旦 emit 发出事件，就根据 eventName 找到对应的被保存的 callback 回调函数依次执行
	emit(eventName, ...args) {
		const eventCallbacks = this.eventMap[eventName]
		if (!eventCallbacks) return

		eventCallbacks.forEach(callback => callback(...args))
	}
}

// 实例化 EventBus 事件总线类的对象
const eventBus = new EventBus()

// 在 content.js 中监听 navclick 事件
eventBus.on('navclick', (name, age) => {
	console.log('navclick listener1', name, age)
})
eventBus.on('navclick', (name, age) => {
	console.log('navclick listener2', name, age)
})

// 在 nav.js 中发出 navclick 事件
eventBus.emit('navclick', 'Lee', 18)