隨著Ajax應(yīng)用越來(lái)越多，各種Ajax Library（Prototype），Ajax Framework（DWR），Ajax Toolkit（Dojo，YUI）也日漸豐富起來(lái)，有沒(méi)有辦法將這些結(jié)合起來(lái)呢？類似Spring的做法，當(dāng)然我沒(méi)法整出一個(gè)IoC的微內(nèi)核將各種Ajax“粘合”起來(lái)，但是將這些Ajax可重用的組件加以整合應(yīng)該是沒(méi)有問(wèn)題的，這樣即可以避免重復(fù)發(fā)明輪子，還可以針對(duì)各種Ajax進(jìn)行揚(yáng)長(zhǎng)避短，形成一套比較全面的Ajax解決方案。同時(shí)也增加了開(kāi)發(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提供的測(cè)試類test_ComboBox.html入手，加debugger進(jìn)行跟蹤調(diào)試，理清Dojo Widget的加載流程。 
經(jīng)過(guò)跟蹤調(diào)試，對(duì)Dojo的Widget有了一個(gè)大致的了解：首先是加載當(dāng)前需要的JavaScript文件，然后對(duì)整個(gè)html頁(yè)面進(jìn)行解析。在頁(yè)面上使用widget有三種方式：一種就是在html元素上添加一些dojo能解析的屬性，如 
<select dojoType="combobox" style="width: 300px;" name="foo.bar1" autocomplete="false"  
        onValueChanged="setVal1"  
    >   
其中的dojoType，autocomplete， onValueChanged都是dojo能夠識(shí)別的屬性，這個(gè)有些類似typestry的做法。第二種就是使用DojoML的寫(xiě)法： 
<dojo:combobox style="width: 300px;" name="foo.bar1" autocomplete="false"  
        onValueChanged="setVal1"  
    />   
這種寫(xiě)法有些變態(tài)，跟jsp中的自定義標(biāo)簽基本就是一回事，只是把解析的過(guò)程從后臺(tái)移到了前臺(tái)來(lái)做，后來(lái)看到有些框架也這么干，也就沒(méi)話說(shuō)了。 
還有一種寫(xiě)法是使用javascript在頁(yè)面加載完成之后，在指定的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"));   
    }   
在對(duì)元素解析創(chuàng)建的時(shí)候同時(shí)利用dojo定義的combobox html模版以及css模版完成在頁(yè)面中插入最終的combobox控件的目的。 
接下來(lái)看看Dojo ComboBox如何通過(guò)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ā)送請(qǐng)求獲得要自動(dòng)完成的數(shù)據(jù)，當(dāng)然這個(gè)數(shù)據(jù)也會(huì)以用戶輸入的內(nèi)容為key，以得到的數(shù)據(jù)為value進(jìn)行緩存。對(duì)于兩種方式，Dojo通過(guò)不同的DataProvider來(lái)實(shí)現(xiàn)（dojo.widget.incrementalComboBoxDataProvider和dojo.widget.basicComboBoxDataProvider），這一點(diǎn)非常精妙，讓我非常佩服。而這兩個(gè)類都是通過(guò)dojo.declare(“className”, “parentClassName”, constructor, declarationBody)這種方式來(lái)做的，這個(gè)也和我們以往的做法有別?？傊褪潜容^精妙啦！ 
Dojo向后臺(tái)發(fā)送請(qǐng)求的過(guò)程封裝在dojo.io.bind()這個(gè)方法中，而我們有自己的一套前后臺(tái)通訊機(jī)制，因?yàn)楸仨毾朕k法將dojo.io.bind()替換成我們的做法來(lái)達(dá)到最終整合的目的，因?yàn)镈ojo ComboBox的數(shù)據(jù)交互都是封裝在DataProvider里面的，因?yàn)槲覀冎恍枰獙?shí)現(xiàn)自己的DataProvider就可以搞定了，這樣我們無(wú)須修改Dojo的源，而且還可以使用Dojo的繼承機(jī)制，從已有的DataProvider集成復(fù)寫(xiě)掉我需要替換的方法，這讓我有了寫(xiě)Java的感覺(jué)。 
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;   
        }   
    }   
);   
通過(guò)上面的處理，就可以使用我們自己的前后臺(tái)通訊機(jī)制來(lái)完成請(qǐng)求數(shù)據(jù)的目的。 
接下來(lái)就是生成我們的頁(yè)面，添加dojo加載js的腳本： 
<script type="text/javascript" src="./dojo/dojo.js"></script>  
<script type="text/javascript">  
    dojo.require("dojo.widget.ComboBox");   
    // 注意這里有一個(gè)定位的問(wèn)題,查找路徑必須加"..",   
    // 因?yàn)閐ojo在查找DoradoComboBox.js的時(shí)候會(huì)從"/dojo"而不是"/"目錄開(kāi)始查找   
    // 最終使用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"  
                    >   
這樣我們的整合工作就完成了，對(duì)了還有文件的目錄結(jié)構(gòu)： 
Webapp 
|--adapter(存放所有用于整合的js文件) 
|------dojo 
|---------widget 
|-----------DoradoComboBox.js 
|--dojo（dojo的所有js文件） 
|------src 
|------dojo.js 
|--js（我們自己組件庫(kù)的js文件） 
|--WEB-INF
結(jié)論 
通過(guò)擴(kuò)展之后還是發(fā)現(xiàn)了不少問(wèn)題： 
1、由于集成的兩套東西都會(huì)在Object.prototype, Array.prototype, Function.prototype上加一些自己的東西，因此這樣非常容易帶來(lái)命名上的沖突，已經(jīng)碰到這個(gè)問(wèn)題。 
2、由于二者都會(huì)使用一些全局性的函數(shù)，變量等，這樣也會(huì)存在潛在的沖突，不過(guò)目前還沒(méi)有碰到。 
3、多套js庫(kù)要同時(shí)加載，客戶端的壓力是不是大了些？性能可以接受嗎？目前還沒(méi)有測(cè)試不得而知。

最新評(píng)論