ExtJs使用了大量的设计模式来编写,表现形式,以及控件使用不想多谈了。我从2.0做到4.0最大的感慨是:更新太快,很多好的东西在最新版本,但是最新版本不支持前面版本的代码。
基于脚本的灵活性总结:
1.代码命名务必规范
2.整体框架一定要清晰
3.代码一定要有可扩展性
(一)编码和规范
--------------------------------------------------------------------------------
*在所有类、命名空间(namespace)和文件名中使用一致的命名约定,有助于保持代码的良好结构和可读性。
1) Classes
类名只能包含字母和数字。允许包含数字,但是大部分情况下不建议使用,除非这些数字是专业术语的一部分。不要使用下划线,连字符等非数字字母符号。例如:
MyCompany.useful_util.Debug_Toolbar is discouraged
MyCompany.util.Base64 is acceptable
类名应该包含在使用点号分隔的命名空间中。至少,要有一个顶级命名空间。例如:
MyCompany.data.CoolProxyMyCompany.Application
顶级命名空间和实际的类名应使用驼峰命名(CamelCased),其他则为小写。例如:
MyCompany.form.action.AutoLoad
不是Sencha开发的类(即不是Ext自带的)不要使用Ext做为顶级命名空间。缩写也要遵守以上的驼峰式命名约定。例如:
Ext.data.JsonProxy instead of Ext.data.JSONProxy
MyCompany.util.HtmlParser instead of MyCompary.parser.HTMLParser
MyCompany.server.Http instead of MyCompany.server.HTTP
2) 代码文件类名对应类所在的文件(包括文件名)。因此,每个文件应该只包含一个类(类名和文件名一样)。例如:
Ext.util.Observable 存放在 path/to/src/Ext/util/Observable.js
Ext.form.action.Submit 存放在 path/to/src/Ext/form/action/Submit.js
MyCompany.chart.axis.Numeric 存放在 path/to/src/MyCompany/chart/axis/Numeric.js
path/to/src 是你的应用所在目录。所有类都应该在这个通用根目录下,并且使用适当的命名空间以利于开发、维护和部署。
3)方法和变量
•和类命名一样,方法和变量也只能包含字母和数字。数字同样是允许但不建议,除非属于专业术语。不要使用下划线,连字符等任何非字母数字符号。
•方法和变量名一样使用驼峰式命名,缩写也一样。
•举例
•合适的变量名: _labTelephone; _grid;
•合适的变量名:
方法:getForm,setState.......
事件:onClick,onContextMenuClick.....
(二).整体框架一定要清晰。
+++
|-- css 样式文件
|-- ext ExtJS库
|-- images 图片文件
|-- javascript 脚本文件
|-- data 数据类
|-- google Google相关
|-- map 地图类
|-- module 模块类
|-- webui 界面类
App.js 逻辑类
Global.js 全局类
Lang.js 语言类
Module.js 模块类
(三).类库的使用一定要特别注重通用性。
ex:3.0和4.0对于store这个的不同就是很大区别。我用3.0开发的系统,升级到4.0,那么就要重写曾经所有的store。
那么最方面的方法:用一个类专门管理store;对外部只提供接口
WebIM.Common = {
/** 生成数据访问类 <适应本地数组和ajax>
@param 数据源的抽象
@param【比如3-4版本的改动,就只需要改动这里,不需要对每个改动】
@param {Object} opts { url: '', id: '', data: '', total: '', fields: [], ...}
*/
newDataStore: function(opts)
{
opts = opts || {};
return new Ext.data.Store(Ext.applyIf(opts, {
autoLoad: opts.autoload ? true : opts.autoload,
autoDestroy: opts.autodestroy ? true : opts.autodestroy,
pageSize: opts.pagesize || 25,
// model: WebIM.DataModel,
fields: opts.fields || [],
remoteSort: opts.remotesort ? opts.remotesort : true,
proxy: opts.proxy ? opts.proxy : {
url: opts.url,
type: 'ajax',
reader: {
type: 'json',
root: opts.data || 'data',
idProperty: opts.id || 'id',
totalProperty: opts.total || 'total',
successProperty: 'success'
},
extraParams: opts.extraparams ? opts.extraparams : null,
simpleSortMode: opts.simplesortmode ? opts.simplesortmode : true
},
listeners: Ext.applyIf(opts.listeners || {},
{
exception: function(st, type, act, req, rsp)
{
alert("a")
}
})
}))
}
}