用AJAX開發智能Web應用程式之進階篇(2)

ajax|web|程式|進階 •標準HTML複選框不支援"校正"事件以允許取消一個GUI行為，而這種要求可能存在於某些應用程式中。

現在，讓我們看一個正在構建的該控制項的用法樣本，它的用法可能如下情形：

＜checkbox id="cbx_1" value="N" labelonleft="true" label="Show Details:" onValue="Y" offValue="N"/＞

另外，我們的控制項將支援可取消的事件onItemChanging和通知事件onItemChanged。

定義定製標籤

從結構上講，一個定製標籤是一個具有一個HTC副檔名的檔案-它在＜PUBLIC:COMPONENT＞和＜/PUBLIC:COMPONENT＞標誌之間對它的屬性，方法和事件加以描述。

為了定義一個定製CHECKBOX標籤，我們建立一個如下列代碼片斷中的檔案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檔案的內容比較重要，但是這與其檔案名稱是什麼無關。值得注意的是，指向該HTC檔案的URL需要被使用IMPORT指令指定-這必須在相應的定製標籤第一次出現之前（在頁面上）完成。下面是最簡單的可能的頁面使用一個定製的複選框可能看上去的樣子-假定該頁面和HTC檔案處理同一個檔案夾下：

＜HTML xmlns:myns＞ ＜?IMPORT namespace="myns" implementation="checkbox.htc" ＞ ＜BODY＞ ＜myns:checkbox id='cbx_1' label='Hello'/＞ ＜/BODY＞ ＜/HTML＞

請注意，定製CHECKBOX是怎樣在開啟的HTML標籤中被映射到一個非預設的命名空間"myns"的。這個IMPORT指令實現把HTC同步載入到瀏覽器的記憶體並且還指示瀏覽器怎樣為適當的命名空間實現名稱確定的（HTC到命名空間的關聯可能是多對一的）。

定製標籤的構造器

最好的初始化HTC的方法是，一旦它被裝載就處理oncontentready事件。因此，我們可以定義處理器函數-為了概念清晰起見，我們稱之為構造器：

＜ATTACH EVENT="oncontentready" HANDLER="constructor" /＞

constructor()的邏輯是簡單的：根據屬性labelonleft的值(見下面的屬性定義)按順序串連一個常規HTML複選框和HTML標籤：

