extjs4 开发中应该避免的10个问题
1.避免大量的或没必要的组件结构的嵌套
这样会导致extjs运行的性能问题
例.1A
items:[{
xtype :'panel',
title: 'My Cool Grid',
layout: 'fit',
items :[{
xtype :'grid',
store :'MyStore',
columns :[{...}]
}]
}]
例 1A. 缺点: 'panel' 是没必要的。
例.1B
layout: ‘fit’,
items:[{
xtype :'grid',
title: 'My Cool Grid',
store :'MyStore',
columns :[{...}]
}]
例 1B. 优点: grid 本身就是一个panle ,所以直接在grid配置panel中的所有属性就可以了.
2.避免没有清除没有使用的组件导致的内存泄漏
许多开发者奇怪于为什么他们使用app时间越长速度越慢。其中一个最大的原因是没有清楚掉未使用的组件。例如在如下例2A中，每次用户在grip面板上右击，就会有一个contexmenu被创建。假设app一直开着且用户右击了很多次，这时候app会因为很多contentmenu没有被销毁而发生内存泄漏。
例2A
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. 缺点: 右键点击的菜单只创建不销毁。
例2B Ext.define('MyApp.view.MyGrid',{ extend :'Ext.grid.Panel', store :'MyStore', columns :[{...}], initComponent :function(){ this.menu=Ext.create('Ext.menu.Menu',{ items :[{ text :'Do Something'} ]} ); this.callParent(arguments); this.on({ scope :this, itemcontextmenu :this.onItemContextMenu }); }, onItemContextMenu :function(view,rec,item,index,event){ event.stopEvent(); this.menu.showAt(event.getXY()); } });
例 2B. 优点: contentmenu只被创建一次
例2C
Ext.define('MyApp.view.MyGrid',{
extend :'Ext.grid.Panel',
store :'MyStore',
columns :[{...}],
initComponent :function(){
this.menu=Ext.create('Ext.menu.Menu',{
items :[{
text :'Do Something'
}]
});
this.callParent(arguments);
this.on({
scope :this,
itemcontextmenu :this.onItemContextMenu
});
},
onDestroy :function(){
this.menu.destroy();
this.callParent(arguments);
},
onItemContextMenu :function(view,rec,item,index,event){
event.stopEvent();
this.menu.showAt(event.getXY());
}
});
例2C. 优点: 当grid销毁了, contextmenu也销毁了.
3.避免巨大的控制器文件（monster controllers 这个求个优雅的翻译）
我们常常看见一个应用程序中的一个controller有上千行代码。其实我们更倾向与把控制器文件按照功能分成多个controller文件。例如一个订单处理的app可能会有为商品列表，发货流程，用户查询等各自建立一个controller文件。这样做使代码更容易维护了。
一些开发者喜欢根据view来分控制器文件。例如，如果有一个app有一个grid和一个form，这时就相应的会有一个控制器是管理grid的 一个控制器是管理form的。不管是是按功能还是view来分控制器，逻辑一致就可以了。只要记住控制器之间是可以进行通信的
例如下面这个例子 一个控制器中可以调用另一个控制器的方法。
this.getController('SomeOtherController').runSomeFunction(myParm);
当然你也有第二个选择 在一个控制器中触发一个事件 。另一个控制器去监听这个事件
//触发一个事件
MyApp.getApplication().fireEvent('myevent');
//在另外一个控制器中监听该事件
MyApp.getApplication().on({myevent : doSomething});
总之一句话 controller不要都写在一个文件中。
4 避免使用不好的代码目录结构
虽然这不是性能上的问题，但影响代码的可维护性。如例4A.所有view文件都放在一个文件夹中，对比例4B 根据功能把不同把view放在不同的文件夹，两者对比，不言而喻。
例4A
例4B
5 避免使用全局变量
不要在自己的app中使用全局变量是众所周知的，但还是能看到很多开发者老是犯这个错。
6 避免id的使用
尽量不要使用id，原因很简单，app一但增大，id的使用很容出现冲突。建议使用itemId
7 避免不可靠的组件引用的使用
下面这样的写法不可靠 因为只要你这种引用很容易因为组件的添加和删除或者嵌套的原因，导致程序出错，应该尽量避免下面的写法
var mySaveButton = myToolbar.items.getAt(2);
var myWindow = myToolbar.ownerCt;
应该类似下面的做法进行组件的引用
var mySaveButton = myToolbar.down('#savebutton');// searching against itemId
var myWindow = myToolbar.up('window');
8 大小写的问题
这里不做讨论，自己看下E文 我在文末给出原文，这是一个程序员必须有的一个习惯，很重要
9 避免限制一个组件的属性不可配置
下面这个面板布局，属性永远是 'region:center',该面板在重用时无法改变属性 'region'值为'west'
Ext.define('MyApp.view.MyGrid',{
extend :'Ext.grid.Panel',
initComponent :function(){
Ext.apply(this,{
store : 'MyStore',
region :'center',
......
});
this.callParent(arguments);
}
});
为了重用 应该按下面的例子的写法
Ext.define('MyApp.view.MyGrid',{
extend :'Ext.grid.Panel',
initComponent :function(){
Ext.apply(this,{
store : 'MyStore',
......
});
}});
// 在组件创建的时候就指定 属性region
Ext.create('MyApp.view.MyGrid',{
region :'center'
});
从上面的对比中，可以看出在定义一个组件的时候，配置属性最好配置在组件initComponet方法之外，这样这些属性只是默认属性 ，在创建的时候你还可以修改，否则你的配置都无效
10 避免使你的代码复杂难懂
// 假设下面是一份表单的配置
items :[{
fieldLabel : 'User',
itemId : ‘username’
},{
fieldLabel : 'Email',
itemId : 'email'
},{
fieldLabel : 'Home Address',
itemId : 'address'
}];
// 你的数据是分开一个一个设置表单数据
myForm.down(‘#username’).setValue(record.get(‘UserName’));
myForm.down(‘#email’).setValue(record.get(‘Email’));
myForm.down(‘#address’).setValue(record.get(‘Address’));
而对比下面的代码
items :[{
fieldLabel : ‘User’,
name: ‘UserName’
},{
fieldLabel : ‘Email’,
name: ‘Email’
},{
fieldLabel : ‘Home Address’,
name: ‘Address’
}];
myForm.loadRecord(record);
明显 代码简洁明了
主要提醒的尽量对extjs的api熟悉，否则很容易写出晦涩难懂的代码
以上是我对原文的翻译，我并不是一句一句的翻译，文章后面都是我根据理解进行书写，如果和原文表达的原译有出入，还望不吝指正
原文链接http://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid/
浙公网安备 33010602011771号