(本文爲SpringSide參考手冊一部分,更多Java開源項目開發指南請訪問SpringSide參考手冊)
Prototype.js 是Javascript編寫者的一把小軍刀,提供了Ruby風格的簡寫語法和實效的函數,更難得的是完全跨瀏覽器,讓大家舒舒服服寫出又精簡又不用愁心兼容的的JS代碼,springside 已經離不開它了。
Prototype.js最重要的文檔有:
1.1 最愛$系列
我最喜歡是可以用${"bookDiv"} 等價於通用的document.getElementByID("bookDiv")
值得留意的還有和CSS一樣的批量選擇語法$$(),如
Element系列有很多實用的函數:
$('bookdiv').show();
$('bookdiv').hide();
$('bookdiv').toggle(); // 切換visiable
$('bookdiv').visiable(); // 返回是否visiable
$('bookdiv').scrollTo();
.....還有很多
1.2 傳統的Ajax
傳統的基於URL的ajax函數簡單實用。
此函數的還有很多可選的參數,參數列表見此:
比如需要異步執行ajax, 更新bookdiv後需要重新執行initObserve, onComplete的設置就剛好滿足你的要求。
另有可定時執行Ajax的PeriodicalUpdater。
1.3 Form系列函數也不錯
Form.serialize 將Form中所有Input對象的值轉化爲一個URL String,方便把Form轉爲用 URL Get方式的Ajax提交,最經典的用Ajax提交Form的例子:
onsubmi = " new Ajax.Updater('div_to_be_updated', '/action/here', {parameters:Form.serialize(this)});
return false; " >
另外,Form.focusFirstElement , Form.getInputs等函數也很實用。
1.4 Event系列
除了後述的Observe模式外,還有下列保證兼容IE和FF的事件函數:
1.Event.element(event),找出觸發事件的element.
2.Event.findElement(event,tagName),搜索DOM tree裏事件的響應鏈裏的第一個符合tagName的element.
3.pointerX(event),pointerY(event)等.
還定義了一些標準KeyCode,見:http://www.sergiopereira.com/articles/prototype.js.html#Reference.Extensions.Event
1.5 Ruby風格
1.循環函數
alert(element);
});
2.不定參數
2. Observe模式達到搜索引擎Friendly
Observe模式,就是連接仍然以<a href="foo.jsp">形式編寫,用Observe爲其加入onClick事件的偵聽。 這樣,當搜索引擎訪問時,就會訪問傳統的URL;而用戶使用IE訪問時,就會被Observe轉爲使用onClick事件的Ajax效果。
見SpringSide中的/home/index.jsp 圖書詳情察看--通過selector查找需要處理的鏈接(a),循環爲每個鏈接添加觀察者,爲click事件,添加handle函數。
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語法超簡潔的Builder, 相比之下W3c的Dom Builder語法簡直是噩夢。html片斷不復雜時如果用JSTemplate有點大炮打蚊子,用script.aculo.us的Builder就夠了。
Builder很有Ruby的風格,請看下面一句 :
第1個參數是element類型,第2個是可選的attribbute,第3個是節點內的子節點。
如果要換成W3c的Dom函數寫法,善哉善哉。
下面這段更明顯,直接照元素的頁面順序來生成對象,而不是像W3C Dom Builder很邏輯抽象的,先生成對象,然後append到父元素。
Builder.node('a', {href: " foo.jsp " }, categorys[i].name) ]
);
當然了,還是沒有JS Template清晰,所以Builder只作爲html片斷非常短時使用。