function constructor() { 　//我們將把一個HTML複選框和標籤添加到元素體 　//詳細情形見列表2 }

定義定製標籤屬性

為了定義屬性labelonleft，我們又在＜PUBLIC:COMPONENT＞部分加上一行：

＜PROPERTY NAME="labelonleft" VALUE="true"/＞

請注意，這個屬性並沒有包含getter和/或setter方法。屬性onValue和offValue不僅提供了從複選框狀態到一個商業範圍的映射而且不需要getters和setters：

＜PROPERTY NAME="onValue" VALUE="true"/＞ ＜PROPERTY NAME="offValue" VALUE="false" /＞

然而，屬性checked是用兩個getter和setter定義的：

＜PROPERTY NAME="checked" GET="getChecked" PUT="putChecked" /＞

因此，我們在＜SCRIPT＞部分建立了上面兩個方法的定義。正如你所見，setter putChecked()-將在每次複選框狀態改變時激發-把value屬性設定為下面兩個變體之一：onValue或OffValue。請注意，putChecked()將不僅可由在複選框-宿首頁面中的指令碼觸發，而且也能通過在checkbox.htc中的相應的任何賦值操作觸發。

var _value; function putChecked( newValue ) { 　value = (newValue?onValue:offValue); } function getChecked(){ 　return ( _value == onValue); }

六、為定製標籤定義事件

讓我們看一下onItemChanging和onItemChanged事件的定義以及這些事件是怎樣在value屬性的setter內部被激發和處理的（見所附源碼中的列表2）。方法putValue()有幾個讓人感興趣的地方。首先，在分析CHECKBOX標籤期間，可以調用這個方法-只要指定這個HTMLvalue屬性。正解釋了為什麼我們為非構造對象建立一個單獨的邏輯分支-為把構造過程與一個對使用者擊鍵的反應區別開來。其次，在此我們展示了定製事件onItemChanging的建立和處理-它允許應用程式取消行為。請注意，通過這種方式，無論是擊鍵還是通過編程方式實現賦值都能達到取消的目的。

事件取消

為了取消事件，一個應用程式應該攔截該事件並且把event.returnValue設定為false。下面的代碼片斷展示了應用程式是怎樣實現取消事件程序的：

cbx_1::onItemChanging() { . . . . . if (canNotBeAllowed) { 　event.returnValue=false; 　. . . . . }

如果事件沒被取消，putValue()把內部的普通HTML複選框的checked屬性設定為每個相應的當前值-如果它等於onValue，這個內部複選框將被選中；如果它等於offValue(不存在第三種選擇)，複選框不被選中(完整的列表見本文所附源碼中的列表2)。

複選框的HTML內幕

我們控制項的繪製是通過助理函數addLabel()和addCheckBox()來實現的並且從一個constructor()內部調用。這些函數把HTML注入進元素的innerHTML。這種注入式HTML的一種簡化形式如下所示：

＜LABEL for=cb_{uniqueID}＞Show Details:＜/LABEL＞ ＜INPUT id=cb_{uniqueID} type=checkbox /＞

在此，uniqueID是一個由IE所產生的唯一的（在一個頁面內）字串-它用來識別HTC的執行個體。

七、 再封裝

在我們的CHECKBOX中有一個缺點。按照我們建立它的方式，在constructor()期間被注入的HTML將隸屬於宿主該HTC的頁面的DOM。而且，全域的JavaScript變數like_value屬於它們所在的文檔的全域範圍。這是危險的，因為我們偶然會遇到命名衝突的可能性：最明顯的情形是使用同一個組件的多個執行個體。另外這還會導致一個可能性-我們的控制項可能會偶然地用相同的名稱參考其它對象，反之也如此。

為簡化起見，需要建立一種專門的機制來為對象授權啟動一個真正模組化方法。幸好，HTC支援人員一種智能答案-viewLink。

把一個控制項聲明為封裝的最容易的方法是把一個額外聲明放到開啟和關閉的PUBLIC:COMPONENT標籤之間：

＜PUBLIC:DEFAULTS viewLinkContent/＞

該控制項立即就變成封裝性的；而且它有自己的HTML文檔樹-成為主文件的原子組件。該對象的每個執行個體有它自己的執行個體值的集合并且只有公用方法和屬效能夠從外界代碼中加以存取。換句話說，該viewLink機制充分地啟動了複雜的Web應用程式的設計和實現-通過使用一種真正的OO的基於組件的方法。

特別地，我們可以簡化代碼-通過從內部複選框和HTML標籤的定義中刪除uniqueID尾碼，因為我們不再擔心命名衝突。因此，我們可以替換下面這一行：

eval( 'cb_'+uniqueID).checked = ( _value == onValue );

用

cb.checked = ( _value == onValue );

並相應地改變addCheckbox()和addLabel()。

八、 結論

既然AJAX競賽剛剛開始，那麼就不存在什麼AJAX標準並且沒有現成的你可以依賴以構建你的應用程式的可廣為接受的RAD工具。雖然軟體供應商們可能還需要較長一段時間來建立這種強健的開發平台，AJAX熱心者已經開始著手準備-通過一些良好定義的API把可重用的代碼塊封裝為商業組件。

以這種方嚮導航，本文概括了AJAX語言的OO"力量"-JavaScript。另外，還展示了一種可用的組件-授權策略-用戶端定製標籤技術。我們在僅描述IE特定的定製標籤的同時，還另外提供了一個可下載的執行個體-適於Mozilla瀏覽器的可擴充的綁定執行個體。

• Ajax: 一個建立Web應用的新途徑
• Ajax的錯誤處理機制探討(2)
• Ajax的錯誤處理機制探討(1)
• 初次體驗.NET Ajax無重新整理技術
• Rails系統中的AJAX開發技術簡析(4)