Prototype

1.概述

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

1.1 参考资料

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);
}

你可能感兴趣的:(prototype)