Javascript 有没有办法减少ExtJS的冗长

ExtJS比jQuery更冗长，与jQuery相比，它让您编写更多的东西。我知道我们不应该将jQuery与ExtJS进行比较，但是ExtJS是一个最完整的Javascript UI框架，而jQuery是一个库。但是在使用jQuery相当长的一段时间后，当我们转向ExtJS时，我们的生产率似乎会降低

var panel = Ext.create('Ext.panel.Panel',{
        height: 500,
        width: 500,
        renderTo: Ext.getBody(),
        ...

我们不能在这里保存一些击键吗？在表单和其他组件中创建文本框也是如此

编辑

@详细代码：

function createPanel(){
    var panel = Ext.create('Ext.panel.Panel',{
        height: 500,
        width: 500,
        renderTo: Ext.getBody(),
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'tabpanel',
            itemId: 'mainTabPanel',
            flex: 1,
            items: [{
                xtype: 'panel',
                title: 'Users',
                id: 'usersPanel',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                tbar: [{
                    xtype: 'button',
                    text: 'Edit',
                    itemId: 'editButton'
                }],
                items: [{
                    xtype: 'form',
                    border: 0,
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Name',
                        allowBlank: false
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'Email',
                        allowBlank: false
                    }],
                    buttons: [{
                        xtype: 'button',
                        text: 'Save',
                        action: 'saveUser'
                    }]
                }, {
                    xtype: 'grid',
                    flex: 1,
                    border: 0,
                    columns: [{
                        header: 'Name',
                        dataIndex: 'Name',
                        flex: 1
                    }, {
                        header: 'Email',
                        dataIndex: 'Email'
                    }],
                    store: Ext.create('Ext.data.Store',{
                        fields: ['Name', 'Email'],
                        data: [{
                            Name: 'Indian One',
                            Email: 'one@qinfo.com'
                        }, {
                            Name: 'American One',
                            Email: 'aone@info.com'
                        }]
                    })
                }]
            }]
        },{
            xtype: 'component',
            itemId: 'footerComponent',
            html: 'Footer Information',
            extraOptions: {
                option1: 'test',
                option2: 'test'
            },
            height: 40
        }]
    });
}

@压缩代码

// Main global object holding
var q = {
    // config object templates
    t: {
        layout: function(args) {
            args = args || {};
            var o = {};
            o.type = args.type || 'vbox';
            o.align = args.align || 'stretch';
            return o;
        },
        panel: function(args) {
            args = args || {};
            var o = {};
            o.xtype = 'panel';
            o.title = args.title || null;
            o.id = args.id || null;
            o.height = args.height || null;
            o.width = args.width || null;
            o.renderTo = args.renderTo || null;
            o.tbar = args.tbar || null;
            o.layout = args.layout || q.t.layout();
            o.items = args.items || [];
            return o;
        },
        button: function(text, args) {
            args = args || {};
            var o = {};
            o.xtype = 'button';
            o.text = text;
            o.itemId = args.itemId;
            return o;
        },
        tabPanel: function(args) {
            args = args || {};
            var o = {};
            o.xtype = 'tabpanel';
            o.itemId = args.itemId;
            o.flex = args.flex;
            o.layout = args.layout;
            o.tbar = args.tbar;
            o.items = args.items || [];
            return o;
        },
        form: function(args) {
            args = args || {};
            var o = {};
            o.xtype = 'form';
            o.border = args.border || 0;
            o.items = args.items || [];
            o.buttons = args.buttons || [];
            return o;
        },
        grid: function(args) {
            args = args || {};
            var o = {};
            o.xtype = 'grid';
            o.flex = args.flex || 1;
            o.border = args.border || 0;
            o.columns = args.columns || [];
            o.store = args.store || null;
            return o;
        },
        gColumn: function(header, dataIndex, args) {
            args = args || {};
            var o = {};
            o.header = header;
            o.dataIndex = dataIndex;
            o.flex = args.flex || undefined;
            return o;
        },
        fTextBox: function(label, optional, args) {
            args = args || {};
            var o = {};
            o.xtype = 'textfield';
            o.fieldLabel = label;
            o.allowBlank = optional || true;
            return o;
        },
        component: function(args) {
            args = args || {};
            var o = {};
            o.xtype = 'component';
            o.itemId = args.itemId;
            o.html = args.html;
            o.extraOptions = args.extraOptions;
            return o;
        }
    },

    // Helper methods for shortening Ext.create for containers.
    h: {
        panel: function(args) {
            return Ext.create('Ext.panel.Panel',
            args);
        }
    }
};
function createPanel(){
    var panel = q.h.panel({
        height: 500,
        width: 500,
        renderTo: Ext.getBody(),
        layout: q.t.panel(),
        items: [q.t.tabPanel({
            itemId: 'mainTabPanel',
            items: [q.t.panel({
                title: 'Users',
                id: 'usersPanel',
                tbar: [
                    q.t.button('Edit',{itemId: 'editButton'})
                ],
                items: [
                    q.t.form({
                        items: [ q.t.fTextBox('Name') , q.t.fTextBox('Email')],
                        buttons: [ q.t.button('Save', {action:'saveUser'} )]
                    }),
                    q.t.grid({
                    columns: [ q.t.gColumn('Name','name'), q.t.gColumn('Email', 'email', {flex: null}) ],
                    store: Ext.create('Ext.data.Store',{
                        fields: ['name', 'email'],
                        data: [{
                            name: 'Indian One',
                            email: 'one@qinfo.com'
                        }, {
                            name: 'American One',
                            email: 'aone@info.com'
                        }]
                    })
                })]
            })]
        }),
            q.t.component({
                itemId: 'footerComponent',
                html: 'Footer Information',
                extraOptions: {
                    option1: 'test',
                    option2: 'test'
                },
                height: 40
            })
        ]
    });
}

