无论框架如何，在 UI 渲染后发布/订阅事件是最佳实践吗？

Posted 2023-02-23

【中文标题】无论框架如何，在 UI 渲染后发布/订阅事件是最佳实践吗？

【英文标题】：Is publishing/subscribing to events after UI rendering a best practice regardless of framework?

【发布时间】：2011-12-30 20:34:31

【问题描述】：

我继承了一个相当大的 javascript/ExtJS3 代码库，并且在调用“...superclass.initComponent.apply(this, arguments)”之后，在被覆盖的 initComponent 方法中有许多调用事件的实例.正在以如下方式在特定对象上调用特定事件：

this.filter.on('filterUpdated', function(filter, params)

我已经开始将代码转换为使用 pub/sub 范例，以减少对象与其特定事件名称之间的耦合，但在发布和/或订阅 initComponent（在 ExtJS 中在渲染之前执行）。当屏幕第一次加载时，我需要从***别的组件触发一个“INIT”事件，我要么得到一个错误（由于 ExtJS “模板”没有被渲染），要么事件根本没有触发.

然后我在 Ext.Component 的 ExtJS 源代码中阅读了以下内容（所有组件都从中扩展），我有一个“啊哈”的时刻：

    if (this.tpl) 
        if (!this.tpl.compile) 
            this.tpl = new Ext.XTemplate(this.tpl);
        
        if (this.data) 
            this.tpl[this.tplWriteMode](contentTarget, this.data);
            delete this.data;
        
    
    this.afterRender(this.container);

当我切换到从最顶层组件的 afterRender 方法发布“INIT”事件，并从所有其他组件的 afterRender 方法订阅 all 事件时，一切都按我预期的那样工作。现在我只是想知道，主要是为了验证我的设计......

这是在事件驱动的 UI 中实现发布/订阅的普遍接受的方式吗？甚至不管框架？即以下两个好的原则，还是其他方式？

“初始化事件”应该在所有子组件都渲染后发布 所有子组件在渲染后都应该订阅所有事件（为了安全起见）

提前致谢

【参考方案1】：

您必须平衡事件处理的开销与丢失重要事件的可能性。在 js/DOM 中，土地状态是可变的。

对于您的 #1，如果您可以确定所有子组件都已呈现和订阅的时间点，那么触发 init 事件是有意义的。

对于#2，似乎每个人都可以安全地监听事件；但是它可能会减慢速度。如果性能问题很明显，您可能必须决定不关心哪些事件并避免订阅。