1、過度或不必要的組件嵌套

開發(fā)人員最常犯的錯誤之一就是沒有理由的組件嵌套。這會損耗性能并且導致不夠美觀，比如雙邊框或布局異常等。在下面的例子中，有一個僅僅包含Grid的Panel，在這種情況下，Panel是不必要的。記住像Form、Tree、TabPanel和Grid都繼承自Panel，因此在使用這些組件時，應特別注意不必要的組件嵌套情況。

1. items: [{  
2.     xtype : 'panel',  
3.     title: ‘My Cool Grid’,  
4.     layout: ‘fit’,  
5.     items : [{  
6.         xtype : 'grid',  
7.         store : 'MyStore',  
8.         columns : [{...}]  
9.     }]  
10. }]  

1. layout: ‘fit’,  
2. items: [{  
3.     xtype : 'grid',  
4.     title: ‘My Cool Grid’,  
5.     store : 'MyStore',  
6.     columns : [{...}]  
7. }]  

2、未清除沒有使用的組件導致內(nèi)存泄露

許多開發(fā)者都想知道，為什么應用使用的時間越長，響應速度就越慢。在應用中未清除沒有使用的的組件是最大的原因。在下面的例子中，每次用戶在Grid的行上點擊右鍵菜單，一個新的Menu實例便會被創(chuàng)建。如果用戶一直使用應用并右鍵點擊了Grid行幾百次，那便會有幾百個Menu實例存在，并且永遠不會被銷毀。對開發(fā)者和用戶來說，應用表面上看起來是正確的，因為只有最后創(chuàng)建的Menu實例才會顯示在頁面上，其余的全都被隱藏了。隨著新的Menu實例被創(chuàng)建而老的又沒有被銷毀，應用消耗的內(nèi)存會持續(xù)保持增長。這最終會導致操作變得越來越慢甚至瀏覽器崩潰。

在初始化Grid的時候，只創(chuàng)建Menu實例一次并在每次用戶右鍵點擊時進行復用，是比較好的一種改善方式。即便如此，當Grid被銷毀時，上下文菜單雖然已經(jīng)不需要了，但卻依然存在。最好的方式是在Grid被銷毀時，上下文菜單也隨之進行銷毀。

1. Ext.define('MyApp.view.MyGrid',{  
2.     extend : 'Ext.grid.Panel',  
3.     columns : [{...}],  
4.     store: ‘MyStore’,  
5.     initComponent : function(){  
6.         this.callParent(arguments);  
7.         this.on({  
8.             scope : this,  
9.             itemcontextmenu : this.onItemContextMenu  
10.         });  
11.     },  
12.   
13.     onItemContextMenu : function(view,rec,item,index,event){  
14.         event.stopEvent();  
15.         Ext.create('Ext.menu.Menu',{  
16.             items : [{  
17.                 text : 'Do Something'  
18.             }]  
19.         }).showAt(event.getXY());  
20.   
21.     }  
22. });  

1. Ext.define('MyApp.view.MyGrid',{  
2.     extend : 'Ext.grid.Panel',  
3.     store : 'MyStore',  
4.     columns : [{...}],  
5.     initComponent : function(){  
6.         this.menu = this.buildMenu();  
7.         this.callParent(arguments);  
8.         this.on({  
9.             scope : this,  
10.             itemcontextmenu : this.onItemContextMenu,  
11.                    destroy: this.onDestroy  
12.         });  
13.     },  
14.   
15.     buildMenu : function(){  
16.         return Ext.create('Ext.menu.Menu',{  
17.             items : [{  
18.                 text : 'Do Something'  
19.             }]  
20.         });  
21.     },  
22.   
23.     onDestroy : function(){  
24.         this.menu.destroy();  
25.         this.callParent(arguments);  
26.     },  
27.   
28.     onItemContextMenu : function(view,rec,item,index,event){  
29.         event.stopEvent();  
30.         this.menu.showAt(event.getXY());  
31.     }  
32. });  

3、巨大的控制器

