Ajax一統天下之Dojo整合篇
2024-09-06 12:42:53
供稿：網友
隨著Ajax應用越來越多，各種Ajax Library（Prototype），Ajax Framework（DWR），Ajax Toolkit（Dojo，YUI）也日漸豐富起來，有沒有辦法將這些結合起來呢？類似Spring的做法，當然我沒法整出一個IoC的微內核將各種Ajax“粘合”起來，但是將這些Ajax可重用的組件加以整合應該是沒有問題的，這樣即可以避免重復發明輪子，還可以針對各種Ajax進行揚長避短，形成一套比較全面的Ajax解決方案。同時也增加了開發人員選擇自己熟悉Ajax組件的靈活性。
目前我們公司已經形成一套基于Ajax的完整的產品，封裝了自己的Ajax前后臺通訊機制以及提供了可重用的客戶端組件，我嘗試了一下將我們的產品與Dojo Toolkit進行整合。下面是我的做法，整合的是Dojo ComboBox Widget，它實際上是一個Auto Completion組件，類似Google Suggest。
從Dojo提供的測試類test_ComboBox.html入手，加debugger進行跟蹤調試，理清Dojo Widget的加載流程。
經過跟蹤調試，對Dojo的Widget有了一個大致的了解：首先是加載當前需要的JavaScript文件，然后對整個html頁面進行解析。在頁面上使用widget有三種方式：一種就是在html元素上添加一些dojo能解析的屬性，如
<select dojoType="combobox" style="width: 300px;" name="foo.bar1" autocomplete="false"
onValueChanged="setVal1"
>
其中的dojoType，autocomplete， onValueChanged都是dojo能夠識別的屬性，這個有些類似typestry的做法。第二種就是使用DojoML的寫法：
<dojo:combobox style="width: 300px;" name="foo.bar1" autocomplete="false"
onValueChanged="setVal1"
/>
這種寫法有些變態，跟jsp中的自定義標簽基本就是一回事，只是把解析的過程從后臺移到了前臺來做，后來看到有些框架也這么干，也就沒話說了。
還有一種寫法是使用javascript在頁面加載完成之后，在指定的html元素創建widget：
var combo;
dojo.addOnLoad(init);
function init(){
combo = dojo.widget.createWidget("dojo:ComboBox", {name:"prog",autocomplete:false,dataUrl:"comboBoxData.js"}, dojo.byId("progCombo"));
}
在對元素解析創建的時候同時利用dojo定義的combobox html模版以及css模版完成在頁面中插入最終的combobox控件的目的。
接下來看看Dojo ComboBox如何通過ajax與后臺通訊，Dojo ComboBox提供了兩種自動完成方式：一種是將所有的數據下載到前臺緩存，然后在前臺根據用戶輸入的數據從緩存中匹配出自動完成所需要的數據列表。另外一種就是根據用戶每次輸入的數據實時向后臺發送請求獲得要自動完成的數據，當然這個數據也會以用戶輸入的內容為key，以得到的數據為value進行緩存。對于兩種方式，Dojo通過不同的DataProvider來實現（dojo.widget.incrementalComboBoxDataProvider和dojo.widget.basicComboBoxDataProvider），這一點非常精妙，讓我非常佩服。而這兩個類都是通過dojo.declare(“className”, “parentClassName”, constructor, declarationBody)這種方式來做的，這個也和我們以往的做法有別?？傊褪潜容^精妙啦！
