完美世界有声小说全集_[Extjs 4] 類(lèi)系統| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

[Extjs 4] 類(lèi)系統

## [Extjs 4] 類(lèi)系統
### 概述
Ext JS 4 有300多個(gè)類(lèi)。
JavaScript 是一個(gè)原型驅動(dòng)的語(yǔ)言。這種語(yǔ)言的優(yōu)勢就是彈性大，可以使用不同的方法，不同的代碼風(fēng)格和技術(shù)實(shí)現同樣的功能，缺點(diǎn)就是難預見(jiàn)，沒(méi)有統一的結構，難于理解，維護和重用。
面向對象的編程方式需要強類(lèi)型，提供封裝和強調代碼標準規范，它需要開(kāi)發(fā)者需遵循一大堆規則，編寫(xiě)的代碼是更可能是可預測的，可擴展的，可擴展的。但是就是不過(guò)動(dòng)態(tài)和零活。
Ext JS4 號稱(chēng)是結合了兩者的長(cháng)處，規避了兩者的弱點(diǎn)。

### 命名規則
在代碼庫的類(lèi)，命名空間和文件中使用統一的命名規范有助于使代碼組織化，結構化和可讀化。
1） 類(lèi)
類(lèi)名僅包含字母和數字字符； 雖然數字字符是允許的，但是除非類(lèi)名是一個(gè)技術(shù)術(shù)語(yǔ)，否則盡量不要使用。不要使用下劃線(xiàn)，連字符和其他的非數字字母的字符。
比如：
MyCompany.useful_util.Debug_Toolbar  ==》 不推薦使用
MyCompany.util.Base64  ==》 可以使用(Base64是專(zhuān)業(yè)術(shù)語(yǔ))
使用點(diǎn)連接符(.) 把類(lèi)放入不同的包的命名空間中。 至少，所有的類(lèi)有一個(gè)唯一的頂層命名空間， 比如：
MyCompany.data.CoolProxy
MyCompany.Application

頂層的命名空間和實(shí)際的類(lèi)名使用駝峰法命名，其他的全部使用小寫(xiě)，比如：
MyCompany.form.action.AutoLoad

開(kāi)發(fā)時(shí)不要使用Ext作為頂級命名空間(原因就是Ext本身就是使用這個(gè)了)
縮略語(yǔ)應盡量使用駝峰法命名：比如：
Ext.data.JsonProxy 取代 Ext.data.JSONProxy
MyCompany.util.HtmlParser 取代 MyCompary.parser.HTMLParser
MyCompany.server.Http 取代 MyCompany.server.HTTP

2）源文件
類(lèi)的命名和定義的源文件的路徑要對應起來(lái)。比如：
Ext.util.Observable保存在 src/Ext/util/Observable.js
Ext.form.action.Submit保存在 src/Ext/form/action/Submit.js
3） 方法和變量
命名規則和類(lèi)的命名規則是完全一樣的。
4）屬性
靜態(tài)的常量全部使用大寫(xiě)字母，其他的用駝峰法命名，比如：
Ext.MessageBox.YES = "Yes"
Ext.MessageBox.NO = "No"
MyCompany.alien.Math.PI = "4.13"

### 實(shí)例
1.  聲明
1.1） 舊的方式
在舊版的Ext JS(3.0) 中， 使用如下方式定義類(lèi)
My.cool.Window = Ext.extend(Ext.Window, { ... });
這種定義方式有兩個(gè)問(wèn)題：
1. My.cool 這個(gè)對象需要存在(使用Ext.namespace (aliased byExt.ns)定義)
2. Ext.Window 必須要定義(或以及導入)
1.2）新的方式
Ext.define(className, members, onClassCreated);
舉個(gè)例子：
```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;
    }
});
```
這樣的話(huà)， 在舊的方式下遇到的問(wèn)題也就解決了。
定義了類(lèi)型，如何new 一個(gè)類(lèi)的實(shí)例呢？
var aaron = Ext.create('My.sample.Person', 'Aaron');

使用Ext.create  方式， 而不使用 new My.sample.Person() , 好處就是可以動(dòng)態(tài)加載。

2. 配置
Ext JS 4配置的新特性有：
1) 配置完全的封裝
2) 每個(gè)配置屬性自動(dòng)產(chǎn)生Getter  和Setter 方法
3) 自動(dòng)為每個(gè)配置屬性產(chǎn)生apply 方法。自動(dòng)產(chǎn)生的setter 方法在設值之前調用apply 方法。如果apply 方法沒(méi)有返回值則setter 就不會(huì )設置值了。例如：
```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.  靜態(tài)
可以使用 static 配置靜態(tài)成員，例如：
```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 提供了一些有用的特性用來(lái)調試和錯誤處理
 使用 Ext.getDisplayName()  得到方法的顯示名稱(chēng)， 使用方式：
```java
throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');
```

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

[Extjs 4] 類(lèi)系統

網(wǎng)站導航