Javascript 如何拆分代码以提高可读性？

我想清理我的代码以提高可读性，并将一些代码放入额外的js文件中，但我尝试过的都不起作用

它是一个子应用程序，也是一个仍在使用ExtJS4.1的大型项目（Shopware）的一部分

我有一个扩展了“Ext.window.window”的“main/window.js”。 initComponent如下所示：

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

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;

createTopToolbar是“main/window.js”中的一个方法，它返回带有一些元素的Ext.toolbar.toolbar

我的目标是把这个方法放在一个额外的文件中

我试图创建一个新的静态/单例类，如下所示

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

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

但是在“main/window.js”中，我不能用myapp.myplugin.view.main.topttoolbar.createtopttoolbar（）或main.topttoolbar.createtopttoolbar（）调用它

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

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

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

但它不起作用

我没有使用ExtJs和搜索数小时的经验…希望有人能帮助我

多谢各位

编辑 回答我为什么在函数中构建工具栏的问题。 整个功能如下所示：

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

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”。我只需要为我的“shopCombo”代码提供一个“包装器”，并返回“Ext.toolbar.toolbar”，其中shopCombo是一个项目。

像创建任何其他视图一样创建，并创建一个“xtype”将其添加到窗口中

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');
              }
          }
      }
   }]
});

然后简单地将其添加到窗口的停靠项中，就像添加任何其他组件一样：

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(...)
        }
    }

但是，如果combobox是一个可预测的值，我建议只为它设置一个起始值。如果尚未将存储添加到控制器的存储配置中，则需要将其添加到控制器的存储配置中。

像创建任何其他视图一样创建存储，并创建“xtype”将其添加到窗口中

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');
              }
          }
      }
   }]
});

然后简单地将其添加到窗口的停靠项中，就像添加任何其他组件一样：

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(...)
        }
    }

---

但是，如果combobox是一个可预测的值，我建议只为它设置一个起始值。如果尚未将存储添加到控制器的存储配置中，则需要将其添加到控制器的存储配置中。

您可以使用如下工厂模式：

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();
   ];
   //...
}

---

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

您可以使用如下工厂模式：

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();
   ];
   //...
}

---

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

我很好奇您为什么要在函数中构建工具栏，您能解释一下这样做的动机吗？@Jaimee我已经编辑了我的原始问题来解释我的动机。这有两种很好的模式。您可以将工具栏创建为xtype引用的新视图，或者将其添加为mixin。我很好奇为什么要在函数中构建工具栏，您能解释一下这样做的动机吗？@Jaimee我已经编辑了我的原始问题来解释我的动机。有两种很好的模式。您可以将工具栏创建为xtype引用的新视图，也可以将其添加为mixin。谢谢。我知道这一点，但这对我来说并不是一个好的解决办法。为此，我扩展了一个类（Ext.toolbar.toolbar），而没有添加任何感觉奇怪的新功能。为了澄清问题，我将扩展我的问题。@Manuel我已经用你提供的新信息修改了我的答案。通过扩展该类，您可以添加自己的配置并创建自定义组件，该组件可以轻松添加到应用程序中的视图中。如果您的目标是拆分和简化代码，我建议您这样做——扩展类不需要进行大规模更改。谢谢。我知道这一点，但这对我来说并不是一个好的解决办法。为此，我扩展了一个类（Ext.toolbar.toolbar），而没有添加任何感觉奇怪的新功能。为了澄清问题，我将扩展我的问题。@Manuel我已经用你提供的新信息修改了我的答案。通过扩展该类，您可以添加自己的配置并创建自定义组件，该组件可以轻松添加到应用程序中的视图中。如果您的目标是拆分和简化代码，我建议您这样做-扩展类不需要进行大规模更改。感谢您提供此解决方案。感谢您提供此解决方案。