Prototype.js--Javascript编写者的小军刀 -update at 2007 12.4

Overview

• Prototype.js官方文章 
• Prototype API Documentation  
• 《Prototype And script.aculo.us》  Pragmatic Bookshelf，2007- cover Prototype 1.6
• 《Prototype and Scriptaculous in Action》  Manning，2007
• Developer Notes for Prototype.js  cover 1.5,有点旧.（中文版 , cover 1.3.1）

笔记

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")：

$ {"bookDiv"}

 

值得留意的还有和CSS一样的批量选择语法$$()：

$('div#left_books').each(...)

 

Element系列 有很多实用的函数，可以进行任意的DOM操作与DOM导航，值得细细阅读：

$('bookdiv').update(' < p > </ p > '); // 更新innerHtml
$('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的例子:

< formaction = " /action/here " method = " post " 
onsubmit = " newAjax.Updater('div_to_be_updated','/action/here',{parameters:Form.serialize(this)});
returnfalse; " >

 

另外，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

• Scripteka 基于Prototype的Widgets收集