探索前端跨组件通信：EventBus在Vue和React中的应用

本文作者系360奇舞团前端开发工程师

EventBus 简介

事件总线（Event Bus）是一种用于组件间通信的模式，通常用于解决组件之间的解耦和简化通信的问题。在前端框架中，如 Vue.js，事件总线是一个常见的概念。基本上，事件总线是一个能够触发和监听事件的机制，使得组件能够在不直接依赖彼此的情况下进行通信。事件总线可以是一个全局的单例对象，也可以是一个基于发布-订阅模式的实现。

设计模式

在软件架构中，发布/订阅（Publish–subscribe pattern）是一种消息范式，消息的发送者（称为发布者）不会将消息直接发送给特定的接收者（称为订阅者），而是将发布的消息分为不同的类别，无需了解哪些订阅者（如果存在）。同样，订阅者可以表达对一个或多个类别的兴趣，只接收感兴趣的消息，无需了解哪些发布者（如果存在）。

订阅-发布模式（Publish-Subscribe Pattern）是一种软件设计模式，也属于行为型模式之一。它定义了一种对象间一对多的依赖关系，当一个对象的状态发生变化时，所有依赖于它的对象都会得到通知并自动更新。这种模式降低了对象之间的直接耦合，使得系统更加灵活。该模式包含两个主要角色：

1. 发布者（Publisher）： 负责发布（广播）消息或事件的对象。当发布者的状态发生变化时，它会通知所有已订阅的对象。

2. 订阅者（Subscriber）： 订阅发布者的消息或事件的对象。订阅者通过注册自己的回调函数（或观察者）来接收发布者的通知。

具体实现步骤如下：

• 发布者维护一个订阅者列表（数组），用于存储所有订阅了它的对象。

• 订阅者向发布者注册自己的回调函数（或观察者）。

• 当发布者的状