在Ext.JS應(yīng)用程序中應(yīng)該避免的開發(fā)方法有哪些

這篇文章給大家分享的是有關(guān)在Ext.JS應(yīng)用程序中應(yīng)該避免的開發(fā)方法有哪些的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

1. 過多或不必要的組件嵌套

開發(fā)人員最常見的錯(cuò)誤之一是沒理由的嵌套組件。這樣做，會(huì)影響性能和也會(huì)造成應(yīng)用程序的不美觀，如爽邊框火意外的布局行為。在下面的示例1A，在面板內(nèi)只包含了一個(gè)Grid。在這種情況下，該面板是不必要的。如示例1B所示，額外的面板可以取消。要記住的是，表單面板、樹面板、標(biāo)簽面板和Grid面板都是從面板擴(kuò)展的，隱藏，在使用這些組件的時(shí)候，應(yīng)該特別注意不要的嵌套情況。

items: [{
    xtype : 'panel',
    title: ‘My Cool Grid’,
    layout: ‘fit’,
    items : [{
        xtype : 'grid',
        store : 'MyStore',
        columns : [{...}]
    }]
}]

示例1A  不好的：面板（panel）是不必要的

layout: ‘fit’,
items: [{
    xtype : 'grid',
    title: ‘My Cool Grid’,
    store : 'MyStore',
    columns : [{...}]
}]

示例1B 好：Grid已經(jīng)是面板，因而可以直接在Grid中使用任何面板屬性

2. 清理未使用組件失敗造成內(nèi)存泄漏

許多開發(fā)人員不知道為什么他們的應(yīng)用程序隨著使用時(shí)間越長越來越慢。在用戶瀏覽整個(gè)應(yīng)用程序期間清理未使用組件失敗是最大的一個(gè)原因。在下面的實(shí)例2A中，每次用戶右鍵單擊Grid的行，都會(huì)創(chuàng)建一個(gè)新的右鍵菜單。如果用戶保持應(yīng)用程序處于打開狀態(tài)并右鍵單擊行上百次，那么，就會(huì)有上百個(gè)永遠(yuǎn)不會(huì)被摧毀的右鍵菜單。對(duì)于開發(fā)人員和用戶來說，應(yīng)用程序“看上去”顯示是爭取的是因?yàn)橹挥凶詈笠粋€(gè)被創(chuàng)建的菜單能顯示在頁面上，而且與的則是隱藏的。由于沒有創(chuàng)建新菜單并沒有清理舊的，應(yīng)用程序的內(nèi)存利用率就會(huì)不斷增長，這最終將導(dǎo)致較慢的操作或?yàn)g覽器崩潰。

示例2A就很好，由于右鍵菜單只在Grid初始化時(shí)創(chuàng)建一次，并在用戶每次右鍵單擊行時(shí)重復(fù)使用。不過，如果Grid被銷毀，右鍵菜單一直存在，盡管它不再需要。最好的方式是示例2C，在Grid銷毀的時(shí)候，把右鍵菜單也銷毀。

Ext.define('MyApp.view.MyGrid',{
    extend : 'Ext.grid.Panel',
    columns : [{...}],
    store: ‘MyStore’,
    initComponent : function(){
        this.callParent(arguments);
        this.on({
            scope : this,
            itemcontextmenu : this.onItemContextMenu
        });
    },
                                                                                                                                           
    onItemContextMenu : function(view,rec,item,index,event){
        event.stopEvent();
        Ext.create('Ext.menu.Menu',{
            items : [{
                text : 'Do Something'
            }]
        }).showAt(event.getXY());
                                                                                                                                           
    }
});

示例2A 不好：每一次右鍵單擊都會(huì)創(chuàng)建菜單，且永遠(yuǎn)不會(huì)被銷毀

Ext.define('MyApp.view.MyGrid',{
    extend : 'Ext.grid.Panel',
    store : 'MyStore',
    columns : [{...}],
    initComponent : function(){
        this.menu = this.buildMenu();
        this.callParent(arguments);
        this.on({
            scope : this,
            itemcontextmenu : this.onItemContextMenu
        });
    },
                                                                                                                                   
    buildMenu : function(){
        return Ext.create('Ext.menu.Menu',{
            items : [{
                text : 'Do Something'
            }]
        });
    },
                                                                                                                                   
    onItemContextMenu : function(view,rec,item,index,event){
        event.stopEvent();
        this.menu.showAt(event.getXY());
    }
});

感謝各位的閱讀！關(guān)于“在Ext.JS應(yīng)用程序中應(yīng)該避免的開發(fā)方法有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！