使组件相互通信的集中式系统

Question

我已经阅读 StackOverflow 很多年了，但我终于有一个问题需要帮助，但我找不到正确的答案。

目前情况： 我有一个自定义 JS 组件库（如网格、日期选择器、弹出窗口等） 为了让组件之间能够相互通信，我基于以下两条规则实现了 pub/sub 机制： 发布者：事件 -> 消息 订阅者：消息 -> 事件

除此之外，我还使用了很多自定义事件，使用 jQuery 设置，并且有一种方法（使用数据属性）可以为每个组件定义在加载时应该触发哪个事件。

例如： 网格在加载时触发“初始化”事件，“初始化”触发“刷新”等。

现在，我可以有一个日期选择器，它也会在加载时触发“初始化” 当日期选择器发布消息，网格的“刷新”事件已订阅时，就会出现问题。 然后发生的事情是：

• 日期选择器'initialize'在加载时触发
• 在初始化值发生更改时，会触发 'change' 事件
• 'change' 事件发布一条消息，比如说 'date_changed'
• 网格监听消息并触发'refresh'事件

这就是在 'initialize' 事件之前触发网格的 'refresh' 事件的方式，这显然是一个问题

我正在考虑实现某种事件队列，它不会触发事件，而是将其添加到队列中，然后再进行处理，但是由于 JavaScript 基本上是单线程的，所以实现起来有点烦人

问题： 任何想法如何解决这一问题？包括上述，或任何其他可能的解决方案

非常感谢您的宝贵时间

Answer 1

如何在需要的每个控件中使用 jquery 延迟对象进行内部同步？我不能给你一个具体的例子，因为我不知道你的代码是如何结构的。例如，您有一个表示 Grid 组件的“已初始化”状态的 jquery 延迟对象：将其称为“gridInitialzed”。理想情况下，这被封装在 Grid 组件中。您需要确保在调用 date_changed 处理程序（或任何其他需要它的东西）之前创建此对象。当 Grid 触发它的“initialize”事件时，它会调用“gridInitialized.resolve()”。

The grid's handler for the "date_changed" event contains:

    gridInitialized.done(function() {
       *code that eventually fires the grid "refresh" event*
    });

如果 gridInitialized 处于已解决状态，则立即调用传递给 .done 的函数。如果不是，则延迟执行，直到调用 .resolve。无论哪种情况，处理程序都会立即返回。