使用JavaScript实现简单的EventBus

最新推荐文章于 2024-02-28 10:38:24 发布
最新推荐文章于 2024-02-28 10:38:24 发布
阅读量1.4k 收藏 4
点赞数 1
分类专栏： JavaScript 文章标签： javascript 开发语言 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29116247/article/details/122505541
版权

EventBus是什么?

  • event值得是事件 bus 指的是公共汽车

    用公共汽车的固定的站点, 处理上下车的事件, 来比做订阅与事件的分发

  • 在编程中的eventbus通常是用来, 一发布 订阅的方式来传递数据的.

    预先订阅事件, 当事件触发时可以接收大事件相关的数据

  • 如何实现

    需要用到的基础知识

    原型对象与原型链, 回调函数

    基础实现思路:

    1. 准备一个类或构造函数, 用来存放, 事件和订阅者信息

    2. 在该类/构造函数的原型上添加发布和订阅的方法

      • 发布的方法需要传入, 要发布的事件名称, 事件的数据作为参数

      • 订阅方法需要传入, 订阅的事件名称, 事件的处理函数(回调函数)

    3. 主要流程, 通过构造函数的实例, 调用其原型链上的 订阅方法, 传入订阅的事件和方法, 存储区该实例对应属性中(这里用Map)--消息发布者, 通过传入的事件名称, 在实例的数据中取出订阅这先前传入的订阅函数, 并调用, 同时将发布的信息内容, 传入即可

    实现方法: 这里我们用构造函数的语法糖 class

     class _EventBus {
   constructor() {
     //当实例化_EventBus时, 构造函数内的实例属性
     this._events = new Map() //这里使用 map 的 k-v分别储存 事件名-对应的订阅者信息
     //constructor中都有 prototype属性, 该
最低0.47元/天 解锁文章
_搬砖仔
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端面试题：JS 如何实现事件总线 Event Bus
lwebapp.com
03-10 2087
原文：https://lwebapp.com/zh/post/event-bus 介绍 Event Bus 事件总线，通常作为多个模块间的通信机制，相当于一个事件管理中心，一个模块发送消息，其它模块接受消息，就达到了通信的作用。 比如，Vue 组件间的数据传递可以使用一个 Event Bus 来通信，也可以用作微内核插件系统中的插件和核心通信。 原理 Event Bus 本质上是采用了发布-订阅的设计模式，比如多个模块 A、B、C 订阅了一个事件 EventX，然后某一个模块 X 在事件总线发布了这个事件，
JS高级 之 eventBus 事件总线
玄鱼殇
09-06 2965
JS高级 之 eventBus 事件总线
事件总线（EventBus）,父子、兄弟组件间通信，一个页面调用另一个页面的方法 & 使用eventbus遇到的问题（多次触发、第一次不触发）
金乌的博客
11-25 3454
组件通信时，有时两个组件之间毫无关系，或者他们之间的结构复杂，这时就要用到 vue 中的事件总线 EventBus的概念。EventBus 又称为事件总线。EventBus的用途：1.解决一个页面调用另一个页面的方法2.解决父子组件、兄弟组件间的通信。
Vue事件总线（EventBus）使用指南：详细解析与实战应用
热门推荐
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
05-31 1万+
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即EventBus来通信。EventBus 又称为事件总线。
js eventbus
学习前进，干就完了
09-03 526
js事件消息 仓库地址 demo地址 常用api eventbus.emit() eventbus.on() eventbus.off() eventbus.once() 如何使用 发送消息：可以多参数传递 import eventbus from './emitter' eventbus.emit('eventkey',"a") eventbus.emit('eventkey1',"a","b") eventbus.emit('eventkey2',"a","b","c") 监听消息 imp
VueEventBus:Vue的EventBus实现
05-10
2. **发布事件** (emit): 在一个组件中，我们可以使用`EventBus.$emit`来触发一个自定义事件，并传递数据。 ```javascript EventBus.$emit('event-name', data); ``` 3. **监听事件** (on): 在其他组件中，我们可以...
eventBus:用于JavaScript应用程序的eventBus，您可以在vuejs，reactjs，react-native.js中使用它
04-29
在JavaScript开发中，Event Bus（事件总线）是一种常见的组件间通信方式，尤其在单页面应用（SPA）如Vue.js、...而“eventBus-master”可能是一个开源的Event Bus实现，包含了完整的源代码，可供开发者学习和使用。
Node.js-Eventbus3.0简单使用适合初学者使用
08-12
**Node.js-Eventbus3.0简单使用适合初学者使用** 在Node.js开发过程中，有时候我们需要在不同的模块之间传递事件，实现解耦合和高效通信。这就是EventBus（事件总线）的概念，它模仿了Android中的EventBus库，提供...
vue采用EventBus实现跨组件通信及注意事项小结
08-27
EventBus是一种发布/订阅事件设计模式的实践，在vue中适用于跨组件简单通信，不适用于复杂场景多组件高频率通信，类似购物车等场景状态管理建议采用vuex。 EventBus的实现可以通过挂载EventBus到vue.prototype，...
nx-event-bus:JavaScript中事件总线的简单实现
03-29
NX事件总线 JavaScript的事件总线的简单实现。 它的主要功能是处理“死事件”。 “死事件”是指没有任何广播事件的侦听器。 如果发生此类事件，该事件将被保存，直到创建侦听器并将其重新广播为止；否则，此事件将被...
Node.js-EventBus简单使用实例学习使用开源库提高开发效率与速度
08-12
EventBus简单使用实例,学习使用开源库，提高开发效率与速度
Eventbus.zip
02-24
EventBus3.0使用笔记（详细）文章的演示demo,方便下载导入eclipse测试
JavaScript手写系列(二)———EventBus
Salange1的博客
10-25 692
Vue中的组件传参是日常开发中常遇到的需求，其中事件总线就是其中非常好用的一种，之前其实是比较排斥这种用法的，就是因为用的少，不了解所以出于对未知事物的恐惧，比较排斥。最近刷到一篇手写的文章，看完才明白其中的大概原理，今天就以我自己的理解来给大家讲讲基本实现。我们可以把简单理解为一个公众号，其中公众号作者拥有发布()消息的能力，用户拥有订阅()公众号的能力，公众号作者发布文章后，用户会收到文章内容推送，如果用户不喜欢推送的文章则可以选择取消订阅()公众号的能力。接下来我们就来简单实现一下这些功能。 代码验证
js实现事件总线EventBus
czz19910404的博客
06-07 828
使用js简单模拟事件总线的处理机制，包括on,once,off,emit四个方法
JS Global Event Bus（全局事件总线）
最新发布
阿牛哥的博客
02-28 514
发布-订阅模式： 该模式涉及两个主要角色 - 发布者（Publisher）和订阅者（Subscriber）。发布者负责发布（触发）事件，而订阅者则通过订阅事件来接收通知。事件对象： 通常，一个事件是一个包含相关信息的对象。当发布者触发事件时，它可以传递一些数据给所有订阅者。事件总线对象： 在全局事件总线中，通常会有一个中央的事件总线对象，用于管理所有的事件。这个对象包含一个事件注册表，用于存储不同类型事件的订阅者列表。订阅事件： 组件或模块可以通过订阅事件来表达对某一类型事件的关注。
Js 手写Eventbus 事件总线
qq_45270287的博客
07-16 254
function EventBus() { this._events = {}; } EventBus.prototype.on = function (eventId, func) { const callbacks = this._events[eventId]; if (!callbacks) { this._events[eventId] = [func]; return; } callbacks.push(func); }; EventBus.prototype.once = function (
事件总线 eventBus 详解
facial_123的博客
09-12 1183
eventBus事件总线详解，使用Vue实例并手撕其内部原理
js实现一个基本的Event Bus
weixin_43837268的博客
08-19 1801
// 组件通信，一个触发与监听的过程 class EventEmitter { constructor () { // 存储事件 this.events = this.events || new Map() } // 监听事件 addListener (type, fn) { if (!this.events.get(type)) { this...
vue eventBus 的使用
07-22
在 Vue 中，你可以使用事件总线（Event Bus）来实现组件之间的通信。事件总线是一个空的 Vue 实例，可以用于触发和监听自定义事件。 首先，在你的项目中创建一个新的 Vue 实例作为事件总线： ```javascript // eventBus.js import Vue from 'vue'; export const eventBus = new Vue(); ``` 然后，在需要通信的组件中，你可以使用事件总线来触发事件或监听事件： ```javascript // ComponentA.vue import { eventBus } from './eventBus.js'; export default { methods: { sendMessage() { eventBus.$emit('message', 'Hello from Component A!'); } } } ``` ```javascript // ComponentB.vue import { eventBus } from './eventBus.js'; export default { data() { return { receivedMessage: '' }; }, mounted() { eventBus.$on('message', (message) => { this.receivedMessage = message; }); } } ``` 在上面的示例中，ComponentA 在方法中通过 `eventBus.$emit` 触发了名为 `message` 的自定义事件，并传递了消息内容。而 ComponentB 在 `mounted` 钩子函数中通过 `eventBus.$on` 监听了 `message` 事件，当事件触发时会执行回调函数并将消息内容赋值给 `receivedMessage`。 这样，ComponentA 和 ComponentB 之间就可以通过事件总线进行通信了。请确保在不需要通信时及时销毁事件监听，以避免内存泄漏。 注意：事件总线在组件之间是全局共享的，可以用于任意组件之间的通信。但是如果你的项目越来越复杂，建议考虑使用更好的状态管理方案，如 Vuex。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值