有什么办法可以减少 ExtJS 的冗长答案

【问题标题】：Is there any way to reduce the verbosity of ExtJS有什么办法可以减少 ExtJS 的冗长
【发布时间】：2013-01-25 19:11:33
【问题描述】：

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

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

编辑

@Verbose 代码：

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

@Compact 代码

// 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（分析功能）进行了基准测试，非紧凑版本需要 178 毫秒，而紧凑版本需要 184 毫秒。

所以是的，这肯定会花费更多时间，从这个示例中看起来值得多花 8 毫秒，但不确定我们何时会使用这种方法构建企业应用程序。有没有更好的方法？如果有，请分享。

【问题讨论】：

为什么你的紧凑代码比冗长的代码多 50 行...？
因为它在其之上的特殊类/方法中设置模板（配置）。这样你就不必每次都写xtype。同时，您可以根据您的应用要求默认一些选项。如果您仔细查看某些组件，您可以通过将参数作为函数头而不是 javascript 对象来节省行数。例如gColumn 具有 header 和 dataIndex 作为直接函数参数而不是 args。
似乎您正在尝试解决一个不需要解决的问题。 makeColumn('index', 'text') 反对 {dataIndex: 'index', text: 'text'}。有什么问题？
对于不存在的问题，这是一种糟糕的方法。请不要尝试这样做。
你只会通过掩盖真正发生的事情来混淆其他与你一起编程的人。不要把一开始没有问题的事情复杂化。

标签： javascript performance optimization extjs extjs4.1

【解决方案1】：

如果不是真的需要使用 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);

还有更多的方法。

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

【讨论】：

非常感谢您的帮助。如果您有其他或更好的方法，您能否查看更新的问题并分享。
@Dharmavir 你做错了。在开发代码时应该是可读的。对于生产使用 Sencha Tool 或任何其他缩小器，但不要对缩小的程序进行排序。我猜紧凑模式来自设计师？嗯，很明显紧凑模式会运行更长时间。如果需要设置高度，则不能为小型应用程序缩短代码，对于任何其他属性也是如此。但是你可以编写漂亮的助手、插件和扩展，但这取决于每个实现。例如，如果可以为表单定义默认行为，但我总是必须添加所有字段。
@Dharmavir 至少您可以为几乎所有事情编写自己的助手，但与往常一样，这将需要更多时间来执行。有明确的一点；您必须非常了解框架，这不仅意味着 API，您还必须阅读背后的源代码。这将使您能够真正缩短和固定您的代码。但我很抱歉，我不能给你一个涵盖所有方面的建议，因为每个变体都有优点和缺点。您每次都必须考虑它们。就像defaults 备用行一样，但是是额外的调用+迭代。这是一个简单的例子。
我知道它总是执行时间与开发时间或更短的代码。到目前为止，还没有来自 webstorm 的代码，我们将使用 eclipse 进行生产。我只是想知道是否有人已经发明了比我不需要重新发明轮子更好的方法。但是有一个问题，您是否发现我的实施方式有什么问题？我不是在这里询问短变量名称。
从长远来看，我不确定我是否看到了对您正在尝试做的事情的任何真正好处。正如@sra 指出的那样，无论如何您应该编译您的应用程序以进行生产，因此这使得执行时间差异毫无意义（并且它们在开发中毫无意义）。如果您不为生产进行编译/缩小，则会遇到更大的问题。

【解决方案2】：

除了 sra 所说的，没有什么能阻止你创建一些速记方法。

使用简单的生成函数和扩展/混合配置有很大帮助。

【讨论】：