使用JavaScript实现简单的EventBus

EventBus是什么?

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

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

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

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

  • 如何实现

    需要用到的基础知识

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

    基础实现思路:

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

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

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

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

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


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

     class _EventBus {
       constructor() {
         //当实例化_EventBus时, 构造函数内的实例属性
         this._events = new Map() //这里使用 map 的 k-v分别储存 事件名-对应的订阅者信息
         //constructor中都有 prototype属性, 该
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 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、付费专栏及课程。

余额充值