这篇“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 原生提供了 $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')以上就是关于“JavaScript怎么利用发布订阅模式编写事件监听函数”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://blog.csdn.net/weixin_43972437/article/details/129655942
