Overview
筆記
Prototype.js 
是Javascript編寫(xiě)者的一把小軍刀，提供了Ruby風(fēng)格的簡(jiǎn)寫(xiě)語(yǔ)法和實(shí)效的函數(shù)，更難得的是完全跨瀏覽器，讓大家舒舒服服寫(xiě)出又精簡(jiǎn)又不用愁心兼容的的JS代碼，springside 已經(jīng)離不開(kāi)它了。
個(gè)人最常用Ruby風(fēng)格OO語(yǔ)法與$選擇符，Element與Form Element系列函數(shù)以及傳統(tǒng)Ajax三項(xiàng)。
1.1 Ruby風(fēng)格的OO語(yǔ)言
1.Class
Javascript本身的OO語(yǔ)法很難懂，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風(fēng)格的不定參數(shù)，非常實(shí)用的語(yǔ)法
new Ajax.Updater('mydiv', ' / foo / bar', {asynchronous: true,color:#000000});
3.循環(huán)閉包
elements.each( function (element){
alert(element);
});
1.2 最愛(ài)$/Element 系列
我最喜歡是可以用$ 等價(jià)于平臺(tái)無(wú)關(guān)的document.getElementByID("bookDiv")：
值得留意的還有和CSS一樣的批量選擇語(yǔ)法$$()：
$$('div#left_books').each(...)
Element系列 有很多實(shí)用的函數(shù)，可以進(jìn)行任意的DOM操作與DOM導(dǎo)航，值得細(xì)細(xì)閱讀：
$('bookdiv').update(' < p > </ p > '); $('bookdiv').show();
$('bookdiv').scrollTo();$('bookdiv').nextSiblings();
而且方法可以連續(xù)調(diào)用：
$('messageDiv').addClassName('operationOK').show();
1.3 Form系列函數(shù)也不錯(cuò)
Form.serialize 將Form中所有Input對(duì)象的值轉(zhuǎn)化為一個(gè)URL String，方便把Form轉(zhuǎn)為用 URL Get方式的Ajax提交，最經(jīng)典的用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 等函數(shù)也實(shí)用。 還有Form.Element 的函數(shù)也可以使用。
1.4 傳統(tǒng)的Ajax
傳統(tǒng)的基于URL的ajax函數(shù)簡(jiǎn)單實(shí)用。
Ajax.Request
new Ajax.Request(url, {
onSuccess: function(transport) {
(transport.responseText);
}
});
Ajax.Updater
new Ajax.Updater('bookdiv', "foo .jsp " ,{onComplete: initObserve});
此函數(shù)的有很多可選的參數(shù) ，返回的Ajax.Response 有status,responseText,responseJSON,responseXML 等屬性。
比如需要異步執(zhí)行ajax, 更新bookdiv后需要重新執(zhí)行initObserve, 上面onComplete的設(shè)置就剛好滿足要求。
定期執(zhí)行的Ajax，4秒執(zhí)行一次(默認(rèn)為3秒)。他還有個(gè)兄弟PeriodicalExecuter
new Ajax.PeriodicalUpdater('items', '/items', {
frequency:4
});
Ajax.Responders 注冊(cè)handler，對(duì)所有的Ajax調(diào)用都很AOP的增加操作：
Ajax.Responders.register({
onCreate: function() {
Ajax.activeRequestCount++;
},
onComplete: function() {
Ajax.activeRequestCount--;
}
});
1.5 Event系列
除了后述的Observe模式外，還有下列保證兼容IE和FF的事件函數(shù)：
1.Event.element(event) ，找出觸發(fā)事件的element.
2.Event.findElement(event,tagName) ，搜索DOM tree里事件的響應(yīng)鏈里的第一個(gè)符合tagName的element.
3.pointerX(event),pointerY(event)等.
還定義了一些標(biāo)準(zhǔn)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模式達(dá)到搜索引擎Friendly
Observe模式 ，就是連接仍然以<a href="foo.jsp" mce_href="foo.jsp" >形式編寫(xiě)，用Observe為其加入onClick事件的偵聽(tīng)。 這樣，當(dāng)搜索引擎訪問(wèn)時(shí)，就會(huì)訪問(wèn)傳統(tǒng)的URL；而用戶使用IE訪問(wèn)時(shí)，就會(huì)被Observe轉(zhuǎn)為使用onClick事件的Ajax效果。
下例通過(guò)selector查找需要處理的鏈接（a），循環(huán)為每個(gè)鏈接添加觀察者，為click事件，添加handle函數(shù)。
$$('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();
}
另外，F(xiàn)orm.Observer，F(xiàn)ield.Observer 可以監(jiān)控表單值的變化。
Misc