ExtJS4官方文檔之三--類(lèi)體系概述與實(shí)踐_基礎(chǔ)知識(shí)

Ext JS 4從底層對(duì)類(lèi)體系進(jìn)行了重構(gòu)，這是Ext JS歷史上的第一次對(duì)類(lèi)體系的巨大重構(gòu)。新的架構(gòu)幾乎被應(yīng)用到每一個(gè)Ext JS 4的類(lèi)中，所以希望您在開(kāi)始編碼前能對(duì)它有一定的了解，這是非常重要的。
這篇手冊(cè)適用于任何想創(chuàng)建新類(lèi)或者繼承Ext JS 4中現(xiàn)存類(lèi)的開(kāi)發(fā)人員，分為4部分：
第一部分： "概述" -- 解釋了創(chuàng)建一個(gè)強(qiáng)健的類(lèi)體系的必要性
第二部分： "命名規(guī)范" -- 討論了對(duì)類(lèi)、方法、屬性、變量和文件的最佳命名規(guī)范
第三部分： "實(shí)踐" -- 提供了詳細(xì)的一步一步的代碼示例
第四部分： "錯(cuò)誤處理和調(diào)試" -- 提供了非常有用的關(guān)于如何處理異常的秘訣和技巧

一. 概述
Ext JS 4擁有超過(guò)300個(gè)類(lèi)，迄今為止，我們已經(jīng)有一個(gè)超過(guò)200,000開(kāi)發(fā)者的龐大社區(qū)，他們來(lái)自世界各地的各種編程背景。對(duì)于如此大規(guī)模的一個(gè)框架，我們面臨著一個(gè)巨大的挑戰(zhàn)來(lái)提供一個(gè)通用的代碼體系結(jié)構(gòu)：
友好并易于學(xué)習(xí)
開(kāi)發(fā)迅速，容易調(diào)試，部署簡(jiǎn)單
組織良好，可擴(kuò)展和可維護(hù)
JavaScript是一個(gè)無(wú)類(lèi)型的，面向原型的語(yǔ)言，這種語(yǔ)言最強(qiáng)大的特性之一就是靈活性。它可以通過(guò)各種不同的方法，使用各種不同的編碼風(fēng)格和技巧來(lái)完成同一個(gè)工作。然而，這種特性卻帶來(lái)了一個(gè)不可預(yù)見(jiàn)的代價(jià)，如果沒(méi)有一個(gè)統(tǒng)一的結(jié)構(gòu)，JavaScript代碼就很難理解、維護(hù)和重用。
基于類(lèi)的編程，換句話說(shuō)，使用最流行的OOP模型。基于類(lèi)的語(yǔ)言通常是強(qiáng)類(lèi)型語(yǔ)言，提供了封裝，并有標(biāo)準(zhǔn)的編碼約定。一般情況下，讓開(kāi)發(fā)者遵循一組統(tǒng)一的編碼規(guī)則，寫(xiě)的代碼才更可能是可預(yù)測(cè)的，可擴(kuò)展的和可延伸的。然而，它們卻沒(méi)有了像JavaScript這類(lèi)語(yǔ)言一樣的動(dòng)態(tài)能力。
每種方法都有它們自己的優(yōu)缺點(diǎn)，但是我們能否同時(shí)利用它們兩者的優(yōu)點(diǎn)部分，而隱藏它們的缺點(diǎn)部分呢？答案是肯定的，我們已經(jīng)在Ext JS 4中實(shí)現(xiàn)了這個(gè)解決方案。

