Overview
筆記
Prototype.js 
是Javascript編寫者的一把小軍刀，提供了Ruby風格的簡寫語法和實效的函數，更難得的是完全跨瀏覽器，讓大家舒舒服服寫出又精簡又不用愁心兼容的的JS代碼，springside 已經離不開它了。
個人最常用Ruby風格OO語法與$選擇符，Element與Form Element系列函數以及傳統Ajax三項。
1.1 Ruby風格的OO語言
1.Class
Javascript本身的OO語法很難懂，prototype封裝了Class類 。
var Person = Class.create({
initialize: function(first,last, city) {
this.first= first;
this.last= last;
this.city = city;
},
getFullName: function() {
return (this.first + ' ' + this.last).strip();
}
});
2.Ruby風格的不定參數，非常實用的語法
new Ajax.Updater('mydiv', ' / foo / bar', {asynchronous: true,color:#000000});
3.循環閉包
elements.each( function (element){
alert(element);
});
1.2 最愛$/Element 系列
我最喜歡是可以用$ 等價于平臺無關的document.getElementByID("bookDiv")：
值得留意的還有和CSS一樣的批量選擇語法$$()：
$$('div#left_books').each(...)
Element系列 有很多實用的函數，可以進行任意的DOM操作與DOM導航，值得細細閱讀：
$('bookdiv').update(' < p > </ p > '); $('bookdiv').show();
$('bookdiv').scrollTo();$('bookdiv').nextSiblings();
而且方法可以連續調用：
$('messageDiv').addClassName('operationOK').show();
1.3 Form系列函數也不錯
Form.serialize 將Form中所有Input對象的值轉化為一個URL String，方便把Form轉為用 URL Get方式的Ajax提交，最經典的用Ajax提交Form的例子:
< form action = " /action/here " method = " post "
onsubmit = " new Ajax.Updater('div_to_be_updated', '/action/here', {parameters:Form.serialize(this)});
return false; " >
另外，Form.focusFirstElement , Form.getInputs 等函數也實用。 還有Form.Element 的函數也可以使用。
1.4 傳統的Ajax
傳統的基于URL的ajax函數簡單實用。
Ajax.Request
new Ajax.Request(url, {
onSuccess: function(transport) {
(transport.responseText);
}
});
Ajax.Updater
new Ajax.Updater('bookdiv', "foo .jsp " ,{onComplete: initObserve});
此函數的有很多可選的參數 ，返回的Ajax.Response 有status,responseText,responseJSON,responseXML 等屬性。
比如需要異步執行ajax, 更新bookdiv后需要重新執行initObserve, 上面onComplete的設置就剛好滿足要求。
定期執行的Ajax，4秒執行一次(默認為3秒)。他還有個兄弟PeriodicalExecuter
new Ajax.PeriodicalUpdater('items', '/items', {
frequency:4
});
Ajax.Responders 注冊handler，對所有的Ajax調用都很AOP的增加操作：
Ajax.Responders.register({
onCreate: function() {
Ajax.activeRequestCount++;
},
onComplete: function() {
Ajax.activeRequestCount--;
}
});
1.5 Event系列
除了后述的Observe模式外，還有下列保證兼容IE和FF的事件函數：
1.Event.element(event) ，找出觸發事件的element.
2.Event.findElement(event,tagName) ，搜索DOM tree里事件的響應鏈里的第一個符合tagName的element.
3.pointerX(event),pointerY(event)等.
還定義了一些標準KeyCode，KEY_BACKSPACE, KEY_TAB, KEY_RETURN, KEY_ESC, KEY_LEFT, KEY_UP, KEY_RIGHT, KEY_DOWN, KEY_DELETE, KEY_HOME, KEY_END, KEY_PAGEUP, KEY_PAGEDOWN
2. Observe模式達到搜索引擎Friendly
Observe模式 ，就是連接仍然以<a href="foo.jsp" mce_href="foo.jsp" >形式編寫，用Observe為其加入onClick事件的偵聽。 這樣，當搜索引擎訪問時，就會訪問傳統的URL；而用戶使用IE訪問時，就會被Observe轉為使用onClick事件的Ajax效果。
下例通過selector查找需要處理的鏈接（a），循環為每個鏈接添加觀察者，為click事件，添加handle函數。
$$('div#left_books*a.href').each( function (element) {
element.observe('click',handlerCilckEvent, false );
function handlerCilckEvent(event) {
var element = Event.element(event);
new Ajax.Updater('bookdiv',element.href);
Event.stop(event);
$('bookdiv').show();
}
另外，Form.Observer，Field.Observer 可以監控表單值的變化。
Misc