JavaScript利用发布订阅模式编写事件监听函数
作者：Lvan的前端笔记
发布订阅是一种设计模式，EventHub可以被看作是一种Pub/Sub实现。本文就来讲讲如何利用eventHub发布订阅写一个事件监听函数，感兴趣的可以了解一下
背景
大家有没有遇到过这种情况，想要写一个事件监听函数，当某个事件被触发的时候，会自动执行这个监听函数，类似：
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')
到此这篇关于JavaScript利用发布订阅模式编写事件监听函数的文章就介绍到这了,更多相关JavaScript事件监听内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！