二. 命名規(guī)范
在你的代碼中始終使用一致的基于類(lèi)、命名空間和文件名的命名規(guī)范，這將有助于保持你的代碼易組織、結(jié)構(gòu)化和易讀。
1) 類(lèi)
類(lèi)名可以只包含字母數(shù)字字符，數(shù)字在大多數(shù)情況下是不允許的，除非它們屬于一個(gè)技術(shù)術(shù)語(yǔ)。不要使用下劃線，連字符，或任何其他非字母數(shù)字字符。例如：
MyCompany.useful_util.Debug_Toolbar 是不可以的
MyCompany.util.Base64 是可以的
類(lèi)名應(yīng)該通過(guò)使用對(duì)象的點(diǎn)表達(dá)式（.）屬性，從而放置到適當(dāng)?shù)拿臻g中。至少，類(lèi)名應(yīng)該有一個(gè)唯一的頂層命名空間。例如：
MyCompany.data.CoolProxy
MyCompany.Application
頂層命名空間和類(lèi)名都應(yīng)該采用駝峰命名法，除此之外，其他的應(yīng)該全部小寫(xiě)。例如：
MyCompany.form.action.AutoLoad
不是由Sencha的Ext JS發(fā)布的類(lèi)不能使用Ext作為頂層命名空間。
縮略詞也應(yīng)該遵循上述的駝峰命名規(guī)范。例如：
Ext.data.JsonProxy 代替了 Ext.data.JSONProxy
MyCompany.util.HtmlParser 代替了 MyCompary.parser.HTMLParser
MyCompany.server.Http 代替了 MyCompany.server.HTTP
2) 源文件
類(lèi)的名稱(chēng)直接映射到存儲(chǔ)它們的文件路徑中，因此，每一個(gè)文件只能有一個(gè)類(lèi)，例如：
Ext.util.Observable 存儲(chǔ)在 /to/src/Ext/util/Observable.js
Ext.form.action.Submit 存儲(chǔ)在 /to/src/Ext/form/action/Submit.js
MyCompany.chart.axis.Numeric 存儲(chǔ)在 /to/src/MyCompany/chart/axis/Numeric.js
路徑/to/src是您的應(yīng)用程序的類(lèi)的根目錄，所有類(lèi)都應(yīng)該放置在這個(gè)共同的根目錄下。
3) 方法和變量
與類(lèi)名類(lèi)似，方法和變量名可以只包含字母數(shù)字字符，數(shù)字在大多數(shù)情況下是不允許的，除非它們屬于一個(gè)技術(shù)術(shù)語(yǔ)。不要使用下劃線，連字符，或任何其他非字母數(shù)字字符。
方法和變量名也應(yīng)該總是駝峰式的，這也適用于縮略詞。
示例：
可接受的方法名稱(chēng)： encodeUsingMd5()，getHtml()代替了getHTML()，getJsonResponse()代替了 getJSONResponse()， parseXmlContent()代替了parseXMLContent()
可接受的變量名稱(chēng)： var isGoodName， var base64Encoder， var xmlReader， var httpServer
4) 屬性
類(lèi)屬性名完全遵循與上述的方法和變量相同的命名規(guī)范，除了靜態(tài)常量。
靜態(tài)類(lèi)屬性即常量應(yīng)該全部大寫(xiě)，例如：
Ext.MessageBox.YES = "Yes"
Ext.MessageBox.NO = "No"
MyCompany.alien.Math.PI = "4.13"

