这篇“JavaScript怎么利用发布订阅模式编写事件监听函数”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JavaScript怎么利用发布订阅模式编写事件监听函数”文章吧。
背景
大家有没有遇到过这种情况，想要写一个事件监听函数，当某个事件被触发的时候，会自动执行这个监听函数，类似：
on('changeText', (data) => {
console.log(data)
})这就是典型的发布订阅的一个模式。对于大型项目，你可以使用类似 redux/vuex 这样的响应式状态管理系统，但是如果你不想使用这么重的方案，可以使用 eventHub。
eventHub和发布订阅模式（Pub/Sub）的关系？
发布订阅是一种设计模式，EventHub可以被看作是一种Pub/Sub实现。
示例
class EventHub {
constructor() {
this.listeners = {};
}
on(eventName, callback) {
if (!this.listeners[eventName]) {
this.listeners[eventName] = [];
}
this.listeners[eventName].push(callback);
}
emit(eventName, data) {
if (this.listeners[eventName]) {
this.listeners[eventName].forEach(callback => {
callback(data);
});
}
}
}const eventHub = new EventHub();
eventHub.on('hello', (data) => {
console.log(`Hello ${data}!`);
});
eventHub.emit('hello', 'world');上述代码定义了一个名为EventHub的类，它有两个方法：
on方法用于订阅事件
emit方法用于发布事件。
在实际应用中，我们可能需要更复杂的功能，例如取消订阅事件或限制监听器的数量。
基于Vue的eventHub
vue 原生提供了 $on、$emit 等函数，所以直接就可以这么用，但是好像 vue3 去掉了，可以使用更灵活的 ref、reactive
let eventHub = new Vue()
// 监听
eventHub.$on('eventName', (data) => {
console.log('Trigger this event and receive ' + data)
})
// 广播
eventHub.$emit('eventName', data)
// 去掉监听
eventHub.$off('eventName')