Prototype

1.概述

Prototype.js 是Ruby On Rails的副产品，Javascript编写者的一把小军刀，提供了Ruby风格的简写语法和实效的函数，更难得的是完全跨浏览器，让大家舒舒服服写出又精简又不用愁心兼容的的JS代码，SpringSide 已经离不开它了。

1.1 参考资料

• Prototype1.4 开发者手册中文版
• Script.aculo.us的wiki
• Prototype的文档收集

1.2 安装使用

prototype.js 只有一个js文件，直接在html里include就可以了。因为使用颇广，SpringSide已加入公共的meta.jsp里

<script src="<c:url value="/scripts/prototype.js"/>" type="text/javascript"></script>

2. 功能介绍

2.1最爱$系列

我最喜欢是可以用$ {"bookDiv"} 等价于通用于IE,FireFox的长长的document.getElementByID("bookDiv")

值得留意的还有和CSS一样的批量选择语法$$()，如$$('div#left_books).each(....) ，CSS的语法指它的#. 等符号及嵌套的定义

另外$F()可以取得Form里的field 的 value。

Element系列有很多实用的函数：

$('bookdiv').update('<p>...</p>'); //更新innerHtml
$('bookdiv').show();
$('bookdiv').hide();
$('bookdiv').toggle(); //切换visiable
$('bookdiv').visiable(); //返回是否visiable
$('bookdiv').scrollTo();
.....还有很多

在1.5RC1 之后，Element系列函数会返回自身，因此可以连续操作了，据说学自JQuery，如$('bookdiv').show().scrollTo();

2.2 传统的Ajax

传统的基于URL的ajax函数简单实用。

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

此函数的还有很多可选的参数，参数列表见此。如：

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

如果要异步执行ajax, 更新bookdiv后需要重新执行initObserve, onComplete的设置就刚好满足你的要求。

另有可定时执行Ajax的PeriodicalUpdater。

2.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里数值变化的情况，典型应用是离开本页时，提醒用户还有没有保存的修改。和传统的检查方式相比，下面的函数是用户有 input的动作时主动调度myCallBackFunction设置一个flag，而不是页面提交时才进行批量检查，加速提交的速度。

new Form.EventObserver($("myform"), myCallBackFunction);
new Form.Element.EventObserver($("myfield", myCallbackFunction);

另外，Form.focusFirstElement ， Form.getInputs等函数也很实用。

2.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

3.Pattern

3.1 Ruby风格

一些Ruby风格的语法。

1.循环函数

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

2. 不定参数

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

3.2 Observe模式达到搜索引擎Friendly

Observe模式，就是连接仍然以<a href="foo.jsp" >形式编写链接，用Observe为其加入onClick事件的侦听。 这样，当搜索引擎访问时，就会访问传统的URL；而用户使用浏览器访问时，就会被Observe转为使用onClick事件的Ajax效果。

SpringSide推荐用$${}，批量选择element进行设置onclick 事件，ajax的访问原来的<a href>。

$('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);
}