三. 實(shí)踐
1. 聲明
1.1) 老的方法
如果您曾經(jīng)使用過(guò)任何先前版本的Ext JS，您肯定很熟悉使用Ext.extend來(lái)創(chuàng)建類(lèi)：
var MyWindow = Ext.extend(Object, { ... });
這種方法很容易創(chuàng)建一個(gè)繼承自其他類(lèi)的新類(lèi)，然而除了直接繼承，我們沒(méi)有一個(gè)很好的API來(lái)創(chuàng)建類(lèi)的其他方面，如配置，靜態(tài)配置和混入類(lèi)，我們稍后將詳細(xì)回顧它們。
讓我們看看另外一個(gè)例子：
My.cool.Window = Ext.extend(Ext.Window, { ... });
在這個(gè)示例中，我們希望創(chuàng)建一個(gè)新的具有命名空間的類(lèi)，并讓它繼承Ext.Window，這里有兩個(gè)問(wèn)題需要解決：
My.cool 必須是已存在的命名空間對(duì)象，這樣我們才能分配Window作為其屬性
Ext.Window 必須存在且被加載，這樣才能引用它
第一點(diǎn)通常用Ext.namespace（別名是Ext.ns）來(lái)解決，這個(gè)方法遞歸地創(chuàng)建不存在的對(duì)象，而讓人厭煩的是你必須總是記得把它們添加到 Ext.extend 之前：
Ext.ns('My.cool');My.cool.Window = Ext.extend(Ext.Window, { ... });
然而第二個(gè)問(wèn)題就不太容易解決了，因?yàn)?Ext.Window可能依賴(lài)于很多其他的類(lèi)，它可能是直接地或間接地繼承自那些依賴(lài)類(lèi)，而這些依賴(lài)類(lèi)可能又依賴(lài)于其他類(lèi)。由于這個(gè)原因，在Ext JS 4之前編寫(xiě)的應(yīng)用程序通常都會(huì)引入整個(gè)庫(kù)文件 ext-all.js，盡管可能僅僅只需要其中的很小一部分。
1.2) 新的方法
Ext JS 4消除了所有這些缺點(diǎn)，您只需要記得唯一的一個(gè)創(chuàng)建類(lèi)的方法是：Ext.define，它的基本語(yǔ)法如下：
Ext.define(className, members, onClassCreated);
className： 類(lèi)名
members 是一個(gè)大對(duì)象，代表了一個(gè)類(lèi)成員的集合，是一系列的鍵-值對(duì)
onClassCreated 是一個(gè)可選的回調(diào)函數(shù)，當(dāng)類(lèi)的所有依賴(lài)項(xiàng)都準(zhǔn)備好了，并且類(lèi)被完全創(chuàng)建時(shí)，就會(huì)被調(diào)用。這個(gè)回調(diào)函數(shù)在很多情況下是很有用的，我們將在第四部分中深入討論。
示例:
代碼如下:
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");

注意，我們是用 Ext.create()方法創(chuàng)建了一個(gè)My.sample.Person的實(shí)例。當(dāng)然我們也可以使用new 關(guān)鍵字（new My.sample.Person()），然而我們建議您養(yǎng)成總是使用 Ext.create 的習(xí)慣，因?yàn)樗梢岳脛?dòng)態(tài)加載功能。更多關(guān)于動(dòng)態(tài)加載的信息，請(qǐng)看Ext JS 4入門(mén)指南。

2. 配置
在Ext JS 4中，我們引入了一個(gè)專(zhuān)用的config屬性，它會(huì)在類(lèi)創(chuàng)建前，由強(qiáng)大的預(yù)處理器類(lèi) Ext.Class 進(jìn)行處理，具有如下特性：
配置是從其他類(lèi)成員完全封裝的
每個(gè)config屬性的getter和setter方法會(huì)在類(lèi)原型中自動(dòng)的生成，如果類(lèi)里沒(méi)有定義這些方法的話
同時(shí)，也會(huì)為每個(gè)config屬性生成一個(gè)apply方法，自動(dòng)生成的setter方法會(huì)在內(nèi)部設(shè)置值之前調(diào)用這個(gè)apply方法。如果你想要在設(shè)置值之前運(yùn)行自定義邏輯，就可以覆蓋這個(gè)apply方法。如果apply沒(méi)有返回值，setter方法將不會(huì)設(shè)置值。讓我們看看下面的applyTitle方法：
下面的例子定義了一個(gè)新類(lèi)：
代碼如下:
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);　　　　　　
}　　　　
}　　
}});

下面是如何使用這個(gè)新類(lèi)的例子：
代碼如下:
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. 靜態(tài)配置
靜態(tài)配置成員可以使用statics屬性來(lái)定義：
代碼如下:
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"

四. 錯(cuò)誤處理和調(diào)試
Ext JS 4包含了一些有用的特性，可以幫助你調(diào)試和錯(cuò)誤處理：
你可以使用Ext.getDisplayName()方法來(lái)獲取任何方法的顯示名稱(chēng)，這是特別有用的，當(dāng)拋出錯(cuò)誤時(shí)，可以用來(lái)在錯(cuò)誤描述里顯示類(lèi)名和方法名：
throw new Error('[' + Ext.getDisplayName(arguments.callee) + '] Some message here');
當(dāng)錯(cuò)誤從由Ext.define()定義的類(lèi)的任何方法中拋出時(shí)，如果你使用的基于WebKit的瀏覽器（Chrome或者Safari）的話，你會(huì)在調(diào)用堆棧中看到方法名和類(lèi)名。例如，下面是從Chrome中看到的堆棧信息：

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com