Ext.define() 中有关 initComponent() 的最佳实践

Posted 2023-02-26

【中文标题】Ext.define() 中有关 initComponent() 的最佳实践

【英文标题】：Best Practices concerning initComponent() in Ext.define()

【发布时间】：2011-07-29 10:13:12

【问题描述】：

我正在使用 Ext.define() 以 ExtJS 的新 MVC 方式编写我的所有组件。

无论是在initComponent() 中定义属性还是像property: 42, 这样简单地设置属性，我都有些挣扎。

是否有被广泛接受的最佳实践？

我只是在必要时使用initComponent()（即，当我想要一些动态的东西或设置一个范围时），这让函数更短，让我免于一些丑陋的this.s 并始终使用它有好处，我永远不必将以前的属性移动到 initComponent() 只是因为我想让它更具动态性。

不幸的是，Sencha 的文档并没有详细说明这一点，而且可用的示例似乎可以按照他们的意愿行事。

【参考方案1】：

个人实践，我会在属性区声明变量的时候

定义大小的变量，如x、y、width、height 等待被覆盖或自定义的变量，如title、saveBtnTxt、url、fields、iconCls 一些常量，它们会有特殊的前缀，所以不会轻易被覆盖

然后我将声明items、listeners、this.on、Ext.apply(me, ..) 或任何需要 obj 范围的内容（this、me），以坐在我的initComponent 中。或者在一切设置之前应该修改/覆盖的东西，这样用户就不会通过覆盖一些重要的变量来破坏我的组件。

当然，这将作为我的指导。 2美分

编辑

关于丑陋的this，我在我的应用程序中广泛使用了变量me，它看起来比this干净很多。它也使我受益于不那么频繁地更改范围。

【讨论】：

好的，这就是我目前的做法。当某些属性神奇地变得动态时，它变得乏味，这就是我问的原因。还不知道me...我对 ExtJS 很陌生。

这里没有魔法。只需检查他们的源代码，您就会看到很多“我”飞来飞去。 'me' 实际上只是对象 'this' 的引用。

魔术是指我自己的代码，当我改变主意并使属性动态化时。因为刚开始时缺乏可靠的 ExtJS 4 教程，所以我的应用程序有点脏（即 3.2 风格），我不得不重写很多内容以使其成为 MVCey。这导致initComponent() 内部有很多拉动属性，这有点乏味。那么me 和this 除了更短之外还有什么区别吗？

更短，是的，您可能不需要频繁更改范围，因为您始终可以在代码中使用“我”。顺便说一句，只是我的看法，因为他们不提供教程，所以从他们的代码中学习。它对我有很大帮助:)

【参考方案2】：

我想在 Lionel 的回答中补充一点，最好在 initComponent 中声明任何 非原始 配置。 （原始我的意思是字符串、布尔值和数字）。数组和对象进入initComponent。 所以定义应该是这样的：

Ext.define('My.NewClass', 
  extend: 'OldClass',
  // here all primitive configs:
  cls: 'x-my-cls',
  collapsible: true,
  region: 'west',
  // and so on ...

  initComponent: function() 
    // here you declare non-primitive configs:
    this.tbar = [/* blah-blah */];
    this.columns = [/* blah-blah */];
    this.viewConfig = /* blah-blah */;
    // and so on ...

    this.callParent(arguments);
  

  // other stuff

您应该将所有非原始配置放入 initComponent 的原因是，否则所有实例的配置将引用相同的对象。例如，如果您将 NewClass 定义为：

Ext.define('My.NewClass', 
  extend: 'OldClass',
  bbar: Ext.create('Ext.toolbar.Toolbar', 
  // ...

所有实例的bbars 将引用同一个对象。因此，每次创建新实例时，bbar 都会从前一个实例中消失。

【讨论】：

虽然我同意你的观点，但我认为这个答案可能有点误导。我的理解是，如果不是创建一个使用 xtype 的实例（即对象配置），它就不会被共享。因此，至少在 ExtJS 4 中，将对象和数组作为配置属性应该没有问题（与使用 InitComponent 相比）。当然，如果您需要访问它或者您的类可能被其他人覆盖或者您需要合并配置，则可以使用 InitComponent。更多信息请见：skirtlesden.com/articles/config-objects-on-the-prototype

如果你把它放在一个“config ”块里呢？

我猜是一个愚蠢的问题，但我想知道 extjs 中什么是非前置的？我知道它的数组对象等。但是从概念上讲，在 extjs 5 中创建应用程序时我总是很困惑。如果我不使用 initComponent() 会不会影响性能？顺便说一句，我是 extjs 的新手。谢谢

【参考方案3】：

  Ext.define('My.Group', 
// extend: 'Ext.form.FieldSet',
xtype : 'fieldset',
config : 
    title : 'Group' + i.toString(),
    id : '_group-' + i.toString()

,
constructor : function(config) 
    this.initConfig(config);

    return this;
,    
collapsible: true,
autoScroll:true,
.....
);

你可以如下使用它。

handler : function()                       
        i = i + 1;
        var group = new My.Group(
            title : 'Group' + i.toString(),
            id : '_group-' + i.toString()
        );
        // console.log(this);
        // console.log(group);
        Ext.getCmp('panelid').insert(i, group);
        Ext.getCmp('panelid').doLayout();
    

【讨论】：

我没有得到你的确切答案，但这条评论也无关紧要：我喜欢红绿灯

是的..我猜他是在征求意见:)

抱歉，您的回答甚至不包含initComponent()。 :) 但是红绿灯很棒。

红绿灯是什么意思？

如果您想了解有关红绿灯的信息，请考虑创建一个新问题。