我的選擇——Prototype

        由於項目的需要,偶終於也要跟上時代潮流來撥弄一下Ajax了。遵循Java開發的慣性思維,第一步就去找有沒有好用的框架。結果發現Ajax框架世界的紛擾程度絲毫不亞於Java。最後,在Google和幾位Ajax達人的幫助之下,我選擇了dojo。選擇的原因很簡單,有豐富的文檔,也有很豐富的UI 組件(特別是它的Rich Editor十分吸引人),當然在事件處理的機制方面,dojo也有它過人之處。dojo入門門檻並不高,看一下Tutorial,很快就可以上手了。

        dojo中最有特點的地方就是它的事件訂閱方法:connect,例如:

None.gifdojo.event.connect(helloButton, 'onClick', 'helloPressed')   //引自dojo tutorial
None.gif


這行代碼是很易讀的,就是元素helloButton的onClick事件與helloPressed事件綁定了,更簡單的說就是helloButton的onClick事件會觸發helloPressed函數。在這裏有個地方一定要注意的,就是"onClick"。如果我們使用的是dojo的UI組件,那麼這樣寫是沒有問題的。但是,如果我們只是使用最普通的input的話,這裏的"onClick"就得改成"onclick"。道理很簡單,onclick纔是Javascript中標準的事件。這個問題雖然很小,但是一不小心就會在這裏耗費N多的時間,我就在這個問題的受害者。這個問題浪費了我很多的時間,也爲我後來放棄dojo埋下了伏筆。

        在使用Ajax框架的過程中,不可避免的要考慮表單數據提交的問題。dojo提供了很簡單的方式,例如:

ExpandedBlockStart.gifContractedBlock.gif        dojo.io.bind(dot.gif{  url: 'HelloWorldResponsePOST.php', 
InBlock.gif                       handler: helloCallback,
InBlock.gif                       formNode: dojo.byId('myForm')
ExpandedBlockEnd.gif                    }
);             //引自dojo tutorial
None.gif


雖然這個方法可以很簡單的實現表單數據的提交,但是又引出了另外一個問題——數據編碼。如果沒有特別指定的話,bind方法默認的編碼爲ASCII,這樣就會造成返回的UTF-8文本無法正常顯示。爲了解決這個問題,我不得不在大括號裏面加上encoding: "utf-8",這再一次讓我花了不少的時間,也再一次打擊了我的信心。

        不過,做事情貴在堅持,我並沒有因此而放棄dojo,還是繼續用下去。但是到了處理頁面特效的時候,我終於坐不住了。要解決的問題本身很簡單,我希望能提供一些自定義的tooltip,而事實上dojo也提供了非常不錯的tooltip。但是,當我嘗試修改觸發tooltip顯示的事件的時候,我發覺幾乎無從下手。而在我找尋解決方法的時候,我意外的看到了基於Prototypetooltip實現。由這個發現一直順藤摸瓜,我發現了基於Prototype的一片廣闊天地。原來Prototype本身很簡單,設計很完美,易於擴展,有很多其它的Ajax類庫都是基於Prototype開發的,例如Ricoscript.aculo.us。Prototype就像是一個聚寶盆,凝聚了衆多開發人員的智慧,這是一個多麼吸引人的地方啊!以下這篇文章給出了一幅圖表,我們從中可以發現,Prototype以及基於Prototype的其它Ajax類庫佔據了很大的比例:Ajaxian.com 2006 Survey Results

        於是,我毫不猶豫地從dojo轉到了Prototype。由於我並沒有使用到dojo的UI組件,所以從dojo轉到Prototype並沒有花費我多少的時間。我不再需要對事件進行綁定了,取而代之的是最常見的做法——在HTML元素中指定事件的處理函數。Prototype在處理Ajax call的時候,採取如下方式:

ExpandedBlockStart.gifContractedBlock.gif var myAjax = new Ajax.Updater('placeholder', url, dot.gif{method: 'post', parameters: Form.serialize(myForm)});


Updater的構造方法還是非常容易理解的,一看就能明白了。其中的Form.serialize()方法就要比dojo要技高一籌,因爲我不再需要指定encoding了。當然,這裏也有糟糕的地方,'placeholder'就是一個如同雞肋的參數。根據定義,Ajax call處理完成之後返回的文本就會填充至id爲'placeholder'的元素中。雖然這在一些情況下簡化了操作,但是更多時候,我們並非簡單地將返回文本塞到某個頁面元素中。所以,爲了應付這個placeholder,很多朋友就在頁面中創建了一個不可見的div,將它作爲placeholder來容納返回的文本。這一點相比dojo的callback handler而言,要遜色不少。

        不管怎麼說,Prototype的開放性深深打動了我,而最後我也選擇了她。不爲別的,就衝着它的簡單和開放。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章