javascript - AngularJs 中两个模块之间的通信

Question

这很容易想象，但我还没有找到任何资源提及解决此问题的正确方法。

我想在一个 Angular 模块中广播事件并在另一个中接收它。这两个模块完全不同，具有不同的代码库和目的。它们唯一的共同点是它们在同一域的网站中运行(由于同源策略，这可能很重要)。

我知道这是可能的，例如通过 HTML5 的本地存储同步事件。我只是想知道如何正确地做到这一点。

Answer 1

“适本地”

我将从描述应用程序的规模方面开始，以便清楚地说明要“正确地”实现这一点。

首先，您有一个运行在服务器上的应用程序，包含一个核心，它封装了模块 .从这里开始的较低级别可能包含更多模块 或 Controller 。我将解决这两个问题。

先决条件包括但不限于:

• 为 Controller 实现 Angular scope-events(如有必要)
• 实现 Mediator Pattern规范。
• 使用自定义事件实现SharedWorker。
• 在服务器端实现Event-Hub(如有必要)

如果您的 Controller 之间需要一个通信网络，请使用标准的 Angular $scope & $rootScope .$broadcast 、.$emit 和.$on 实用程序在您的模块 中——您可能已经想到了这一点； )

要在模块 之间进行通信，请在您的核心 中实现调解器模式——很可能，这将作为每个模块都可以引入的服务来实现；否则，您的模块可以被初始化并提供一个注入(inject)了 Mediator/Director 的沙箱。现在您的应用程序核心中的模块可以通信了。

比如说，您需要这个应用程序/核心 来与另一个应用程序 通信。使用自定义事件实现 SharedWorker。你可以看到一个框架，"worker.io" I built for UCLA here .该项目可能需要一些修饰，所以请随意使用它作为编写您自己的引用 -- 要关注的点是它使用伪端口纠缠 .这是因为 worker 只允许一个 onmessage 处理程序，所以你想创建一个 new MessageEvent；将它作为 JSON 字符串发送到另一个端口，然后 JSON.parse` 消息以获取自定义事件并在接收事件的端口上分派(dispatch)该事件——这为您提供了自定义事件。现在，任何应用程序都可以利用此 SharedWorker 并通过它与其他应用程序通信——它甚至允许浏览器标签页之间的通信。

如果您想要一种更全局的方法来处理事件驱动架构，例如，让服务器上的模块有机会响应事件(来自任何地方)- - 在您的服务器上实现一个事件中心。这可能比您想开始的项目更重要，但是有一本很棒的书描述了如何设置它:Testable JavaScript, Mark Ethan Trostler .

也就是说，完全有可能使用 Mediator、SharedWorkers 和 EventHubs 在后端。

上面提到的 worker.io 框架使用两个库:Apis(拉丁语中的 Bee)和 Scriptorium(拉丁语中的 Hive)。但是，要了解如何实现这些库，请参阅 js directory .

希望这对您有所帮助。