如何拆分代码以获得更好的可读性？

Question

我想清理我的代码以获得更好的可读性，并将一些代码放入额外的 js 文件中，但我尝试过的任何方法都不起作用。

它是一个子应用程序，是仍在使用 ExtJs 4.1 的更大项目 (Shopware) 的一部分。

我有一个扩展 'Ext.window.Window' 的 "main/window.js"。 initComponent 看起来像这样：

initComponent: function () {
   //...
   me.dockedItems = [
      me.createTopToolbar(),
   ];
   //...
}

createTopToolbar 是 "main/window.js" 中的一个方法，它 return 一个带有一些元素的 Ext.toolbar.Toolbar。

我的目标是将此方法放在一个额外的文件中。

我试过像这样创建一个新的 static/singleton class

Ext.define('myapp.myplugin.view.main.Toptoolbar', {
   singleton: true,
   createTopToolbar: function(){
      // ...
      return toolbar;
   }

但在 "main/window.js" 中我不能使用 myapp.myplugin.view.main.Toptoolbar.createTopToolbar() 或 main.Toptoolbar.createTopToolbar()

调用它

在 app.js 中，我尝试像这样包含它

views: [
    'main.Window',
    'main.Toptoolbar',
],

但是没用。

我没有使用 ExtJs 的经验，搜索了几个小时...希望有人能帮助我。

谢谢

编辑

回答我为什么要在函数内构建工具栏的问题。整个函数如下所示：

createTopToolbar: function () {
    var me = this;

    var shopStore = Ext.create('Shopware.apps.Base.store.Shop');

    shopStore.filters.clear();
    shopStore.load({
        callback: function(records) {
            shopCombo.setValue(records[0].get('id'));
        }
    });

    var shopCombo = Ext.create('Ext.form.field.ComboBox', {
        name: 'shop-combo',
        fieldLabel: 'Shop',
        store: shopStore,
        labelAlign: 'right',
        labelStyle: 'margin-top: 2px',
        queryMode: 'local',
        valueField: 'id',
        editable: false,
        displayField: 'name',
        listeners: {
            'select': function() {
                if (this.store.getAt('0')) {
                    me.fireEvent('changeShop');
                }
            }
        }
    });

    var toolbar = Ext.create('Ext.toolbar.Toolbar', {
        dock: 'top',
        ui: 'shopware-ui',
        items: [
            '->',
            shopCombo
        ]
    });

    return toolbar;

}

而且我不希望我的 "main/window.js" 中包含整个代码。我不确定在这种情况下使用 Jaimee 提供的 xtype 解决方案，因为我没有真正扩展 'Ext.toolbar.Toolbar'。我只需要一个 "wrapper" 作为我的 "shopCombo" 代码和 return 'Ext.toolbar.Toolbar' shopCombo 作为一个项目。

Answer 1

像创建任何其他视图一样创建 toolbar，然后创建 'xtype' 以将其添加到您的 window。

Ext.define('myapp.myplugin.view.main.Toptoolbar', {
   extends: 'Ext.toolbar.Toolbar',
   xtype: 'mytoptoolbar',
   dock: 'top',
   ui: 'shopware-ui',
   items :[
      '->',
      {
        xtype: 'combobox',
        name: 'shop-combo',
        fieldLabel: 'Shop',
        store: 'shopStore',
        labelAlign: 'right',
        labelStyle: 'margin-top: 2px',
        queryMode: 'local',
        valueField: 'id',
        editable: false,
        displayField: 'name',
        listeners: {
          'select': function() {
              if (this.store.getAt('0')) {
                  me.fireEvent('changeShop');
              }
          }
      }
   }]
});

然后只需将其添加到 window 的停靠项中，就像添加任何其他组件一样：

initComponent: function () {
   //...
   me.dockedItems = [
      {
          xtype: 'mytoptoolbar'
      }
   ];
   //...
}

并且可以将负载监听器添加到商店中。

Ext.define('Shopware.apps.Base.store.Shop', {
    // ....
    listeners:
    {
        load: function() {
            Ext.ComponentQuery.query("combobox[name='shop-combo']")[0].setValue(...)
        }
    }

但是，如果它是一个可预测的值，我建议只为组合框设置一个起始值。如果您还没有将商店添加到控制器的商店配置中，则需要将其添加。

Answer 2

您可以像这样使用工厂模式：

Ext.define('ToolbarFactory', {
alias : 'main.ToolbarFactory',
statics : {

    /**
     * create the toolbar factory
     */
    factory : function() {
        console.log('create the toolbar');
        var toolbar = ....;
        return toolbar;

    }
} 
});

然后你可以这样创建工具栏：

initComponent: function () {
   //...
   me.dockedItems = [
      ToolbarFactory.factory();
   ];
   //...
}

根据您的构建过程，您可能需要添加 requires 语句。

如何拆分代码以获得更好的可读性？

How to split up code for better readability?

javascript

extjs

extjs4

extjs4.1

编辑