作者：江南白衣 ，@_@
  (本文為SpringSide參考手冊一部分，更多Java開(kāi)源項目開(kāi)發(fā)指南請訪(fǎng)問(wèn)SpringSide參考手冊)

   Prototype.js 是Javascript編寫(xiě)者的一把小軍刀，提供了Ruby風(fēng)格的簡(jiǎn)寫(xiě)語(yǔ)法和實(shí)效的函數，更難得的是完全跨瀏覽器，讓大家舒舒服服寫(xiě)出又精簡(jiǎn)又不用愁心兼容的的JS代碼，springside 已經(jīng)離不開(kāi)它了。

 Prototype.js最重要的文檔有：

1.1 最?lèi)?ài)$系列 

我最喜歡是可以用${"bookDiv"} 等價(jià)于通用的document.getElementByID("bookDiv")

值得留意的還有和CSS一樣的批量選擇語(yǔ)法$$()，如

$$(‘div#left_books).each(
.)

Element系列有很多實(shí)用的函數：  

$(‘bookdiv‘).update(‘ < p >
</ p > ‘);  // 更新innerHtml 
$(‘bookdiv‘).show(); 
$(‘bookdiv‘).hide();
$(‘bookdiv‘).toggle();   // 切換visiable
$(‘bookdiv‘).visiable();   // 返回是否visiable
$(‘bookdiv‘).scrollTo();

  .....還有很多 

1.2 傳統的Ajax

傳統的基于URL的ajax函數簡(jiǎn)單實(shí)用。

   new  Ajax.Updater(‘bookdiv‘, "foo .jsp " );

此函數的還有很多可選的參數，參數列表見(jiàn)此：

 

new Ajax.Updater(‘bookdiv‘,"foo.jsp", {onComplete: initObserve});


比如需要異步執行ajax, 更新bookdiv后需要重新執行initObserve, onComplete的設置就剛好滿(mǎn)足你的要求。

另有可定時(shí)執行Ajax的PeriodicalUpdater。

1.3 Form系列函數也不錯

Form.serialize   將Form中所有Input對象的值轉化為一個(gè)URL String，方便把Form轉為用 URL Get方式的Ajax提交，最經(jīng)典的用Ajax提交Form的例子: 

  < form action = " /action/here "  method = " post "  
   onsubmi = " new Ajax.Updater(‘div_to_be_updated‘, ‘/action/here‘, {parameters:Form.serialize(this)});
              return false; " >  

  另外，Form.focusFirstElement , Form.getInputs等函數也很實(shí)用。 

1.4 Event系列

除了后述的Observe模式外，還有下列保證兼容IE和FF的事件函數：

1.Event.element(event)，找出觸發(fā)事件的element.

2.Event.findElement(event,tagName)，搜索DOM tree里事件的響應鏈里的第一個(gè)符合tagName的element.

3.pointerX(event),pointerY(event)等.

還定義了一些標準KeyCode，見(jiàn)：http://www.sergiopereira.com/articles/prototype.js.html#Reference.Extensions.Event

1.5 Ruby風(fēng)格

1.循環(huán)函數

elements.each(  function (element){
        alert(element); 
       });

2.不定參數

new  Ajax.Updater(‘mydiv‘, ‘ / foo / bar‘, {asynchronous: true });

2. Observe模式達到搜索引擎Friendly

Observe模式，就是連接仍然以<a href="foo.jsp">形式編寫(xiě)，用Observe為其加入onClick事件的偵聽(tīng)。 這樣，當搜索引擎訪(fǎng)問(wèn)時(shí)，就會(huì )訪(fǎng)問(wèn)傳統的URL；而用戶(hù)使用IE訪(fǎng)問(wèn)時(shí)，就會(huì )被Observe轉為使用onClick事件的Ajax效果。

見(jiàn)SpringSide中的/home/index.jsp 圖書(shū)詳情察看--通過(guò)selector查找需要處理的鏈接（a），循環(huán)為每個(gè)鏈接添加觀(guān)察者，為click事件，添加handle函數。   
 

$$(‘div#left_books  *  a[href]‘).each( function (element){
Event.observe(element,‘click‘,handlerCilckEvent, false );
});

function  handlerCilckEvent(event){
     var  element  =  Event.element(event);
     new  Ajax.Updater(‘bookdiv‘,element.href); 
    Event.stop(event);
    $(‘bookdiv‘).show();
}

3.script.aculo.us的DomBuilder

script.aculo.us語(yǔ)法超簡(jiǎn)潔的Builder, 相比之下W3c的Dom Builder語(yǔ)法簡(jiǎn)直是噩夢(mèng)。html片斷不復雜時(shí)如果用JSTemplate有點(diǎn)大炮打蚊子，用script.aculo.us的Builder就夠了。
Builder很有Ruby的風(fēng)格，請看下面一句 ： 

foo =  Builder.node(‘a(chǎn)‘, {href: " foo.jsp " },categorys[i].name)

第1個(gè)參數是element類(lèi)型，第2個(gè)是可選的attribbute，第3個(gè)是節點(diǎn)內的子節點(diǎn)。
如果要換成W3c的Dom函數寫(xiě)法，善哉善哉。

下面這段更明顯，直接照元素的頁(yè)面順序來(lái)生成對象，而不是像W3C Dom Builder很邏輯抽象的，先生成對象，然后append到父元素。

div  =  Builder.node(‘div‘,{className:linkDiv},[ 
                       Builder.node(‘a(chǎn)‘, {href: " foo.jsp " }, categorys[i].name)  ]
         );

 

當然了，還是沒(méi)有JS Template清晰，所以Builder只作為html片斷非常短時(shí)使用。