Ajax一統(tǒng)天下之Dojo整合篇
更新時(shí)間:2007年03月24日 00:00:00 作者:
隨著Ajax應(yīng)用越來越多,各種Ajax Library(Prototype),Ajax Framework(DWR),Ajax Toolkit(Dojo,YUI)也日漸豐富起來,有沒有辦法將這些結(jié)合起來呢?類似Spring的做法,當(dāng)然我沒法整出一個(gè)IoC的微內(nèi)核將各種Ajax“粘合”起來,但是將這些Ajax可重用的組件加以整合應(yīng)該是沒有問題的,這樣即可以避免重復(fù)發(fā)明輪子,還可以針對各種Ajax進(jìn)行揚(yáng)長避短,形成一套比較全面的Ajax解決方案。同時(shí)也增加了開發(fā)人員選擇自己熟悉Ajax組件的靈活性。
目前我們公司已經(jīng)形成一套基于Ajax的完整的產(chǎn)品,封裝了自己的Ajax前后臺(tái)通訊機(jī)制以及提供了可重用的客戶端組件,我嘗試了一下將我們的產(chǎn)品與Dojo Toolkit進(jìn)行整合。下面是我的做法,整合的是Dojo ComboBox Widget,它實(shí)際上是一個(gè)Auto Completion組件,類似Google Suggest。
從Dojo提供的測試類test_ComboBox.html入手,加debugger進(jìn)行跟蹤調(diào)試,理清Dojo Widget的加載流程。
經(jīng)過跟蹤調(diào)試,對Dojo的Widget有了一個(gè)大致的了解:首先是加載當(dāng)前需要的JavaScript文件,然后對整個(gè)html頁面進(jìn)行解析。在頁面上使用widget有三種方式:一種就是在html元素上添加一些dojo能解析的屬性,如
<select dojoType="combobox" style="width: 300px;" name="foo.bar1" autocomplete="false"
onValueChanged="setVal1"
>
其中的dojoType,autocomplete, onValueChanged都是dojo能夠識(shí)別的屬性,這個(gè)有些類似typestry的做法。第二種就是使用DojoML的寫法:
<dojo:combobox style="width: 300px;" name="foo.bar1" autocomplete="false"
onValueChanged="setVal1"
/>
這種寫法有些變態(tài),跟jsp中的自定義標(biāo)簽基本就是一回事,只是把解析的過程從后臺(tái)移到了前臺(tái)來做,后來看到有些框架也這么干,也就沒話說了。
還有一種寫法是使用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)建的時(shí)候同時(shí)利用dojo定義的combobox html模版以及css模版完成在頁面中插入最終的combobox控件的目的。
接下來看看Dojo ComboBox如何通過ajax與后臺(tái)通訊,Dojo ComboBox提供了兩種自動(dòng)完成方式:一種是將所有的數(shù)據(jù)下載到前臺(tái)緩存,然后在前臺(tái)根據(jù)用戶輸入的數(shù)據(jù)從緩存中匹配出自動(dòng)完成所需要的數(shù)據(jù)列表。另外一種就是根據(jù)用戶每次輸入的數(shù)據(jù)實(shí)時(shí)向后臺(tái)發(fā)送請求獲得要自動(dòng)完成的數(shù)據(jù),當(dāng)然這個(gè)數(shù)據(jù)也會(huì)以用戶輸入的內(nèi)容為key,以得到的數(shù)據(jù)為value進(jìn)行緩存。對于兩種方式,Dojo通過不同的DataProvider來實(shí)現(xiàn)(dojo.widget.incrementalComboBoxDataProvider和dojo.widget.basicComboBoxDataProvider),這一點(diǎn)非常精妙,讓我非常佩服。而這兩個(gè)類都是通過dojo.declare(“className”, “parentClassName”, constructor, declarationBody)這種方式來做的,這個(gè)也和我們以往的做法有別??傊褪潜容^精妙啦!
Dojo向后臺(tái)發(fā)送請求的過程封裝在dojo.io.bind()這個(gè)方法中,而我們有自己的一套前后臺(tái)通訊機(jī)制,因?yàn)楸仨毾朕k法將dojo.io.bind()替換成我們的做法來達(dá)到最終整合的目的,因?yàn)镈ojo ComboBox的數(shù)據(jù)交互都是封裝在DataProvider里面的,因?yàn)槲覀冎恍枰獙?shí)現(xiàn)自己的DataProvider就可以搞定了,這樣我們無須修改Dojo的源,而且還可以使用Dojo的繼承機(jī)制,從已有的DataProvider集成復(fù)寫掉我需要替換的方法,這讓我有了寫Java的感覺。
dojo.declare(
"dojo.widget.incrementalDoradoComboBoxDataProvider",
dojo.widget.incrementalComboBoxDataProvider,
null,
{
//要替換的方法,使用自己的通訊機(jī)制
startSearch: function(/*String*/ searchStr, /*Function*/ callback){
if(this._inFlight){
// FIXME: implement backoff!
}
var cmd = getControl(this.searchUrl);
cmd.parameters().setValue("searchString", searchStr);
var _this = this;
EventManager.addDoradoEvent(cmd, "onSuccess", function(command){
_this._inFlight = false;
//convention:
//1.the key must be "result"
//2.the data format must be [["Alabama","AL"],["Alaska","AK"]] or [{"Alabama":"AL"},{"Alaska":"AK"}]
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;
}
}
);
通過上面的處理,就可以使用我們自己的前后臺(tái)通訊機(jī)制來完成請求數(shù)據(jù)的目的。
接下來就是生成我們的頁面,添加dojo加載js的腳本:
<script type="text/javascript" src="./dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.ComboBox");
// 注意這里有一個(gè)定位的問題,查找路徑必須加"..",
// 因?yàn)閐ojo在查找DoradoComboBox.js的時(shí)候會(huì)從"/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
結(jié)論
通過擴(kuò)展之后還是發(fā)現(xiàn)了不少問題:
1、由于集成的兩套東西都會(huì)在Object.prototype, Array.prototype, Function.prototype上加一些自己的東西,因此這樣非常容易帶來命名上的沖突,已經(jīng)碰到這個(gè)問題。
2、由于二者都會(huì)使用一些全局性的函數(shù),變量等,這樣也會(huì)存在潛在的沖突,不過目前還沒有碰到。
3、多套js庫要同時(shí)加載,客戶端的壓力是不是大了些?性能可以接受嗎?目前還沒有測試不得而知。
目前我們公司已經(jīng)形成一套基于Ajax的完整的產(chǎn)品,封裝了自己的Ajax前后臺(tái)通訊機(jī)制以及提供了可重用的客戶端組件,我嘗試了一下將我們的產(chǎn)品與Dojo Toolkit進(jìn)行整合。下面是我的做法,整合的是Dojo ComboBox Widget,它實(shí)際上是一個(gè)Auto Completion組件,類似Google Suggest。
從Dojo提供的測試類test_ComboBox.html入手,加debugger進(jìn)行跟蹤調(diào)試,理清Dojo Widget的加載流程。
經(jīng)過跟蹤調(diào)試,對Dojo的Widget有了一個(gè)大致的了解:首先是加載當(dāng)前需要的JavaScript文件,然后對整個(gè)html頁面進(jìn)行解析。在頁面上使用widget有三種方式:一種就是在html元素上添加一些dojo能解析的屬性,如
<select dojoType="combobox" style="width: 300px;" name="foo.bar1" autocomplete="false"
onValueChanged="setVal1"
>
其中的dojoType,autocomplete, onValueChanged都是dojo能夠識(shí)別的屬性,這個(gè)有些類似typestry的做法。第二種就是使用DojoML的寫法:
<dojo:combobox style="width: 300px;" name="foo.bar1" autocomplete="false"
onValueChanged="setVal1"
/>
這種寫法有些變態(tài),跟jsp中的自定義標(biāo)簽基本就是一回事,只是把解析的過程從后臺(tái)移到了前臺(tái)來做,后來看到有些框架也這么干,也就沒話說了。
還有一種寫法是使用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)建的時(shí)候同時(shí)利用dojo定義的combobox html模版以及css模版完成在頁面中插入最終的combobox控件的目的。
接下來看看Dojo ComboBox如何通過ajax與后臺(tái)通訊,Dojo ComboBox提供了兩種自動(dòng)完成方式:一種是將所有的數(shù)據(jù)下載到前臺(tái)緩存,然后在前臺(tái)根據(jù)用戶輸入的數(shù)據(jù)從緩存中匹配出自動(dòng)完成所需要的數(shù)據(jù)列表。另外一種就是根據(jù)用戶每次輸入的數(shù)據(jù)實(shí)時(shí)向后臺(tái)發(fā)送請求獲得要自動(dòng)完成的數(shù)據(jù),當(dāng)然這個(gè)數(shù)據(jù)也會(huì)以用戶輸入的內(nèi)容為key,以得到的數(shù)據(jù)為value進(jìn)行緩存。對于兩種方式,Dojo通過不同的DataProvider來實(shí)現(xiàn)(dojo.widget.incrementalComboBoxDataProvider和dojo.widget.basicComboBoxDataProvider),這一點(diǎn)非常精妙,讓我非常佩服。而這兩個(gè)類都是通過dojo.declare(“className”, “parentClassName”, constructor, declarationBody)這種方式來做的,這個(gè)也和我們以往的做法有別??傊褪潜容^精妙啦!
Dojo向后臺(tái)發(fā)送請求的過程封裝在dojo.io.bind()這個(gè)方法中,而我們有自己的一套前后臺(tái)通訊機(jī)制,因?yàn)楸仨毾朕k法將dojo.io.bind()替換成我們的做法來達(dá)到最終整合的目的,因?yàn)镈ojo ComboBox的數(shù)據(jù)交互都是封裝在DataProvider里面的,因?yàn)槲覀冎恍枰獙?shí)現(xiàn)自己的DataProvider就可以搞定了,這樣我們無須修改Dojo的源,而且還可以使用Dojo的繼承機(jī)制,從已有的DataProvider集成復(fù)寫掉我需要替換的方法,這讓我有了寫Java的感覺。
dojo.declare(
"dojo.widget.incrementalDoradoComboBoxDataProvider",
dojo.widget.incrementalComboBoxDataProvider,
null,
{
//要替換的方法,使用自己的通訊機(jī)制
startSearch: function(/*String*/ searchStr, /*Function*/ callback){
if(this._inFlight){
// FIXME: implement backoff!
}
var cmd = getControl(this.searchUrl);
cmd.parameters().setValue("searchString", searchStr);
var _this = this;
EventManager.addDoradoEvent(cmd, "onSuccess", function(command){
_this._inFlight = false;
//convention:
//1.the key must be "result"
//2.the data format must be [["Alabama","AL"],["Alaska","AK"]] or [{"Alabama":"AL"},{"Alaska":"AK"}]
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;
}
}
);
通過上面的處理,就可以使用我們自己的前后臺(tái)通訊機(jī)制來完成請求數(shù)據(jù)的目的。
接下來就是生成我們的頁面,添加dojo加載js的腳本:
<script type="text/javascript" src="./dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.ComboBox");
// 注意這里有一個(gè)定位的問題,查找路徑必須加"..",
// 因?yàn)閐ojo在查找DoradoComboBox.js的時(shí)候會(huì)從"/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
結(jié)論
通過擴(kuò)展之后還是發(fā)現(xiàn)了不少問題:
1、由于集成的兩套東西都會(huì)在Object.prototype, Array.prototype, Function.prototype上加一些自己的東西,因此這樣非常容易帶來命名上的沖突,已經(jīng)碰到這個(gè)問題。
2、由于二者都會(huì)使用一些全局性的函數(shù),變量等,這樣也會(huì)存在潛在的沖突,不過目前還沒有碰到。
3、多套js庫要同時(shí)加載,客戶端的壓力是不是大了些?性能可以接受嗎?目前還沒有測試不得而知。
相關(guān)文章
dojo學(xué)習(xí)第二天 ajax異步請求之綁定列表
在上一篇《dojo學(xué)習(xí)第一天 Tab選項(xiàng)卡》,我們學(xué)到了,怎么用dojo的選項(xiàng)卡插件來制作更易于用戶使用的表單,所有的一切都是為了使用更加方便,一切都是為了用戶的體驗(yàn)2011-08-08dojo 之基礎(chǔ)篇(三)之向服務(wù)器發(fā)送數(shù)據(jù)
dojo 之基礎(chǔ)篇(三)之向服務(wù)器發(fā)送數(shù)據(jù)...2007-03-03dojo學(xué)習(xí)第一天 Tab選項(xiàng)卡 實(shí)現(xiàn)
可能很多人都對dojo只聞其名,覺得有了jquery、prototype、YUI等這些優(yōu)秀的js庫了,dojo還有它存在的必要嗎?2011-08-08dojo 之基礎(chǔ)篇(二)之從服務(wù)器讀取數(shù)據(jù)
dojo 之基礎(chǔ)篇(二)之從服務(wù)器讀取數(shù)據(jù)...2007-03-03Dojo之路:如何利用Dojo實(shí)現(xiàn)Drag and Drop效果
Dojo之路:如何利用Dojo實(shí)現(xiàn)Drag and Drop效果...2007-04-04