隨著Ajax應(yīng)用越來越多，各種Ajax Library（Prototype），Ajax Framework（DWR），AjaxToolkit（Dojo，YUI）也日漸豐富起來，有沒有辦法將這些結(jié)合起來呢？類似Spring的做法，當(dāng)然我沒法整出一個IoC的微內(nèi)核將各種Ajax“粘合”起來，但是將這些Ajax可重用的組件加以整合應(yīng)該是沒有問題的，這樣即可以避免重復(fù)發(fā)明輪子，還可以針對各種Ajax進(jìn)行揚(yáng)長避短，形成一套比較全面的Ajax解決方案。同時也增加了開發(fā)人員選擇自己熟悉Ajax組件的靈活性。
目前我們公司已經(jīng)形成一套基于Ajax的完整的產(chǎn)品，封裝了自己的Ajax前后臺通訊機(jī)制以及提供了可重用的客戶端組件，我嘗試了一下將我們的產(chǎn)品與DojoToolkit進(jìn)行整合。下面是我的做法，整合的是Dojo ComboBox Widget，它實際上是一個Auto Completion組件，類似GoogleSuggest。
從Dojo提供的測試類test_ComboBox.html入手，加debugger進(jìn)行跟蹤調(diào)試，理清Dojo Widget的加載流程。
經(jīng)過跟蹤調(diào)試，對Dojo的Widget有了一個大致的了解：首先是加載當(dāng)前需要的JavaScript文件，然后對整個html頁面進(jìn)行解析。在頁面上使用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"
- />
這種寫法有些變態(tài)，跟jsp中的自定義標(biāo)簽基本就是一回事，只是把解析的過程從后臺移到了前臺來做，后來看到有些框架也這么干，也就沒話說了。
還有一種寫法是使用javascript在頁面加載完成之后，在指定的html元素創(chuàng)建widget：
代碼
- var combo;
- dojo.addOnLoad(init);
- function init(){
- combo = dojo.widget.createWidget("dojo:ComboBox", {name:"prog",autocomplete:false,dataUrl:"comboBoxData.js"}, dojo.byId("progCombo"));
- }
在對元素解析創(chuàng)建的時候同時利用dojo定義的combobox html模版以及css模版完成在頁面中插入最終的combobox控件的目的。
接下來看看Dojo ComboBox如何通過ajax與后臺通訊，DojoComboBox提供了兩種自動完成方式：一種是將所有的數(shù)據(jù)下載到前臺緩存，然后在前臺根據(jù)用戶輸入的數(shù)據(jù)從緩存中匹配出自動完成所需要的數(shù)據(jù)列表。另外一種就是根據(jù)用戶每次輸入的數(shù)據(jù)實時向后臺發(fā)送請求獲得要自動完成的數(shù)據(jù)，當(dāng)然這個數(shù)據(jù)也會以用戶輸入的內(nèi)容為key，以得到的數(shù)據(jù)為value進(jìn)行緩存。對于兩種方式，Dojo通過不同的DataProvider來實現(xiàn)（dojo.widget.incrementalComboBoxDataProvider和dojo.widget.basicComboBoxDataProvider），這一點(diǎn)非常精妙，讓我非常佩服。而這兩個類都是通過dojo.declare(“className”,“parentClassName”, constructor, declarationBody)這種方式來做的，這個也和我們以往的做法有別?？傊褪潜容^精妙啦！
Dojo向后臺發(fā)送請求的過程封裝在dojo.io.bind()這個方法中，而我們有自己的一套前后臺通訊機(jī)制，因為必須想辦法將dojo.io.bind()替換成我們的做法來達(dá)到最終整合的目的，因為DojoComboBox的數(shù)據(jù)交互都是封裝在DataProvider里面的，因為我們只需要實現(xiàn)自己的DataProvider就可以搞定了，這樣我們無須修改Dojo的源代碼，而且還可以使用Dojo的繼承機(jī)制，從已有的DataProvider集成復(fù)寫掉我需要替換的方法，這讓我有了寫Java的感覺。
代碼
- dojo.declare(
- "dojo.widget.incrementalDoradoComboBoxDataProvider",
- dojo.widget.incrementalComboBoxDataProvider,
- null,
- {
-
- startSearch: function( searchStr, callback){
-
- if(this._inFlight){
-
- }
-
- var cmd = getControl(this.searchUrl);
- cmd.parameters().setValue("searchString", searchStr);
- var _this = this;
- EventManager.addDoradoEvent(cmd, "onSuccess", function(command){
- _this._inFlight = false;
-
-
-
- var data = dj_eval(command.outParameters().getValue("result"));
-
- if(!dojo.lang.isArray(data)){
- var arrData = [];
- for(var key in data){
- arrData.push([data[key], key]);
- }
- data = arrData;
- }
- _this._addToCache(searchStr, data);
- callback(data);
- }
- );
-
- cmd.execute();
- this._inFlight = true;
- }
- }
- );
通過上面的處理，就可以使用我們自己的前后臺通訊機(jī)制來完成請求數(shù)據(jù)的目的。
接下來就是生成我們的頁面，添加dojo加載js代碼的腳本：
代碼
- <script type="text/javascript" src="./dojo/dojo.js"></script>
- <script type="text/javascript">
- dojo.require("dojo.widget.ComboBox");
-
- // 注意這里有一個定位的問題,查找路徑必須加"..",
- // 因為dojo在查找DoradoComboBox.js的時候會從"/dojo"而不是"/"目錄開始查找
- // 最終使用xmlhttp加載的路徑是/dojo/../adapter/dojo/widget/DoradoComboBox.js
- dojo.setModulePrefix("adapter.dojo.widget","../adapter/dojo/widget");
- dojo.require("adapter.dojo.widget.DoradoComboBox");
- </script>
下面要加載的控件部分html代碼：
代碼
- <input dojoType="ComboBox"
- dataUrl="cmdComboboxSearch"
- dataProviderClass = "dojo.widget.incrementalDoradoComboBoxDataProvider"
- style="width: 200px;"
- name="sample2"
- autocomplete="false"
- >
這樣我們的整合工作就完成了，對了還有文件的目錄結(jié)構(gòu)：
Webapp
|--adapter(存放所有用于整合的js文件)
|------dojo
|---------widget
|-----------DoradoComboBox.js
|--dojo（dojo的所有js文件）
|------src
|------dojo.js
|--js（我們自己組件庫的js文件）
|--WEB-INF
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請
點(diǎn)擊舉報。
