ExtJS 4 类系统(Class System)介绍

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，可以用来创建一个类

var MyWindow = Ext.extend(Object, { ... });

这个方法很容易就可以声明一个类并继承自另一个类，但是也有缺陷

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 100

3. 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()

获得函数名称，例如

throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');

在用

Ext.define()

定义出来的类中抛出（throw）错误（error），可以在safari或者chrome的控制台中看到方法名和类名和调用栈