Prototype.js的分析

Prototype.js的分析2007-11-16 17:13　prototype.js是
一個很強大的Javascript函數庫，它可以讓你很輕鬆的使用一些特效，實現AJAX的功能.雖然prototype.js是為了Ruby On
Rails開發的，它的純Javascript的性質也使得它很容易用在其他的網路程式中。可惜的是，Prototype.js還沒有強大的文檔解釋，盡
管它的代碼非常有條理，但是也給初學者造成了一定的麻煩。作者在README裡說：

Prototype is embarrassingly lacking in documentation。(The
source code should be fairly easy to comprehend；I’m committed to using
a clean style with meaningful identifiers。But I know that only goes so
far.)

經過這兩天的學習,我總結了一下Prototype的主要用法:

基本用法：

　　以Element Class為例，prototype給每個主要的分類都分成了一個Class，使用起來很方便，要產生特定的效果的話只要用new Class.function(<argument>)就可以了。
比如:

<DIV id="div1">
<a href="#" onclick="new Element.toggle(''div2'')">
Click Me
</a>
</DIV>

<DIV id="div2">Hello!</DIV>

當點擊Click Me的時候，div2就會交替隱藏或顯示。注意，你可以給toggle加上無限個parameter，比如Element.toggle(''div2'',''div3'',''div4'')...

下面是每個重要的類和函數的解釋:

prototype 1.2.0 的函數簡介

函數名	解釋	舉例
Element.toggle	交替隱藏或顯示	"Element.toggle(''div1'',''div2'')
Element.hide	隱藏	"Element.hide(''div1'',''div2'')
Element.show	顯示	"Element.show(''div1'',''div2'')
Element.remove	刪除	"Element.remove(''div1'',''div2'')
Element.getHeight	取得高度	"Element.getHeight(''div1'')
Toggle.display	和Element.toggle相同	"Toggle.display(''div1'',''div2'')
Insertion.Before	在DIV前插入文字	"Insertion.Before(''div1'',''my content'')
Insertion.After	在DIV後插入文字	"Insertion.After(''div1'',''my content'')
Insertion.Top	在DIV裡最前插入文字	"Insertion.Top(''div1'',''this is a text'')
Insertion.Bottom	在DIV裡最後插入文字	"Insertion.Bottom(''div1'',''this is a text'')
PeriodicalExecuter	以給定頻率調用一段JavaScript	"PeridicalExecutor(test, 1)"這裡test是Javascript的函數,1是頻率(1秒).
$	取得一個DIV, 相當於getElementById()	$(''div1'')
Field.clear	清空一個輸入框	"Field.clear(''textfield1'')
Field.focus	把 焦點集中在輸入框上	"Field.focus(''select1'')
Field.present	判斷內容是否為空白	"alert(Field.present(''textfield1''))"
Field.select	選擇輸入框的內容	"Field.select(''textfield1'')"
Field.activate	把 焦點集中在輸入框上並選擇輸入框的內容	"Field.activate(''textfield1'')"
Form.serialize	把表格內容轉化成string
Form.getElements	取得表格內容為數組形式
Form.disable	disable表格所有內容	Form.disable(''form1'') (這個好象不work)
Form.focusFirstElement	把焦點集中在表格第一個元素上	Form.focusFirstElement(''form1'')
Form.reset	Reset表格	Form.reset(''form1'')
Form.Element.getValue	取得表格輸入框的值	Form.Element.getValue(''text1'')
Form.Element.serialize	把表格中輸入框內容轉化成string	Form.Element.serialize(''text1'')
$F	等同於Form.Element.getValue()	$F(''text1'')
Effect.Highlight	高亮特效.	Effect.Highlight(''text1'')
Effect.Fade	褪色特效
Effect.Scale	放大縮小(百分比）	Effect.Scale(''text1'', 200) 這裡200 = 200%, 即兩倍
Effect.Squish	消失特效．文字縮小後消失	Effect.Squish(''text1'')
Effect.Puff	消失特效．文字放大後消失	Effect.Puff(''text1'')
Effect.Appear	出現特效
Effect.ContentZoom	ZOOM特效．
Ajax.Request	傳送Ajax請求給伺服器	Ajax.Request(''http://server/s.php'')
Ajax.Updater	傳送Ajax請求給伺服器並用回覆的結果更新指定的Container	Ajax.Updater(''text1'',''http://server/s.php'')

Ajax的函數實際上還有一個選擇性參數，就是options.在未指明的情況下，Ajax使用的是''POST''發送請求，而且是非同步執行，如果
想要改用''GET''和同步，就可以用Ajax.Request(''http://server/s.php'',''get'','''',''a
=1&b=2'')來執行.

在Rails中Ajax的函數被封裝成Ruby的函數，所以不必直接採用Ajax.Request,Ajax.Updater。但是知道它是怎麼工作的也很有用。