這是令人驚奇的，我們看到的應用常常會有一個由數(shù)千行代碼組成的巨大控制器。我們傾向于根據(jù)應用程序的功能來拆分我們的控制器，它使導航和維護代碼更容易。很多開發(fā)者喜歡通過視圖來拆分控制器。例如，如果一個應用有一個Grid和一個Form，那么將分別有一個管理Grid和管理From的控制器。只要你能始終保持一致，就沒有一種絕對正確的方式來分離控制器邏輯。另外，控制器可以和另外控制器產(chǎn)生聯(lián)系。下面的代碼將演示如何檢索其他的控制器并調(diào)用其方法。

1. this.getController('SomeOtherController').runSomeFunction(myParm);  

1. MyApp.getApplication().fireEvent('myevent');  

1. MyApp.getApplication().on({  
2.     myevent : doSomething  
3. });  

這并不會影響應用性能和操作，但卻讓人很難理清應用的文件組織結(jié)構(gòu)。隨著應用規(guī)模的擴大，如果你能很好地組織你的源碼，那么在代碼中迅速定位并添加新的特性和方法將變得比較容易。就像下圖所示，很多開發(fā)者會把所有的視圖文件（甚至整個項目）都放在同一個文件夾下。

我們推薦根據(jù)業(yè)務邏輯對視圖文件進行組織分類：

 

雖然使用全局變量的壞處眾所周知，但我們還是在最近審查的很多項目中看到。使用全局變量的應用存在命名沖突、難以調(diào)試等重大問題。相比使用全局變量，更好的做法是使用類的“properies”，并通過getters和setters來引用這些屬性。例如，為了讓你的應用記住最后被選擇的客戶，你可能會像下面的代碼一樣臨時定義一個變量，這很簡單并且它的值在應用的所有部分都是有效的。

1. myLastCustomer = 123456;  

BAD：使用全局變量來存儲客戶編號。

更好的實現(xiàn)方式是創(chuàng)建一個類，它持有的屬性可以在全局范圍內(nèi)使用。在這種情況下，我們可以創(chuàng)建一個名為Runtime.js的文件來保存運行時屬性。我們可以把該文件放在config文件夾下：

 

1. xtype : 'toolbar',  
2. itemId : ‘picturetoolbar’,  
3. items : [{  
4.     text : 'Save Picture',  
5.     itemId : 'savebutton'  
6. }]  
7.   
8. // somewhere else in the code we have another component with an itemId of ‘savebutton’  
9. xtype : 'toolbar',  
10. itemId: ‘ordertoolbar’,  
11. items : [{  
12.     text : ‘Save Order’,  
13.     itemId: ‘savebutton’  
14. }]  

有很多種方式可以通過itemId來獲得對組件的引用，如下面的代碼所示：

