一、 引言
在第一部分中，我們討論了AJAX基礎——建立從腳本到服務(wù)器的通訊的能力，這正是使HTML頁(yè)面具有動(dòng)態(tài)能力的原因所在。然而，這就意味著(zhù)我們已準備好拋棄我們自己版本的Yahoo郵件嗎？不，還沒(méi)有。原因在于：AJAX是一個(gè)混合的祝福。一方面，它使我們能夠在Web上創(chuàng )建豐富的桌面級的應用程序；另一方面，如果我們把"翻頁(yè)面式"的Web應用程序與客戶(hù)端/服務(wù)器或Swing版本的程序進(jìn)行比較，那么會(huì )看到其開(kāi)發(fā)實(shí)踐并不很相同。我們將需要習慣于這樣的事實(shí)：構建一個(gè)豐富的UI需要時(shí)間。須知，允許用戶(hù)實(shí)現更大的靈活性也就相應地需要付出更多的時(shí)間為代價(jià)。
最后的答案當然要依賴(lài)于大量的組件庫、框架以及具有工業(yè)力量的開(kāi)發(fā)工具。且不考慮工具，本文集中于討論在今天對于A(yíng)JAX熱心者有哪些技術(shù)是可用的。在強調需要構建可重用的商業(yè)組件的同時(shí)，本文將重點(diǎn)分析"隱含的"JavaScript中的面向對象的力量。另外，在強調需要構建定制的UI組件的同時(shí)，本文將介紹一個(gè)簡(jiǎn)便的方法——用定制的客戶(hù)端HTML標簽來(lái)封裝描述邏輯。
二、 AJAX語(yǔ)言——對象面向的JavaScript
由定義來(lái)看，JavaScript是典型的AJAX語(yǔ)言。不同于Java，JavaScript并不強調OO風(fēng)格的編碼。然而，令人吃驚的是JavaScript居然全面支持所有的OO語(yǔ)言的主要屬性：封裝、繼承和多態(tài)性。Douglas Crockford甚至稱(chēng)JavaScript是"世界上最易被誤解的編程語(yǔ)言"。讓我們回顧一下JavaScript的面向對象的地方吧。
數據類(lèi)型
在Java中，一個(gè)類(lèi)定義了一個(gè)數據和它的相關(guān)行為的組合。盡管JavaScript保留了class關(guān)鍵字，但是它不支持與常規OOP語(yǔ)言一樣的語(yǔ)義。
這聽(tīng)起來(lái)可能覺(jué)得奇怪，但是在JavaScript中，對象是用函數來(lái)定義的。事實(shí)上，通過(guò)在下面的示例中定義一個(gè)函數，你就定義了一個(gè)簡(jiǎn)單的空類(lèi)Calculator：
一個(gè)新的實(shí)例的創(chuàng )建與在Java中相同-使用new操作符：
| var myCalculator = new Calculator(); |
上面這個(gè)函數不僅定義一個(gè)類(lèi)，而且還擔當了一個(gè)構造器。在此，操作符new實(shí)現了這一魔術(shù)-實(shí)例化一個(gè)類(lèi)Calculator的對象并且返回一個(gè)對象參考而不是只調用該函數。
創(chuàng )建這樣的空類(lèi)是沒(méi)錯，但在實(shí)際中并沒(méi)有多大用處。下面，我們準備使用一個(gè)Java-腳本原型結構來(lái)填充類(lèi)定義。JavaScript使用原型當作創(chuàng )建對象的模板。所有的原型屬性和方法被參考引用地復制到一個(gè)類(lèi)的每個(gè)對象中，所以它們都具有相同的值。你可以改變一個(gè)對象中的原型屬性的值，并且該新值會(huì )覆蓋從原型中復制過(guò)來(lái)的缺省值，但是這僅對于在一個(gè)實(shí)例中。下列語(yǔ)句將把一個(gè)新屬性添加到Calculator對象的原型上：
| Calculator.prototype._prop = 0; |
既然JavaScript并沒(méi)有提供一個(gè)方法來(lái)從句法上表示一個(gè)類(lèi)定義，那么我們將使用with語(yǔ)句來(lái)標記該類(lèi)的定義邊界。這也將使得示例代碼更為短小，因為該with語(yǔ)句被允許在一個(gè)指定的對象上執行一系列的語(yǔ)句而不需要限制屬性。
function Calculator() {};
with (Calculator) {
prototype._prop = 0;
prototype.setProp = function(p) {_prop = p};
prototype.getProp = function() {return _prop};
} |
到目前為止，我們定義了并且初始化了公共變量_prop，并且為它提供了getter和setter方法。
需要定義一個(gè)靜態(tài)變量？你可以把靜態(tài)變量當作是為類(lèi)所擁有的一個(gè)變量。因為在JavaScript中的類(lèi)用函數對象來(lái)描述，所以我們只需要把一個(gè)新屬性添加到該函數上：
現在，既然這個(gè)iCount變量是一個(gè)Calculator對象的屬性，那么它將會(huì )被類(lèi)Calculator的所有實(shí)例所共享。
| function Calculator() {Calculator.iCount++;}; |
上面的代碼計算類(lèi)Calculator的所有實(shí)例的個(gè)數。
封裝
通過(guò)使用如上面所定義的"Calculator"，我們可以存取所有的"class"數據；然而，這增加了派生類(lèi)中命名沖突的危險性。我們明顯地需要封裝以把對象看作自包含的實(shí)體。
數據封裝的一種標準語(yǔ)言機制是使用私有變量。并且一個(gè)常用的仿效一個(gè)私有變量的JavaScript技術(shù)是在構造器中定義一個(gè)局部變量；這樣以來(lái)，該局部變量的存取只能經(jīng)由getter和setter來(lái)實(shí)現-它們是該構造器中的內部函數。在下列實(shí)例中，_prop變量在Calculator函數中定義并且在函數范圍外不可見(jiàn)。其中有兩個(gè)匿名的內部函數（分別被賦予setProp和getProp屬性）讓我們存取"私有"變量。另外，請注意，這里this的使用-十分相似于在Java中的用法：
function Calculator() {
var _prop = 0;
this.setProp = function (p){_prop = p};
this.getProp = function() {return _prop};
}; |
常常被忽視的是在JavaScript中作如此封裝所付出的代價(jià)。須知，這種代價(jià)可能是巨大的，因為內部函數對象對于該"class"的每一個(gè)實(shí)例被不斷地重復創(chuàng )建。
因此，既然基于原型構建對象速度更快并且消費更少些的內存，那么我們在最強調性能的場(chǎng)所特別支持使用公共的變量。請注意，你可以使用命名慣例來(lái)避免名稱(chēng)沖突-例如，在公共的變量的前面加上該類(lèi)名。
繼承
乍看之下，
JavaScript缺乏對類(lèi)層次的支持，這很相似于面向對象語(yǔ)言的程序員對于現代語(yǔ)言的期盼。然而，盡管
JavaScript句法沒(méi)有象Java一樣支持類(lèi)繼承，但是我們仍然能夠在JavaScript中實(shí)現繼承-通過(guò)把已定義類(lèi)的一個(gè)實(shí)例拷貝到其派生類(lèi)的原型當中。
在我們提供舉例之前，我們需要介紹一個(gè)constructor屬性。JavaScript保證每一個(gè)原型中包含constructor-它擁有到該構造器函數的一個(gè)參考。換句話(huà)說(shuō)，Calculator.prototype.constructor包含一個(gè)到Calculator()的參考。
現在，下面的代碼顯示了怎樣從基類(lèi)Calculator派生類(lèi)ArithmeticCalculator。其中，"第一行"取得類(lèi)Calculator的所有的屬性，而"第二行"把原型constructor的值恢復成ArithmeticCalculator：
function ArithmeticCalculator() { };
with (ArithmeticCalculator) {
ArithmeticCalculator .prototype = new Calculator();//第一行
prototype.constructor = ArithmeticCalculator;//第二行
} |
就算上面的實(shí)例看起來(lái)象一個(gè)合成體而不象是繼承，但是JavaScript引擎還是清楚這個(gè)原型鏈的。特別是，instanceof操作符會(huì )正確地適用于基類(lèi)和派生類(lèi)。假定你創(chuàng )建類(lèi)ArithmeticCalculator的一個(gè)新實(shí)例：
| var c = new ArithmeticCalculator; |
表達式c instanceof Calculator和c instanceof ArithmeticCalculator都會(huì )成立。
注意，在上面示例中的基類(lèi)的constructor是在初始化ArithmeticCalculator原型時(shí)被調用的，而在創(chuàng )建派生類(lèi)的實(shí)例時(shí)是不被調用的。這可能會(huì )帶來(lái)不想要的負面影響，而且為了實(shí)現初始化你應該考慮創(chuàng )建一個(gè)獨立的函數。由于該構造器并不是一個(gè)成員函數，所以它無(wú)法通過(guò)this參考引用調用。我們將需要一個(gè)能調用超類(lèi)的"Calculator"成員函數：
function Calculator(ops) { ...};
with (Calculator) { prototype.Calculator=Calculator;} |
現在，我們可以寫(xiě)一個(gè)繼承類(lèi)-它顯式地調用基類(lèi)的構造器：
function ArithmeticCalculator(ops) { this.Calculator(ops);};
with (ArithmeticCalculator) {
ArithmeticCalculator .prototype = new Calculator;
prototype.constructor = ArithmeticCalculator;
prototype.ArithmeticCalculator = ArithmeticCalculator;
} |
多態(tài)性
JavaScript是一種非類(lèi)型化的語(yǔ)言-在此，一切都是對象。因此，如果有兩個(gè)類(lèi)A和B，它們都定義一個(gè)foo()，那么JavaScript將允許在A(yíng)和B的實(shí)例上多態(tài)地調用foo()-即使不存在層次關(guān)系(雖然是可實(shí)現的)。從這一角度來(lái)看，JavaScript提供一個(gè)比Java更寬的多態(tài)性。這種靈活性，象往常一樣，也要付出代價(jià)。在這種情況中，代價(jià)是把類(lèi)型檢查工作代理到應用程序代碼。具體地說(shuō)，如果需要檢查一個(gè)參考確實(shí)指向一個(gè)所希望的基類(lèi)，那么這可以通過(guò)instanceof操作符來(lái)實(shí)現。
另一方面，JavaScript并不檢查函數調用中的參數-這可以防止用一樣的命名和不同的參數來(lái)定義多態(tài)函數（并且讓編譯器選擇正確的簽名）。代之的是，JavaScript提供了一個(gè)Java 5風(fēng)格的函數范圍內的argument對象-它允許你根據參數的類(lèi)型和數量的不同而實(shí)現一個(gè)不同的行為。
三、 示例展示
本文所附源碼列表1實(shí)現了一個(gè)計算器-它可以計算以一個(gè)逆向波蘭式標志的表達式。該示例展示了本文中所介紹的主要技術(shù)并且也介紹了一些獨特的JavaScript特性的用法，例如在一個(gè)動(dòng)態(tài)函數調用中以一個(gè)數組元素的方式訪(fǎng)問(wèn)對象屬性。
為了使列表1工作，我們需要另外準備一些代碼-它們用于實(shí)例化該計算器對象并且調用evaluate方法：
var e = new ArithmeticCalcuator([2,2,5,"add","mul"]);
alert(e.evaluate()); |
四、 AJAX組件授權 所有的AJAX組件授權方案在今天被邏輯地分成兩組。具體地說(shuō)，第一組用于與基于HTML的UI定義的無(wú)縫集成。第二組把HTML當作一個(gè)UI定義語(yǔ)言以支持某種
XML。在本文中，我們從第一組中來(lái)展示一種方法-雖然它存在于瀏覽器之中卻是類(lèi)似于
JSP標簽。這些瀏覽器特定的組件授權擴展在IE情形下稱(chēng)作元素行為，而在最近版本的Firefox，Mozilla和Netscape 8情形下稱(chēng)作可擴展的綁定。
五、 定制標簽 Internet Explorer，從版本5.5開(kāi)始，支持定制的客戶(hù)端HTML元素的
JavaScript授權。不象JSP標簽，這些對象并沒(méi)有在
服務(wù)器端被預處理到HTML中。而是，它們成為一標準HTML對象模型的合法擴展，并且包括構造控件在內的一切事情，都是動(dòng)態(tài)地發(fā)生在客戶(hù)端的。同樣，基于Gecko-引擎的瀏覽器能夠用一個(gè)可重用功能動(dòng)態(tài)地裝飾任何現有的HTML元素。
因此，我們有可能用具有HTML語(yǔ)法的方法、事件和屬性來(lái)構建一個(gè)具有豐富的UI組件的庫。這樣的組件可以被自由地混合于標準HTML中。內部地，這些組件將會(huì )與應用程序服務(wù)器進(jìn)行通訊-以AJAX風(fēng)格。換句話(huà)說(shuō)，你有可能（并且相對簡(jiǎn)單地）構建自己的AJAX對象模型。
這種IE風(fēng)味的方法被稱(chēng)為HTC或HTML組件；其Gecko版本被稱(chēng)為XBL-可擴展的綁定語(yǔ)言（eXtensible Bindings Language）。為了實(shí)現本文目的，我們集中于討論IE。
六、 輸入HTML組件-HTC
HTC或HTML組件也被稱(chēng)作行為。它們被劃分為兩種類(lèi)型：一種是依附的行為-用一組屬性、事件和方法裝飾任何現有的HTML元素；另一種是元素行為-看上去象宿主頁(yè)面的定制的HTML標簽的一個(gè)擴展集合。依附的行為和元素行為一起提供了開(kāi)發(fā)組件和應用程序的一種簡(jiǎn)單方案。在此，我們將展示一下最為綜合的情形-元素行為。
數據綁定復選框控件
為了展示元素行為，我們將構建一個(gè)定制的數據綁定復選框。構建這樣一個(gè)控件背后的基本原因在于，一個(gè)標準HTML復選框具有下面若干顯著(zhù)的缺點(diǎn)：
·需要應用程序編碼來(lái)把"checked"屬性的值映射到商業(yè)域值，例如"Y[es]"/"N[o]"，"M[ale]"/"F[emale]"，等等。HTML復選框使用"checked"屬性，而許多其它HTML控件使用的則是"value"屬性。
·需要應用程序編碼來(lái)維持該控件的狀態(tài)（修改過(guò)的/未修改過(guò)的）。這實(shí)際上是在所有的HTML控件普遍存在的一個(gè)問(wèn)題。
·需要應用程序編碼才能創(chuàng )建一個(gè)關(guān)聯(lián)標簽-它應該接受鼠標點(diǎn)擊并相應地改變該復選框的狀態(tài)。
·標準HTML復選框不支持"校驗"事件以允許取消一個(gè)GUI行為，而這種要求可能存在于某些應用程序中。
現在，讓我們看一個(gè)正在構建的該控件的用法示例，它的用法可能如下情形：
＜checkbox id="cbx_1" value="N" labelonleft="true"
label="Show Details:" onValue="Y" offValue="N"/＞ |
另外，我們的控件將支持可取消的事件onItemChanging和通知事件onItemChanged。
定義定制標簽
從結構上講，一個(gè)定制標簽是一個(gè)具有一個(gè)HTC擴展名的文件-它在＜PUBLIC:COMPONENT＞和＜/PUBLIC:COMPONENT＞標志之間對它的屬性，方法和事件加以描述。
為了定義一個(gè)定制CHECKBOX標簽，我們創(chuàng )建一個(gè)如下列代碼片斷中的文件checkbox.htc-其中，第一行負責設置該組件的標簽名：
＜PUBLIC:COMPONENT NAME="cbx" tagName="CHECKBOX"＞
＜PROPERTY NAME="value" GET="getValue" PUT="putValue" /＞
//我們把組件的所有另外的屬性放在這里
＜METHOD NAME="show" /＞
//我們把組件的所有另外的方法放在這里
＜EVENT NAME="onItemChanging" ID="onItemChanging"/＞
//我們把組件將向應用程序激活的所有另外的事件放在這里
＜ATTACH EVENT="oncontentready" HANDLER="constructor" /＞
//我們把組件自己處理的另外的事件放在這里
＜SCRIPT＞
//我們把所有的方法，屬性getters和setters和事件處理器放在這里
＜/SCRIPT＞
＜/PUBLIC:COMPONENT＞ |
使用定制標簽
盡管HTC文件的內容比較重要，但是這與其文件名是什么無(wú)關(guān)。值得注意的是，指向該HTC文件的URL需要被使用IMPORT指令指定-這必須在相應的定制標簽第一次出現之前（在頁(yè)面上）完成。下面是最簡(jiǎn)單的可能的頁(yè)面使用一個(gè)定制的復選框可能看上去的樣子-假定該頁(yè)面和HTC文件處理同一個(gè)文件夾下：
＜HTML xmlns:myns＞
＜?IMPORT namespace="myns" implementation="checkbox.htc" ＞
＜BODY＞
＜myns:checkbox id=‘cbx_1‘ label=‘Hello‘/＞
＜/BODY＞
＜/HTML＞ |
請注意，定制CHECKBOX是怎樣在打開(kāi)的HTML標簽中被映射到一個(gè)非缺省的命名空間"myns"的。這個(gè)IMPORT指令實(shí)現把HTC同步加載到瀏覽器的內存并且還指示瀏覽器怎樣為適當的命名空間實(shí)現名稱(chēng)確定的（HTC到命名空間的關(guān)聯(lián)可能是多對一的）。
定制標簽的構造器
最好的初始化HTC的方法是，一旦它被裝載就處理oncontentready事件。因此，我們可以定義處理器函數-為了概念清晰起見(jiàn)，我們稱(chēng)之為構造器：
| ＜ATTACH EVENT="oncontentready" HANDLER="constructor" /＞ |
constructor()的邏輯是簡(jiǎn)單的：根據屬性labelonleft的值(見(jiàn)下面的屬性定義)按順序連接一個(gè)常規HTML復選框和HTML標簽：
function constructor() {
//我們將把一個(gè)HTML復選框和標簽添加到元素體
//詳細情形見(jiàn)列表2
} |
定義定制標簽屬性
為了定義屬性labelonleft，我們又在＜PUBLIC:COMPONENT＞部分加上一行：
| ＜PROPERTY NAME="labelonleft" VALUE="true"/＞ |
請注意，這個(gè)屬性并沒(méi)有包含getter和/或setter方法。屬性onValue和offValue不僅提供了從復選框狀態(tài)到一個(gè)商業(yè)值域的映射而且不需要getters和setters：
＜PROPERTY NAME="onValue" VALUE="true"/＞
＜PROPERTY NAME="offValue" VALUE="false" /＞ |
然而，屬性checked是用兩個(gè)getter和setter定義的：
| ＜PROPERTY NAME="checked" GET="getChecked" PUT="putChecked" /＞ |
因此，我們在＜SCRIPT＞部分建立了上面兩個(gè)方法的定義。正如你所見(jiàn)，setter putChecked()-將在每次復選框狀態(tài)改變時(shí)激發(fā)-把value屬性設置為下面兩個(gè)變體之一：onValue或OffValue。請注意，putChecked()將不僅可由在復選框-宿主頁(yè)面中的腳本觸發(fā)，而且也能通過(guò)在checkbox.htc中的相應的任何賦值操作觸發(fā)。
var _value;
function putChecked( newValue ) {
value = (newValue?onValue:offValue);
}
function getChecked(){
return ( _value == onValue);
} |
七、 為定制標簽定義事件
讓我們看一下onItemChanging和onItemChanged事件的定義以及這些事件是怎樣在value屬性的setter內部被激發(fā)和處理的（見(jiàn)所附源碼中的列表2）。方法putValue()有幾個(gè)讓人感興趣的地方。首先，在分析CHECKBOX標簽期間，可以調用這個(gè)方法-只要指定這個(gè)HTMLvalue屬性。這正解釋了為什么我們?yōu)榉菢嬙鞂ο蠼⒁粋€(gè)單獨的邏輯分支-為把構造過(guò)程與一個(gè)對用戶(hù)擊鍵的反應區別開(kāi)來(lái)。其次，在此我們展示了定制事件onItemChanging的創(chuàng )建和處理-它允許應用程序取消行為。請注意，通過(guò)這種方式，無(wú)論是擊鍵還是通過(guò)編程方式實(shí)現賦值都能達到取消的目的。
事件取消
為了取消事件，一個(gè)應用程序應該攔截該事件并且把event.returnValue設置為false。下面的代碼片斷展示了應用程序是怎樣實(shí)現取消事件過(guò)程的：
cbx_1::onItemChanging() {
. . . . .
if (canNotBeAllowed) {
event.returnValue=false;
. . . . .
} |
如果事件沒(méi)被取消，putValue()把內部的普通HTML復選框的checked屬性設置為每個(gè)相應的當前值-如果它等于onValue，這個(gè)內部復選框將被選中；如果它等于offValue(不存在第三種選擇)，復選框不被選中(完整的列表見(jiàn)本文所附源碼中的列表2)。
復選框的HTML內幕
我們控件的繪制是通過(guò)助理函數addLabel()和addCheckBox()來(lái)實(shí)現的并且從一個(gè)constructor()內部調用。這些函數把HTML注入進(jìn)元素的innerHTML。這種注入式HTML的一種簡(jiǎn)化形式如下所示：
＜LABEL for=cb_{uniqueID}＞Show Details:＜/LABEL＞
＜INPUT id=cb_{uniqueID} type=checkbox /＞ |
在此，uniqueID是一個(gè)由IE所生成的唯一的（在一個(gè)頁(yè)面內）字符串-它用來(lái)識別HTC的實(shí)例。
八、 再封裝 在我們的CHECKBOX中有一個(gè)缺點(diǎn)。按照我們建立它的方式，在constructor()期間被注入的HTML將隸屬于宿主該HTC的頁(yè)面的DOM。而且，全局的
JavaScript變量like_value屬于它們所在的文檔的全局范圍。這是危險的，因為我們偶然會(huì )遇到命名沖突的可能性：最明顯的情形是使用同一個(gè)組件的多個(gè)實(shí)例。另外這還會(huì )導致一個(gè)可能性-我們的控件可能會(huì )偶然地用相同的名稱(chēng)參考其它對象，反之也如此。
為簡(jiǎn)化起見(jiàn)，需要建立一種專(zhuān)門(mén)的機制來(lái)為對象授權啟動(dòng)一個(gè)真正模塊化方法。幸好，HTC技術(shù)支持一種智能答案-viewLink。
把一個(gè)控件聲明為封裝的最容易的方法是把一個(gè)額外聲明放到打開(kāi)和關(guān)閉的PUBLIC:COMPONENT標簽之間：
| ＜PUBLIC:DEFAULTS viewLinkContent/＞ |
該控件立即就變成封裝性的；而且它有自己的HTML文檔樹(shù)-成為主文檔的原子組件。該對象的每個(gè)實(shí)例有它自己的實(shí)例值的集合并且只有公共方法和屬性能夠從外界代碼中加以存取。換句話(huà)說(shuō)，該viewLink機制充分地啟動(dòng)了復雜的
Web應用程序的設計和實(shí)現-通過(guò)使用一種真正的OO的基于組件的方法。
特別地，我們可以簡(jiǎn)化代碼-通過(guò)從內部復選框和HTML標簽的定義中刪除uniqueID后綴，因為我們不再擔心命名沖突。因此，我們可以替換下面這一行：
| eval( ‘cb_‘+uniqueID).checked = ( _value == onValue ); |
用
| cb.checked = ( _value == onValue ); |
并相應地改變addCheckbox()和addLabel()。
九、 結論 既然AJAX競賽剛剛開(kāi)始，那么就不存在什么AJAX標準并且沒(méi)有現成的你可以依賴(lài)以構建你的應用程序的可廣為接受的RAD工具。雖然軟件供應商們可能還需要較長(cháng)一段時(shí)間來(lái)創(chuàng )建這種強健的開(kāi)發(fā)平臺，AJAX熱心者已經(jīng)開(kāi)始著(zhù)手準備-通過(guò)一些良好定義的API把可重用的代碼塊封裝為商業(yè)組件。
以這種方向導航，本文概括了AJAX語(yǔ)言的OO"力量"-
JavaScript。另外，還展示了一種可用的組件-授權策略-客戶(hù)端定制標簽技術(shù)。我們在僅描述IE特定的定制標簽的同時(shí)，還另外提供了一個(gè)可
下載的實(shí)例-適于Mozilla瀏覽器的可擴展的綁定實(shí)例。
