在开发 ExtJS 应用程序常犯的 10 个错误

这是 CNX 公司在开发 ExtJS 项目中总结的需要特别注意的 10 个地方。有时候，我们完全是自己使用 ExtJS 从零开始构建的新的应用程序，但有时候我们的客户会要求我们使用他们自己的代码，并且帮助他们提高性能、解决bug以及结构上的问题。同时，我们已经在 ExtJS 项目中作为“清洁者”的角色工作相当长的一段时间了，开始注意到项目中经常会出现一些很值得优化的代码，而这些情况不仅仅只在我们的项目中出现，也会经常出现在其他开发者的代码中。基于过去几年对我们自己工作的总结，我们想应该把这些经验分享给大家，避免大家在项目中出现类似的问题。
 
 
过度或不必要的嵌套组件结构
开发时常出现的一个问题是没有原因的使用嵌套组件。这样做会损害软件的性能，也会给软件造成像两条边界或者不正常的图层等不好看的界面。在下面的示例 1A 中，我们有一个包含一个简单表格的面板。在这种情况下，这个面板是不必要的。因为在示例 1B 中，去掉这个额外的面板依然可以工作得很好。请记住这些格式：trees, tab panels 以及 grids 这些全部都是继承自 Panel，无论什么时候使用这些组件时，都不需要额外再添加嵌套面板的。
 
 
 
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 已经是一个 panel 了，所以直接设置 panel 中的属性就可以了。
 
 
 
因清除组件对象失败而导致内存泄露
很多开发者都遇到过这样的问题，为什么他们编写的应用程序使用过程中会变得越来越慢呢？很大的可能是因为清除不再使用的和一些无关紧要(用户导航)的组件对象失败造成的。在示例 2A 所示，用户每一次右击表格中某一行时，一个新的上下文菜单就被创建了。如果用户一直运行这个应用程序，并且右击很多次，那么程序中将会存在非常多的未被销毁并且永远都不会销毁的对象。对于开发者和用户来看，因为只会看到最后一个菜单，所以这个应用程序“看起来”是没问题的。其实只是因为其余创建的菜单对象暂时都被隐藏起来了。因为新的菜单创建前没有释放旧的菜单对象，应用程序所使用到的内存将会不断地增长。这样最终造成了响应变慢或浏览器的崩溃。
 
示例 2B 是更合理的，因为菜单只会在表格初始化时创建一次，并且用户每一次的右击都是使用的同一个菜单对象。但是，如果表格对象被销毁时，即这个菜单对象以后都不会再用到了，但是依然没有被销毁掉而永远都占用着内存。最好的解决方案是示例 2C，因为菜单对象会随着表格对象的销毁而销毁。
 
 
 
 
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. 差: 每一次右击都会创建一个菜单并且每一个菜单都不会被销毁掉.
 
 
 
 
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());    }}); 
 
示例 2B. 好一些: 菜单只会在表格初始化时创建一次并且每次使用的都是同一个菜单对象.
 
 
 
 
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'            }]        });    },     onDestroy : function(){        this.menu.destroy();        this.callParent(arguments);    },     onItemContextMenu : function(view,rec,item,index,event){        event.stopEvent();        this.menu.showAt(event.getXY());    }}); 
 
示例 2C. 最好: 当表格销毁时，菜单也会跟着销毁.
 
 
 
庞大的控制器代码
每当我们看到一个包含了上千行的代码的巨大控制器，都会感到非常惊讶。我们倾向于喜欢通过分割成小函数的方法来打断这个巨大的控制器。例如，一个订单处理程序可能包含流水线项、载货量，用户搜索等独立的逻辑控制块。通过拆分成小的处理函数能使更查找和管理这些代码变得更加简单和方便。
 
一些开发者喜欢通过添加新视图代码来解决大控制器代码的问题。例如，如果一个应用程序有一个表格和一个表单，通常将会有一个控制器管理表格和另一个控制器来管理表单。当然，不存在一种“绝对正确”的方法区分你现在正在写的代码是否使用了正确的逻辑控制器代码。但只需要记住，控制器是用来与其他控制器进行交互的。在示例 3A 中，你可以看到怎么从另外一个控制器取回引用对象，并再次调用它的函数。
 
 
 
 
this.getController('SomeOtherController').runSomeFunction(myParm); 
示例 3A. 获取另外一个控制器的引用并且调用它的方法.
 
另外，你可以触发一个应用程序级别(即所有控制器都可以监听)的事件。在示例 3B 和 3C 中，你可以看到怎么在一个控制器中触发一个应用程序级别的事件，并且在另外一个控制器监听到这个触发的事件。
 
 
 
 
MyApp.getApplication().fireEvent('myevent');&nbs

补充：web前端 , JavaScript ,