[Extjs 4] 类系统| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Extjs 4] 类系统

## [Extjs 4] 类系统
### 概述
Ext JS 4 有300多个类。
JavaScript 是一个原型驱动的语言。这种语言的优势就是弹性大，可以使用不同的方法，不同的代码风格和技术实现同样的功能，缺点就是难预见，没有统一的结构，难于理解，维护和重用。
面向对象的编程方式需要强类型，提供封装和强调代码标准规范，它需要开发者需遵循一大堆规则，编写的代码是更可能是可预测的，可扩展的，可扩展的。但是就是不过动态和零活。
Ext JS4 号称是结合了两者的长处，规避了两者的弱点。

### 命名规则
在代码库的类，命名空间和文件中使用统一的命名规范有助于使代码组织化，结构化和可读化。
1） 类
类名仅包含字母和数字字符； 虽然数字字符是允许的，但是除非类名是一个技术术语，否则尽量不要使用。不要使用下划线，连字符和其他的非数字字母的字符。
比如：
MyCompany.useful_util.Debug_Toolbar  ==》 不推荐使用
MyCompany.util.Base64  ==》 可以使用(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）源文件
类的命名和定义的源文件的路径要对应起来。比如：
Ext.util.Observable保存在 src/Ext/util/Observable.js
Ext.form.action.Submit保存在 src/Ext/form/action/Submit.js
3） 方法和变量
命名规则和类的命名规则是完全一样的。
4）属性
静态的常量全部使用大写字母，其他的用驼峰法命名，比如：
Ext.MessageBox.YES = "Yes"
Ext.MessageBox.NO = "No"
MyCompany.alien.Math.PI = "4.13"

### 实例
1.  声明
1.1） 旧的方式
在旧版的Ext JS(3.0) 中， 使用如下方式定义类
My.cool.Window = Ext.extend(Ext.Window, { ... });
这种定义方式有两个问题：
1. My.cool 这个对象需要存在(使用Ext.namespace (aliased byExt.ns)定义)
2. Ext.Window 必须要定义(或以及导入)
1.2）新的方式
Ext.define(className, members, onClassCreated);
举个例子：
```javascript
Ext.define('My.sample.Person', {
name: 'Unknown',
constructor: function(name) {
if (name) {
this.name = name;
        }
returnthis;
    },
eat: function(foodType) {
alert(this.name + " is eating: " + foodType);
returnthis;
    }
});
```
这样的话， 在旧的方式下遇到的问题也就解决了。
定义了类型，如何new 一个类的实例呢？
var aaron = Ext.create('My.sample.Person', 'Aaron');

使用Ext.create  方式， 而不使用 new My.sample.Person() , 好处就是可以动态加载。

2. 配置
Ext JS 4配置的新特性有：
1) 配置完全的封装
2) 每个配置属性自动产生Getter  和Setter 方法
3) 自动为每个配置属性产生apply 方法。自动产生的setter 方法在设值之前调用apply 方法。如果apply 方法没有返回值则setter 就不会设置值了。例如：
```javascript
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);
returnthis;
    },
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) {
returnExt.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 
```

3.  静态
可以使用 static 配置静态成员，例如：
```javascript
Ext.define('Computer', {
statics: {
instanceCount: 0,
factory: function(brand) {
// 'this' in static methods refer to the class itself
returnnewthis({brand: brand});
        }
    },
config: {
brand: null
    },
constructor: function(config) {
this.initConfig(config);
// the 'self' property of an instance refers to its class
this.self.instanceCount ++;
returnthis;
    }
});
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"
```

### 错误处理和调试
Ext JS 4 提供了一些有用的特性用来调试和错误处理
 使用 Ext.getDisplayName()  得到方法的显示名称， 使用方式：
```java
throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');
```

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Extjs 4] 类系统

网站导航