JavaScript利用发布订阅模式编写事件监听函数
更新时间：2023年04月12日 10:08:52 作者：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事件监听内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了javascript比较两个日期相差天数的方法,涉及javascript针对日期的转换与比较的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
JavaScript中callee和caller的区别与用法实例分析
这篇文章主要介绍了JavaScript中callee和caller的区别与用法,结合实例形式分析了javascript中callee和caller的功能、区别、用法及操作注意事项,需要的朋友可以参考下2019-06-06
下面小编就为大家带来一篇js模拟百度模糊搜索的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
用javascript实现jquery的document.ready功能的实现代码
实现jQuery的document.ready功能js代码2009-11-11
淘宝网大家在熟悉不过了，那么淘宝网首页模板是怎么做的呢？今天小编抽时间给大家分享新手学习前端之js模仿淘宝主页网站的相关资料,需要的朋友可以参考下2016-10-10
javascript中tostring()和valueof()的用法及两者的区别
基本上，所有JS数据类型都拥有valueOf和toString这两个方法，null除外。它们俩解决javascript值运算与显示的问题，本文给大家介绍javascript中tostring()和valueof()的用法及两者的区别，对js tostring valueof相关知识感兴趣的朋友一起学习吧2015-11-11
这篇文章主要为大家详细介绍了js实现三角形粒子运动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要为大家详细介绍了PhotoSwipe异步动态加载图片方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了JS数据类型STRING使用实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了JavaScript实现多重继承的方法,结合实例形式详细分析了javascript实现多重继承的具体步骤与相关操作技巧,需要的朋友可以参考下2018-01-01
最新评论