javascript - 有条件地订阅/取消订阅多条消息

Question

这是 Is publishing/subscribing to events after UI rendering a best practice regardless of framework? 的后续问题这是我上个月问的，因为我们第一次使用 Javascript/ExtJS 应用程序走下发布/订阅路径。 如果您想从纯粹的发布-订阅 Angular 了解我问题的实质，请查看倒数第二段的第一个强调句。首先介绍一下上下文:

我们有一个面板，其中包含一个选项卡面板，其卡片包含一个网格面板，以及一个包含用于过滤网格数据的表单的面板。在 beforechangetab 事件中，我们添加/删除共享网格并发布 GRID_TAB_TOGGLED 消息以及指示库存或非库存的标志，然后网格重新加载适当的数据。

至于过滤器，我继承的代码只依赖于一种形式，组合框选择根据加载的库存/非库存数据进行修改，但现在我们需要保留所有的过滤状态。我最初的想法是使用卡片布局来保存库存或非库存过滤器，并在它们之间切换以响应相同的 GRID_TAB_TOGGLED 消息。

但问题在于，这两种过滤器形式都需要监听其他大量相同的事件。我想我已经确定了一个解决方案，并且正在寻求设计验证。

我的想法是让不同的表单能够确定它们是否是“事件的”(库存或非库存)过滤器，如果事件，则订阅所有必要的消息，但如果不活动，则取消订阅 每当收到 GRID_TAB_TOGGLE 消息时，就会发生这种取消订阅、重新订阅的情况。

从 ExtJS 的 Angular 来看，这是否是一个合理的设计，但我更感兴趣(因为我有将近 3 年的 ExtJS 经验，但只有 1.5 个月实现我自己的基于发布/订阅的系统)，来自发布/订阅范式的观点？也许这甚至是基于发布/订阅系统的一种模式(或者，尽管我希望不是，一种反模式)？

Answer 1

我会避免过度订阅/取消订阅。如果您要完全删除一个组件，那么很明显您应该取消订阅所有事件。但是，当您只是暂时禁用组件时，您也应该暂时禁用事件。

因此，我不会取消订阅所有事件然后再次重新订阅它们，而是使用某种中介将所有事件转发给我并允许轻松暂停所有事件。使用 Ext.util.Observable 的#suspendEvents 和#resumeEvents 应该很容易实现。

Ext.define("EventMediator", {
    extend: "Ext.util.Observable",
    constructor: function(cmp, events) {
        this.relayEvents(cmp, events);
        this.callParent([]);
    }
});

var med = new EventMediator(grid, ["click", "dblclick"]);

med.on("click", form.doSomething);
med.on("dblclick", form.doSomethingElse);

// When form gets hidden:
med.suspendEvents();