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

A centralized system to make components communicate to each other

本文关键字：集中式 系统 通信 互通 组件      更新时间：2023-09-26

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

现状:我有一个自定义JS组件库(如网格，日期picker，弹出等)为了使组件能够相互通信，我实现了基于以下两条规则的pub/sub机制:发布者:event -> message订阅用户:message -> event

除此之外，我使用了相当多的自定义事件，使用jQuery设置，并且有一种方法(使用数据属性)来定义每个组件应该在加载时触发哪个事件。

例如

:网格在加载时触发'initialize'事件，'initialize'触发'refresh'，等等。

现在，我可以有一个日期picker，也触发'initialize'加载当日期选择器发布订阅了网格的"刷新"事件的消息时，问题就出现了。接下来发生的是:

  • datepicker 'initialize'在加载
    • 时触发
  • 当初始化值改变时，触发'change'事件
  • 'change'事件发布消息，我们设'date_changed'
  • 网格监听消息并触发'refresh'事件

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

我正在考虑实现某种事件队列，而不是触发事件，它被添加到队列中，然后稍后处理，但由于JavaScript基本上是单线程的，实现

有点烦人

问题:有什么办法解决这个问题吗?包括上述，或任何其他可能的解决方案

感谢您的宝贵时间

在需要的地方使用jquery延迟对象来实现每个控件的内部同步如何?我不能给你一个具体的例子，因为我不知道你的代码是如何结构的。例如，你有一个表示Grid组件的"初始化"状态的jquery延迟对象:称它为"gridinitialized"。理想情况下，它被封装在Grid组件中。您需要确保在调用date_changed处理程序(或任何其他需要它的处理程序)之前创建了这个对象。当Grid触发它的"initialize"事件时，它会调用"gridininitialized .resolve()"。

The grid's handler for the "date_changed" event contains:
    gridInitialized.done(function() {
       *code that eventually fires the grid "refresh" event*
    });

传递给.done的函数会在gridininitialized处于resolved状态时被立即调用。如果没有，执行将延迟到.resolve被调用。无论哪种情况，处理程序都会立即返回。

相关文章：