在UI呈现最佳实践之后，是否发布/订阅事件，无论框架如何？ [英] Is publishing/subscribing to events after UI rendering a best practice regardless of framework?

问题描述

我继承了一个相当大的Javascript / ExtJS3代码库，并且在调用... superclass.initComponent.apply（this，arguments）之后，在覆盖的initComponent方法中有许多调用事件的实例。 。特定事件正以下列方式被调用于特定对象：

  this.filter.on（'filterUpdated'函数（filter，params）
  

我已经开始转换代码来使用一个pub / sub范例，以减少对象及其特定事件名称之间的耦合，但是在发布和/或订阅initComponent中的事件（在渲染之前执行ExtJS中）时，会很快遇到问题。我需要从最高级别触发INIT事件屏幕首次加载时，组件，或者我收到错误（由于ExtJS模板没有被渲染出来），或者事件没有被触发。

然后我在Ext.Component的ExtJS源文件中阅读了以下内容（所有组件都从其中扩展出来），我有一个aha时刻：

  if（this.tpl）{
 if（！this.tpl.compile）{
 this.tpl = new Ext.XTemplate（this.tpl） ; 
} 
 if（this.data）{
 this.tpl [this.tplWriteMode]（contentTarget，this.data）; 
删除this.data; 
} 
} 
 this.afterRender（this.container）; 
  

当我切换到从我最上面的组件的afterRender方法发布INIT事件，并订阅所有来自其AfterRender方法的所有其他组件的所有事件，一切都符合我的预期。现在我只是想知道，主要是为了验证我的设计....

这是在事件驱动的UI中实现pub / sub的普遍接受的方式吗？不管框架如何？那么是以下两个好的原则，还是他们的其他方式？

1. 所有子组件呈现之后，初始化事件应该被发布


2. 所有子组件应在

所有事件（在安全方面） >



提前感谢

解决方案

你必须平衡事件处理的开销vs失踪重大事件的可能性。在js / DOM中，状态是可变的。





如果您可以识别所有子组件呈现和订阅的时间点，您的＃1将触发一个init事件是有道理的。





对于＃2，每个人都喜欢听事件似乎很安全;然而它可能会减慢事情。如果性能问题显而易见，您可能需要决定您不关心哪些事件并避免订阅。




I've inherited a rather large Javascript/ExtJS3 code base, and there are many instances of invoking events inside of the overridden initComponent method, after the call to "...superclass.initComponent.apply(this, arguments)". Specific events are being invoked on specific objects in a manner such as the following:

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

I've started converting the code to use a pub/sub paradigm instead, to reduce the coupling between objects and their specific event names, but quickly ran into issues when publishing and/or subscribing to events within initComponent (which in ExtJS executes before rendering). I need to fire an "INIT" event from the highest level component when the screen first loads, and I was either getting an error (due to ExtJS "templates" not having been rendered as it turns out), or events not firing at all.

Then I read the following in the ExtJS source for Ext.Component (from which all components extend) and I had an "aha" moment:

    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);

When I switched to both publishing the "INIT" event from my topmost component's afterRender method, and subscribing to all events from all other components from their afterRender methods, everything worked as I expected. And now I am just wondering, largely to validate my design....

Is this a generally accepted way of implementing pub/sub in an event driven UI? Regardless of framework even? Namely are the following 2 good principles, or are their other ways?

1. "Initialization events" should get published after all sub-components have rendered
2. All sub-components should subscribe to all events (to be on the safe side) after they have rendered

Thanks in advance

解决方案

You have to balance the overhead of event handling vs. the possibility of missing significant events. In js/DOM land state is mutable.

For your #1 if you can identify a point in time when all your sub-components have rendered and subscribed, firing an init event makes sense.

For #2, it seems safe everyone to listen for events; however it could slow things down. If performance issues are apparent you may have to decide what events you don't care about and avoid subscribing.

这篇关于在UI呈现最佳实践之后，是否发布/订阅事件，无论框架如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！