JavaScript中的组件间通信

Question

我需要在Web应用程序中实现组件间通信，并考虑不同的方法来完成此任务。我有一些想法，但也希望听取其他的建议。

首先，举个简单的例子。我在页面上有两个异步加载的独立组件。通过“组件”，我指的是一块HTML代码，它具有一个与之相关联的JavaScript对象，该对象包括基于jQuery的节点行为。当用户与一个组件交互时，应该在另一个组件中进行更改，反之亦然。

这里要记住的关键是，每个组件都应该是一个自包含的单元。它可以在应用程序的不同部分，甚至不同的应用程序中被重复使用。因此，它不知道页面上其他组件的存在。

我目前对解决方案的想法是，让组件监听它们感兴趣的自定义事件，并在发生操作时发送自定义事件。因此，每个组件都监听由另一个组件触发的事件。

问题在于，由于异步加载，一个组件可能需要比另一个组件更长的时间来加载。有可能会太早发送事件并且事件会丢失。在某些情况下，这可能没问题，但在某些情况下，我需要确保组件发送的所有事件都被消耗。

因此，以下是相关问题：

1. 触发事件后会发生什么？如果在触发时没有监听器，它会消失吗？ 2. 是否有一种方法可以检测触发的事件是否被消耗或丢失？ 3. 每个组件如何知道其他组件的存在？ 4. 是否有任何现有的开源JavaScript项目或jQuery插件来处理这些问题？

对于问题＃3，我认为每个组件都可以发送某种注册事件，其中包括其所侦听的事件类型和已注册的组件列表。组件将侦听这些注册事件。使用计时器的某种注册逻辑将用于确保在组件加载过程中正确地注册正确的组件。完成注册后，组件将能够发送其正常事件。

- Tauren

Answer 1

消息队列确实是你所寻找的东西。我相信你可以想象出各种方案，包括观察者对象监听自定义事件、接收消息、处理时间和顺序、限流、广播等等。但在深入了解所有这些之前，请先查看这个jQuery 消息队列插件。这可能是一个很好的起点。

- Ken Redler

---

非常酷！我以前探索过Ben Alman的插件，但当时可能不需要这样的东西，所以忘记了它。谢谢你指出它，它可能是完美的。 - Tauren

Answer 2

Web服务是一个很好的参考模型。当你有相互连接的Web服务用于云计算（或任何分布式计算平台）时，它们通常在它们之间实现某种消息队列或“总线”。

您可以考虑创建一个全局消息队列来处理“事件”，并且可以将其发布给订阅者或保留它，直到对其采取行动（通常称为作业）。

- funwhilelost

---

这是一个好主意。消息总线可以在应用程序级别上启动，并在页面加载时开始。然后组件只需发送事件，总线即可捕获并将其推送到适当的订阅者，或者在订阅者注册之前保留它们。如果事件的生存时间过期，它甚至可以通知原始发送组件事件失败的情况。 - Tauren

Answer 3

我不确定这是否完全概括了您想要做的事情，但听起来像JavaScriptMVC这样的开源项目可能对您有用。这个开源框架让控制器处理事件委托，并提供了一些您正在寻找的分离功能。它还在幕后利用了jQuery。

该网站有点难以导航（或者至少很难找到很多具体信息），但介绍视频很有用（长度为12分钟）。

希望这可以帮助您！祝您好运！

- David Hoerster

---

谢谢！我之前看过JavaScriptMVC，但是还没用过。我不确定它是否适合这个任务，因为我的应用程序已经以不同的方式处理了它所做的大部分工作。但是我会进一步研究它在事件处理方面的表现。我希望能找到更轻量级、学习曲线更小的东西。 - Tauren

Answer 4

在事件管理方面需要考虑的另一件事是来自微软的JavaScript反应式扩展（RxJS）。它类似于JavaScriptMVC中的控制器，您可以在可观察序列中注册事件，然后可以使用类似LINQ的语法与它们交互。

Matthew Podwysocki有很多关于使用RxJS的好博客文章。以下是一些好的文章：

RxJS简介（良好的入门）
错误处理第2部分，其中包含他的许多其他文章的链接

这里有一些关于 RxJS 的 实践实验室 链接。

希望这也能帮到你！

- David Hoerster