使用事件进行交叉互动

在某些情况下，多个微前端可能需要相互交互才能对状态变化或用户操作做出反应。例如，页面上的多个微前端可以包含可折叠的菜单。当用户选择按钮时，会出现一个菜单。当用户点击其他任何地方（包括在不同的微前端中呈现的另一个菜单）时，该菜单会被隐藏。

从技术上讲，诸如 Redux 之类的共享状态库可以由多个微前端使用并由 shell 进行协调。但是，这会在应用程序之间造成显著的耦合，从而导致代码更难测试，并且可能会降低渲染过程中的性能。

一种常见、有效的方法是开发一个事件总线，该总线作为库分发，由应用程序 shell 编排，并由多个微前端使用。通过这种方式，每个微前端都异步发布和监听特定事件，其行为仅基于自己的内部状态。然后，多个团队可以维护一个共享的 wiki 页面，该页面描述了用户体验设计师同意的事件和文档行为。

在事件总线示例的实现中，下拉列表组件使用共享总线发布一个有效载荷为drop-down-open-menu的名为的事件。{"id": "homepage-aboutus-button"}该组件向drop-down-open-menu事件添加了一个侦听器，以确保在针对新 ID 触发事件时，会呈现下拉列表组件以隐藏其可折叠部分。通过这种方式，微前端可以通过提高性能和更好的封装来异步应对变化，从而使多个团队更容易设计和测试行为。

我们建议使用现代浏览器原生 APIs 实现的标准，以提高简单性和可维护性。MDN Event 参考提供了有关在客户端渲染的应用程序中使用事件的信息。