通过使用@Compact代码，它可以节省大约40%的行数，例如这里的函数“createPanel”。我希望每个人都有不同的想法，创建配置对象是我的第一个想法，但我希望它是我可以覆盖的东西，所以我提出了上述方法

我对函数和每个Firebug（评测特性）进行了基准测试，非紧凑型版本需要178ms，而紧凑型版本需要184ms

因此，是的，这肯定需要更多的时间，从这个8ms以上的示例中看起来很有价值，但不确定何时我们将使用这种方法构建企业应用程序。

---

有没有更好的方法？如果有，请分享。

如果不是真的需要，请使用xtypes：

{
   xtype: 'panel',
   height: 500,
   width: 500,
   renderTo: Ext.getBody()
}

或者创建自己的默认配置

var panelCfg = {
   height: 500,
   width: 500,
   renderTo: Ext.getBody()
}

并使用ExtApplyIf应用

Ext.ApplyIf({xtype:'panel'}, panelCfg);

或是得到一个实例

Ext.widget('panel', panelCfg);

还有更多的方法

---

您需要自己编写一些结构和/或帮助程序来封装您的默认配置，甚至直接从现有的类继承您自己的类。

除了sra所说的，没有什么可以阻止您创建一些简单的方法

---

在扩展/混合配置中使用简单的生成函数非常有帮助。

非常感谢您的帮助。如果你有其他或更好的方法，你能看看更新后的问题并分享吗。@Dharmavir你做得不对。在开发代码时，代码应该是可读的。对于生产，请使用Sencha工具或任何其他缩微器，但不要编写某种缩微的程序。我猜紧凑模式是设计师设计的？很明显，紧凑模式会运行更长时间。你不能为一个小的应用程序缩短代码，因为如果你想要一个高度，你必须设置它，对任何其他属性都是一样的。但您可以编写漂亮的助手、插件和扩展，但这取决于每个实现。例如，if可以为表单定义默认的Bahavior，但我始终必须添加所有字段。@Dharmavir至少您可以为几乎所有内容编写自己的帮助程序，但这通常需要更多的时间来执行。有一点是明确的；您必须非常了解框架，这意味着不仅要了解API，还必须阅读其背后的源代码。这将使您能够真正缩短和加快代码。但我很抱歉，我不能给你一个建议，将涵盖所有的原因，每个变种有一个赞成和反对。你每次都要考虑他们。与

默认值类似

备用行，但是额外的调用+迭代。这是一个简单的例子，我知道执行时间总是与开发时间或更短的代码相对应的。目前还没有来自webstorm的代码，我们将使用eclipse进行生产。我只是想知道是否有人已经发明了比我更好的方法，我不需要重新发明轮子。但有一个问题，您是否发现我的实现在执行方式方面有任何问题？我不是在问短变量名。我不确定从长远来看，我是否看到您尝试做的事情有任何真正的好处。正如@sra所指出的，无论如何，您都应该编译应用程序用于生产，因此这使得执行时间差异毫无意义（在dev中也是毫无意义的）。如果你不是为了生产而编译/缩小，你会遇到更大的问题。为什么你的压缩代码比详细代码有>50行…？因为它在一个特殊的类/方法中设置模板（config）。这样你就不必每次都写

xtype

。同时，您可以根据您的应用程序需求默认一些选项。如果仔细查看某些组件，可以通过将参数作为函数头而不是javascript对象来保存#行。例如，

gColumn

将

header

和

dataIndex

作为直接函数param而不是args。似乎您正在尝试解决一个不需要解决的问题

makeColumn（'index'，'text'）

对照

{dataIndex:'index'，text:'text'}

。有什么问题吗？这是一个解决根本不存在的问题的糟糕方法。请不要试图这样做。你只是想通过掩盖真实情况来迷惑其他和你一起编程的人。不要把本来不成问题的事情复杂化。