1. var pictureSaveButton = Ext.ComponentQuery.query('#picturetoolbar > #savebutton')[0];  
2.   
3. var orderSaveButton = Ext.ComponentQuery.query('#ordertoolbar > #savebutton')[0];   
4.   
5. // assuming we have a reference to the “picturetoolbar” as picToolbar  
6. picToolbar.down(‘#savebutton’); 

7、對組件不可靠的引用

我們時常看到一些代碼，通過組件定位來獲得對它的引用。如果有任何元素被添加、刪除或嵌套在不同的組件里，這樣的代碼將很容易被破壞。下面的代碼展示了常見的兩種情況：

1. var mySaveButton = myToolbar.items.getAt(2);  
2.   
3. var myWindow = myToolbar.ownerCt; 

BAD：避免通過組件定位來獲得對它的引用。

相反，應該像下面的代碼中通過ComponentQuery或組件的up/down方法來獲得對組件的引用。通過這種方式，代碼將不太容易被破壞，即使組件的結(jié)構(gòu)或順序發(fā)生了改變。

1. var mySaveButton = myToolbar.down(‘#savebutton’);    // searching against itemId  
2.   
3. var myWindow = myToolbar.up(‘window’); 

Ext在命名class、component、properties、xtype等時，遵從特定的大小寫規(guī)范。為了避免混淆和代碼清晰，應該始終遵從一致的命名規(guī)范。

1. xt.define(‘MyApp.view.customerlist’,{          // should be capitalized and then camelCase  
2.     extend : ‘Ext.grid.Panel’,  
3.     alias : ‘widget.Customerlist’,                       // should be lowercase               
4.     MyCustomConfig : ‘xyz’,                            // should be camelCase  
5.     initComponent : function(){  
6.         Ext.apply(this,{  
7.             store : ‘Customers’,  
8.             ….  
9.         });  
10.         this.callParent(arguments);  
11.     }  
12. });  

1. Ext.define(‘MyApp.view.CustomerList’,{        
2.     extend : ‘Ext.grid.Panel’,  
3.     alias : ‘widget.customerlist’,        
4.     myCustomConfig : ‘xyz’,              
5.     initComponent : function(){  
6.         Ext.apply(this,{  
7.             store : ‘Customers’,  
8.             ….  
9.         });  
10.         this.callParent(arguments);  
11.     }  
12. });  

9、限定組件在其父組件中的布局

在下面的代碼示例中，面板將總是擁有"region:center"屬性，因此你將不能在其他布局方位中復用它。

1. Ext.define('MyApp.view.MyGrid',{  
2.     extend : 'Ext.grid.Panel',  
3.     initComponent : function(){  
4.         Ext.apply(this,{  
5.             store : ‘MyStore’,  
6.             region : 'center',  
7.             ......  
8.         });  
9.         this.callParent(arguments);  
10.     }  
11. });  

下面的例子則展示在實例化組件并進行顯示的時候才定義布局屬性，通過這種方式你可以在任何地方復用該組件并且不會被布局屬性限制。

1. Ext.define('MyApp.view.MyGrid',{  
2.     extend : 'Ext.grid.Panel',  
3.     initComponent : function(){  
4.         Ext.apply(this,{  
5.             store : ‘MyStore’,  
6.             ......  
7.         });  
8.     }  
9. });  
10.   
11. // specify the region when the component is created...  
12. Ext.create('MyApp.view.MyGrid',{  
13.     region : 'center'   
14. });  

當然，你也可以給組件提供一個默認的布局屬性，然后在必要的時候進行重寫。

1. Ext.define('MyApp.view.MyGrid',{  
2.     extend : 'Ext.grid.Panel',  
3.     region : 'center', // default region  
4.     initComponent : function(){  
5.         Ext.apply(this,{  
6.             store : ‘MyStore’,  
7.             ......  
8.         });  
9.     }  
10. });  
11.   
12. Ext.create(‘MyApp.view.MyGrid’,{  
13.     region : ‘north’, // overridden region  
14.     height : 400  
15. });  

很多次我們看到的代碼都比實際需要的要復雜，這通常是不完全熟悉每個組件的可用方法的結(jié)果。最常見到的一種情況就是從數(shù)據(jù)記錄中分別去加載每一個表單字段。

1. //  suppose the following fields exist within a form  
2. items : [{  
3.     fieldLabel : ‘User’,  
4.     itemId : ‘username’  
5. },{  
6.     fieldLabel : ‘Email’,  
7.     itemId : ‘email’  
8. },{  
9.     fieldLabel : ‘Home Address’,  
10.     itemId : ‘a(chǎn)ddress’  
11. }];  
12.   
13. // you could load the values from a record into each form field individually  
14. myForm.down(‘#username’).setValue(record.get(‘UserName’));  
15. myForm.down(‘#email’).setValue(record.get(‘Email’));  
16. myForm.down(‘#address’).setValue(record.get(‘Address’));  

其實，可以使用loadRecord方法從數(shù)據(jù)記錄中一次性加載所有的表單字段，關鍵是表單字段的name屬性和數(shù)據(jù)記錄字段的name要保持一致。

1. items : [{  
2.     fieldLabel : ‘User’,  
3.     name : ‘UserName’  
4. },{  
5.     fieldLabel : ‘Email’,  
6.     name : ‘Email’  
7. },{  
8.     fieldLabel : ‘Home Address’,  
9.     name : ‘Address’  
10. }];  
11.   
12. myForm.loadRecord(record);  

以上只是眾多代碼復雜化的一個例子，解決這個問題的要點是要瀏覽所有的組件方法和實例，已確保自己正在使用簡單、合適的技術。

原文鏈接：https://www./blog/top-10-ext-js-development-practices-to-avoid-2/