ExtJS 4的类系统（class system）进行了一次重大重构，ExtJS4的新架构就是基于这套新的类系统构建的，因此有必要先了解以下这个class system
这篇文章分为四章
- I: “Overview” 解释健壮类系统的重要性
- II: “Naming Conventions” 最佳命名规范实践（其实是要求必须遵照它的规范）
- III: “Hands-on” 详细的例子
- IV: “Errors Handling & Debugging” 一些处理问题的实用提示
I. Overview 概览
ExtJS 4 有300多个类，社区里有20w+不同背景的开发者，提供一个好的代码架构是个巨大的挑战：
- 易学，学习成本低
- 快速开发，容易调试和发布
- 组织良好，可扩展可维护
JavaScript是个基于原型链继承的语言，没有类的概念。而且JavaScript语言特点就是松散和自由，实现一个同样的功能，可以有很多种方式，但是如果放任它的松散和自由，就很难维护和重用代码。
面向对象编程绝大部分都是基于类的。基于类的编程语言通常需要强类型，提供代码封装，并且有标准的编码习惯，说了一堆废话，不翻译了，总结以下就是能做到既有面向对象编程的规范性，又能做到JavaScript的灵活性
II. Naming Conventions 命名规范
命名规范，使用一致的命名规范可以让你的代码结构清晰，可读性强。
1. Classes 类
类名只能包含字母数字，不推荐使用数字，除非是常用词。不要用下划线中化纤等非字母数字字符。
- MyCompany.useful_util.Debug_Toolbar 不合法
- MyCompany.util.Base64 合法
类应该组织在包或者说命名空间下面，并且至少要有一个顶层命名空间，例如：
MyCompany.data.CoolProxy
MyCompany.Application顶层命名空间和真正的类，应该采用驼峰式命名，其他一律小写，例如：
MyCompany.form.action.AutoLoad非Ext官方类，不可以在Ext顶层命名空间下（这是为了防止冲突）
首字母组合词也要采用驼峰式命名，例如：
- Ext.data.JsonProxy 而不是 Ext.data.JSONProxy
- MyCompany.util.HtmlParser 而不是 MyCompary.parser.HTMLParser
- MyCompany.server.Http 而不是 MyCompany.server.HTTP
2. Source Files 源文件
类的命名和源文件存放路径是对应的，例如：
- 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就是程序跟目录下的那个app目录，所有类都应该这样组织，保证维护性
3. Methods and Variables 方法和成员变量
- 和类名一样只能用字母和数字，其他符号不可以
- 同样是驼峰命名，但是首字母小写，首字母组合词也如此
例如：
- 合法的方法名：
encodeUsingMd5(),getHtml()代替getHTML(),getJsonResponse()代替getJSONResponse(),parseXmlContent()代替parseXMLContent() - 合法的变量名：
var isGoodName;,var base64Encoder,var xmlReader,var httpServer
4. Properties 属性
- 跟成员变量一致
- 如果是常量
Ext.MessageBox.YES = "Yes"
Ext.MessageBox.NO = "No"
MyCompany.alien.Math.PI = "4.13"III. Hands-on 实践一下
1. Declaration 声明
1.1 老的方式
如果你使用过ExtJS 3或者之前的版本，可能会熟悉Ext.extend，可以用来创建一个类
1
var MyWindow = Ext.extend(Object, { ... });这个方法很容易就可以声明一个类并继承自另一个类，但是也有缺陷
1
My.cool.Window = Ext.extend(Ext.Window, { ... });这个例子中我们需要把类定义在命名空间里，并继承自Ext.Window类，但是有两个问题：
My.cool必须之前定义过，这个命名空间必须已经存在Ext.Window必须已经加载
第一条通常可以使用Ext.namespace（同Ext.ns）解决，这个方法会把不存在的命名空间都创建出来，无聊的是你必须记得在Ext.extend之前加上这句话
Ext.ns(‘My.cool‘);
My.cool.Window = Ext.extend(Ext.Window, { ... });第二个问题，ExtJS4以前的版本都不好解决依赖问题，因此通常是引入ext-all.js
1.2 新的方式
ExtJS 4 消除了这些弊端，只需要记住一个方法：Ext.define，基本语法如下
Ext.define(className, members, onClassCreated);className要声明的类的名字members一个对象，包含类成员onClassCreated一个可选的回调函数，因为新的异步加载机制，这个回调函数会很有用，当所有依赖已经引入，并且类完全创建好了之后，这个函数会被调用
例子
Ext.define(‘My.sample.Person‘, {
name: ‘Unknown‘,
constructor: function(name) {
if (name) {
this.name = name;
}
},
eat: function(foodType) {
alert(this.name + " is eating: " + foodType);
}
});
var aaron = Ext.create(‘My.sample.Person‘, ‘Aaron‘);
aaron.eat("Salad"); // alert("Aaron is eating: Salad");注意这里创建一个新的My.sample.Person实例使用的是Ext.create()方法，使用new关键字也可以创建实例（new My.sample.Person()），但是不推荐使用new，应该养成使用Ext.create的习惯，因为这样可以利用到动态加载的好处，有关动态加载可以参看我的另外一篇教程 ExtJS 4 入门
2. Configuration 配置（实例成员）
ExtJS 4 中引入了一个专用的config属性，这个属性在类创建之前，会被Ext.Class预先处理，并有一下特性：
- 配置项被封装起来，和类的其他属性方法不混杂在一起了
- 自动生成了属性的getter和setter
- 自动生成了一个
apply方法，apply方法在setter之前调用，可以通过apply方法定制setter的行为，如果apply方法没有返回值，setter就不会起作用，可以参见下面的例子中applyTitle
Ext.define(‘My.own.Window‘, {
/** @readonly */
isWindow: true,
config: {
title: ‘Title Here‘,
bottomBar: {
enabled: true,
height: 50,
resizable: false
}
},
constructor: function(config) {
this.initConfig(config);
},
applyTitle: function(title) {
if (!Ext.isString(title) || title.length === 0) {
alert(‘Error: Title must be a valid non-empty string‘);
}
else {
return title;
}
},
applyBottomBar: function(bottomBar) {
if (bottomBar && bottomBar.enabled) {
if (!this.bottomBar) {
return Ext.create(‘My.own.WindowBottomBar‘, bottomBar);
}
else {
this.bottomBar.setConfig(bottomBar);
}
}
}
});这是如何使用上面的例子
var myWindow = Ext.create(‘My.own.Window‘, {
title: ‘Hello World‘,
bottomBar: {
height: 60
}
});
alert(myWindow.getTitle()); // alerts "Hello World"
myWindow.setTitle(‘Something New‘);
alert(myWindow.getTitle()); // alerts "Something New"
myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string"
myWindow.setBottomBar({ height: 100 }); // Bottom bar‘s height is changed to 1003. Statics 静态成员
静态成员通过statics属性设置：
Ext.define(‘Computer‘, {
statics: {
instanceCount: 0,
factory: function(brand) {
// ‘this‘ in static methods refer to the class itself
return new this({brand: brand});
}
},
config: {
brand: null
},
constructor: function(config) {
this.initConfig(config);
// the ‘self‘ property of an instance refers to its class
this.self.instanceCount ++;
}
});
var dellComputer = Computer.factory(‘Dell‘);
var appleComputer = Computer.factory(‘Mac‘);
alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac"
alert(Computer.instanceCount); // Alerts "2"IV. Errors Handling & Debugging 错误处理和调试
ExtJS 4 引入了很多有用的特性帮助调试和错误处理
可以使用Ext.getDisplayName()获得函数名称，例如
1
throw new Error(‘[‘+ Ext.getDisplayName(arguments.callee) +‘] Some message here‘);在用Ext.define()定义出来的类中抛出（throw）错误（error），可以在safari或者chrome的控制台中看到方法名和类名和调用栈
