Function - 对Function类的扩展

Prototype对Function对象的扩展比较简单, 但却是非常重要且非常有用的扩展。扩展主要包括2个方法, 他们被加到了Function.prototype中, 这样就使得任意的函数对象都具备了这两个方法。 这两个方法的主要用途在于将某个函数绑定到特定的函数之上去执行。

Knowledge Prepare - 知识准备

Source View - 源码解析

Function.prototype.bind = function() {
var __method = this;  // 这里的this表示bind方法的调用者, 是一个函数对象
var args = $A(arguments);  // 这里的$A(arguments)表示传入到bind方法的参数, 不要与下面的$A(arguments)混淆
var object = args.shift(); // 调用args.shift()方法返回第一个参数, 即目标对象; 此时args为除去第一个参数的一个参数数组
return function() {  // 不带有任何的参数的函数, 注意函数内部的$A(arguments)的含义
// 调用函数的apply方法执行函数, 其中的object为目标对象, args为bind方法中的参数列表(除了第一个参数以外的参数构成的数组)
return __method.apply(object, args.concat($A(arguments)));// 事实上, 这里的$A(arguments)一定是一个空数组
}
}
Function.prototype.bindAsEventListener = function(object) {
var __method = this;  // 这里的this表示bind方法的调用者, 是一个函数对象
return function(event) {  // 带有一个全局event参数的函数
// 调用函数的call方法执行函数, 其中的object为目标对象, 全局的event对象作为参数
return __method.call(object, event || window.event);
}
}

Field & Function Reference - 属性方法一览

Function ( 实例 ) - 扩展

Analysis & Usage - 分析与使用

Object - 对Object类的扩展

Prototype对Object类进行的扩展主要通过一个静态函数Object.extend(destination, source)实现了JavaScript中的继承。 从语义的角度, Object.extend(destination, source)方法有些不和逻辑, 因为它事实上仅仅实现了从源对象到目标对象的全息拷贝。不过你也可以这样认为：由于目标对象拥有了所有源对象所拥有的特性, 所以看上去就像目标对象继承了源对象(并加以扩展)一样。另外, Prototype对Object扩展了几个比较有用的静态方法, 所有其他的类可以通过调用这些静态方法获取支持。

Source View - 源码解析

Object.extend = function(destination, source) {  // 一个静态方法表示继承, 目标对象将拥有源对象的所有属性和方法
for (var property in source) {
destination[property] = source[property];   // 利用动态语言的特性, 通过赋值动态添加属性与方法
}
return destination;   // 返回扩展后的对象
}
Object.extend(Object, {
inspect: function(object) {   // 一个静态方法, 传入一个对象, 返回对象的字符串表示
try {
if (object == undefined) return 'undefined';  // 处理undefined情况
if (object == null) return 'null';     // 处理null情况
// 如果对象定义了inspect方法, 则调用该方法返回, 否则返回对象的toString()值
return object.inspect ? object.inspect() : object.toString();
} catch (e) {
if (e instanceof RangeError) return '...';  // 处理异常情况
throw e;
}
},
keys: function(object) {     // 一个静态方法, 传入一个对象, 返回该对象中所有的属性, 构成数组返回
var keys = [];
for (var property in object)
keys.push(property);     // 将每个属性压入到一个数组中
return keys;
},
values: function(object) {   // 一个静态方法, 传入一个对象, 返回该对象中所有属性所对应的值, 构成数组返回
var values = [];
for (var property in object)
values.push(object[property]);   // 将每个属性的值压入到一个数组中
return values;
},
clone: function(object) {    // 一个静态方法, 传入一个对象, 克隆一个新对象并返回
return Object.extend({}, object);
}
});

Field & Function Reference - 属性方法一览

Object ( 静态 ) - 扩展

Analysis & Usage - 分析与使用

Object.extend(destination, source)是Prototype实现的一个静态方法, 在JavaScript中模拟了继承。 事实上, 这个方法的语义更加倾向于：动态地为某个对象添加属性或方法。这个函数贯穿了整个Prototype的框架, 虽然核心思想是一致的, 但是在使用中还是能够看到一些不同之处, 这些不同之处很微小但是却值得一提。

1. 扩展现有对象的功能 - 为他们添加新的函数

Object.extend(Number.prototype, {
toColorPart: function() {
var digits = this.toString(16);
if (this < 16) return '0' + digits;
return digits;
},
......
});

这是非常典型的对Number类的扩展, 为Number.prototype加入了一些额外的函数, 从而每个Number对象的实例都拥有这些方法。

2. 定义并实现抽象类

var Enumerable = {
each: function(iterator) {
var index = 0;
try {
this._each(function(value) {
try {
iterator(value, index++);
} catch (e) {
if (e != $continue) throw e;
}
});
} catch (e) {
if (e != $break) throw e;
}
},
......
}
Object.extend(Array.prototype, Enumerable);
Object.extend(Array.prototype, {
_each: function(iterator) {
for (var i = 0; i < this.length; i++)
iterator(this[i]);
},
......
}

这是Prototype中的代码段, 它向我们展示了定义并实现抽象类的完整过程。这里首先定义了一个Enumerable类, 这是一个抽象类。这个抽象类的内部, 有一个_each方法被调用来完成一些逻辑。但是在整个Enumerable的范围内, 你无法找到_each方法的具体实现。也就是说, Enumerable是一个抽象类, 具有一个_each的抽象函数。 所以, 如果你还没有实现_each这个抽象函数, 你是无法直接使用Enumerable类的。之后的代码就比较明朗了, 使用Object.extend方法, 将所有Enumerable的函数复制给Array.prototype, 然后在Array.prototype中实现_each方法, 这样就使得Array对象具备了Enumerable这个抽象类的所有特性。

Class - 类创建

Class类实现了在JavaScript中声明一个新的类, 并通过构造函数实例化这个类的机制。通过使用Class.create()方法, 你实际上声明了一个新的类, 并定义了一个initialize()方法作为构造函数, 一旦你在这个声明的类的prototype中实现了改该方法, 你就可以使用new操作符来创建并实例化一个类。

Knowledge Prepare - 知识准备

在JavaScript中, 当你定义了一个新的函数, 你实际上声明了一个新的类, 而这个函数本身就相当于类的构造函数。 下面的代码向你展示了两种不同的方式来创建一个新的Person类, 而Person.prototype的定义也紧跟在函数定义之后。

var Person = function(name) {  // 一个匿名函数, 并将这个函数赋值给一个Person变量, 此时Person成为一个类
this.name = name;
}
function Person(name) {  // 直接定义一个叫做Person的函数表示Person类
this.name = name;
}
Person.prototype = {  // 定义Person的prototype域
printName: function() {   // 定义一个print函数
alert(this.name);
}
}

当你通过函数的方式声明了一个类之后, 你就可以通过new操作符来实例化这个类。这样, 你就可以调用类的成员函数来完成你的逻辑。

var person = new Person("Joe Smith"); // 使用new操作符来新建一个Person的实例, 并赋给变量person
person.printName(); // person就可以看作是一个实例的引用(reference), 所以可以通过这个引用来调用Person类中的成员函数

我们来总结一下创建一个新的类的实例的整个流程和步骤：

1. 通过定义一个函数的方式(匿名或者实名)来声明一个新的类.
2. 如果有必要, 定义这个新的类的prototype域.
3. 使用new操作符紧跟你所定义的函数来创建一个新的类的实例. 一旦JavaScript编译器碰到了new操作符, 它实际上创建了一个空的类实例变量.
4. 将所有这个类的prototype域中的属性与方法复制到这个新的实例中, 并将其成员函数中所有的this指针指向这个新创建的实例.
5. 接下来, 执行紧跟在new操作符后面的那个函数.
6. 当你执行这个函数时, 如果你试图对一个不存在的属性进行赋值, JavaScript编译器将自动为你在这个实例范围内新创建这个属性.
7. 函数执行完毕后, 将这个初始化完成的实例返回.

在Prototype中, 使用Class对象, 你可以以一个比较简单的方式来声明一个新的对象。通过使用Class.create(), prototype为你创建了一个默认的构造函数initialize(), 一旦你实现这一函数, 就可以以一个类似Java中构造函数的方式来创建一个新的类的实例。

Source View - 源码解析

var Class = {  // 全局静态类, 用于声明一个新的类并提供构造函数支持
create: function() {
return function() { // 返回一个函数, 代表着这个新声明的类的构造函数
// 一个命名为initialize的函数将被这个类实现作为类的构造函数
this.initialize.apply(this, arguments);// initialize函数将在你实例化一个变量的时候被调用执行(即上面7个步骤中的第5步)
}
}
}

Field & Function Reference - 属性方法一览

Class ( 静态 )

Analysis & Usage - 分析与使用

通过Class类, 你可以很容易地使用构造函数的方式创建一个新的类, 这对于Java程序员来说或许更加容易被接受。下面我们列出了Java和JavaScript各自声明和创建一个新的类的代码对比, 我们可以看到, 他们是如此相似：

var Person = Class.create(); // 类的声明              |public class Person { // 类的声明
Person.prototype = {                                 |    private String name;
initialize: function(name) {  // 构造函数          |    public Person(String name){ // 构造函数
this.name = name;                               |       this.name = name;
}                                                 |    }
printName: function() {  // 成员函数               |    public void printName(){  // 成员函数
alert(this.name);                               |       System.out.println(name);
}                                                 |    }
}                                                    |}
var person = new Person("Joe Smith");// 创建实例      |Person person = new Person("Joe Smith");// 创建实例
person.printName(); // 函数调用                       |person.printName(); // 函数调用

Basic - 基础代码

在开始所有的Prototype学习之旅之前，我们首先对Prototype中最常用的一些公用函数做一些研究，这些JavaScript函数将贯穿整个Prototype框架，熟练使用它们不仅有助于我们学习Prototype框架，同时也为我们自己编写JavaScript应用提供了独特的思路。

Source View - 源码解析

var Prototype = {     // 定义一个Prototype对象，封装了一些简单的静态函数和变量
Version: '1.5.0_rc1',     // 定义当前Prototype框架的版本号
ScriptFragment: '(?:
)((\n|\r|.)*?)(?:<\/script>)',   // 返回一个正则表达式，判断是否为Script块
emptyFunction: function() {},    // 返回一个空的函数, 该函数什么都不做, 在编写一些复杂流程中会使用此功能
K: function(x) {return x}     // 返回参数本身, 在编写一些复杂流程中会使用此功能
}
/*****************************************************************************************************************/
function $() {   // 一个根据id读取对象的快捷函数, 根据id返回所对应的对象
var results = [], element;
for (var i = 0; i < arguments.length; i++) { // 可以接受多个参数, 返回由每个id所对应的对象构成的数组
element = arguments[i];
if (typeof element == 'string')    // 可以接受非string参数，直接返回对象本身
element = document.getElementById(element);  // 通过DOM操作读取对象
results.push(Element.extend(element)); // 参见Element.extend的解析, 为返回的对象添加了一些额外特性，并压入到结果数组中
}
return results.reduce(); // 根据参数的个数返回对象或者对象数组
}
/*****************************************************************************************************************/
var Abstract = new Object();  // 定义了一个全局的对象, 可以理解为一个命名空间, 成为一个抽象基类
/*****************************************************************************************************************/
var Try = {
these: function() {  // 一个静态的函数, 接受多个函数作为参数, 依次执行并返回第一个成功执行的函数的结果
var returnValue;
for (var i = 0; i < arguments.length; i++) {
var lambda = arguments[i];   // 每个参数都是一个将被执行的函数
try {
returnValue = lambda();    // 执行函数并记录返回值
break;                     // 第一次成功执行后, 即退出
} catch (e) {}   // 捕获每个函数执行过程中的异常
}
return returnValue;
}
}
/*****************************************************************************************************************/
var PeriodicalExecuter = Class.create();  // 定义一个定时器, 重复执行某一函数
PeriodicalExecuter.prototype = {
initialize: function(callback, frequency) {  // 构造函数, 定义需要重复执行的函数和执行周期
this.callback = callback;      // 需要重复执行的函数
this.frequency = frequency;    // 重复执行的周期, 单位是秒
this.currentlyExecuting = false;   // 是否当前执行标志
this.registerCallback();    // 调用重复执行的函数
},
registerCallback: function() { // 调用window.setInterval函数完成重复执行, 返回一个标志留作被stop函数调用, 以停止定时器
// 第一个参数巧妙地使用了bind方法, 将this作为bind的参数, 这样onTimeEvent方法内部可以通过this获取当前对象的引用
this.timer = setInterval(this.onTimerEvent.bind(this), this.frequency * 1000);
},
stop: function() {
if (!this.timer) return;   // 通过setInterval函数的返回值来判断是否当前执行
clearInterval(this.timer);   // 当前执行时, 调用clearInterval方法来中止当前的执行
this.timer = null;    // 将当前执行的标志设置为null
},
onTimerEvent: function() {
if (!this.currentlyExecuting) {  // 判断是否当前执行, 否则跳过, 相当于一个同步信号量
try {
this.currentlyExecuting = true;  // 设置是否当前执行的标志
this.callback(this);   // 调用callback完成真正的函数执行
} finally {
this.currentlyExecuting = false;  // 无论是否成功执行, 最终设置当前执行标志为false
}
}
}
}

Field & Function Reference - 属性方法一览

Prototype ( 静态 )

$() ( 静态 )

Abstract ( 静态 )

Try ( 静态 )

PeriodicalExecuter ( 实例 )

Analysis & Usage - 分析与使用

Extension - 扩展

$()为我们提供了一个快捷的方式，通过id来读取一个对象，从而避免了我们在编写JavaScript代码时的重复而又冗长的代码段。然而，在某些情况下，我们需要通过对象的name属性来读取对象，并对对象进行一定的操作，此时，$()方法就显得有些力不从心了。因而在这里，我针对这种需求，并模仿$()方法，实现了一个通过name来读取对象的函数。

事实上，getElementsByName()已经帮我们解决了大多数的问题。由于name在HTML的document中可以不唯一，因而我们需要对此进行简单的处理，当name唯一时，直接返回单一对象；当name不唯一时，返回一个数组(这已经与getElementsByName()本身的含义不同了，当然这仅仅是为了方便编程而已)。

2.prototype.js 官方api文档
http://prototypejs.org/api/

3.开始学习prototype.js
http://www.prototypejs.org/learn

4.prototype.js sample
http://prototype-window.xilinus.com/samples.html

5.prototype.js讨论板
http://groups.google.com/group/Prototypejs/topics

6.precipitant的学习笔记，貌似看到一，并没有找到二？^_^
http://blog.csdn.net/precipitant/archive/2007/10/13/1823220.aspx

7.phphot写的prototype.js教程
http://blog.csdn.net/phphot/archive/2007/10/10/1818938.aspx

8.一个ajax的讨论论坛
http://bbs.okajax.com/forum-13-1.html

9.prototype.js开发应用手册
http://bbs.blueidea.com/thread-2812502-1-1.html

10.一个ajax框架介绍的网站
http://ajaxian.com/resources/

11.以下几个网站也是学习prototype.js的不错的网站,含有prototype.js中文教程
https://compdoc2cn.dev.java.net/prototype/html/prototype.js.cn.html
http://www.lvjiyong.com/item/jquery-with-prototype-using-ajax
http://591wap.cn/works/prototype/using_ajax_request.html

12.JAVA.NET上的prototype.js学习笔记
https://compdoc2cn.dev.java.net/prototype/html/prototype.js.cn.html

13.prototype.js源文件以及中英文手册下载,请移步这里
prototype.js教程及prototype中文手册

(十三).Prototype1.5 rc2（1.5 rc2)版指南最后一篇之Position

Position是prototype中定义的一个对象，提供了操作DOM中与位置相关的方法，要很好的理解元素在页面中的位置，可以参考这篇文章：Relatively Absolute

具体代码如下，按照代码说说，其中英文是作者的注释，中文红色的才是偶的说明或翻译英文的注释，采用顶式注释法(注释在要说明的代码的上面)说明

  // set to true if needed, warning: firefox performance problems
  // NOT neeeded for page scrolling, only if draggable contained in
  // scrollable elements
  //只有在使用拖动的时候元素包含在有滚动条的元素中才需要设置为true
  includeScrollOffsets: false,

  // must be called before calling withinIncludingScrolloffset, every time the
  // page is scrolled
  //当页面被scrolled后，使用withinIncludingScrolloffset的时候需要先调用这个方法
  prepare: function() {
    //横向滚动条滚动的距离
    this.deltaX =  window.pageXOffset
                || document.documentElement.scrollLeft
                || document.body.scrollLeft
                || 0;
    //纵向滚动条滚动的距离
    this.deltaY =  window.pageYOffset
                || document.documentElement.scrollTop
                || document.body.scrollTop
                || 0;
  },

//元素由于滚动条偏移的总距离 
realOffset: function(element) {
    var valueT = 0, valueL = 0;
    do {
      valueT += element.scrollTop  || 0;
      valueL += element.scrollLeft || 0;
      element = element.parentNode;
    } while (element);
    return [valueL, valueT];
  },

//元素在页面中由offsetParent累积的offset，当offsetParent都没有滚动条时，就是元素在页面中的位置
cumulativeOffset: function(element) {
    var valueT = 0, valueL = 0;
    do {
      valueT += element.offsetTop  || 0;
      valueL += element.offsetLeft || 0;
      element = element.offsetParent;
    } while (element);
    return [valueL, valueT];
  },

//元素相对于containing block("nearest positioned ancestor")的位置，也就是相对于最近的一个position设置为relative或者absolute的祖先节点的位置，如果没有就是相对于 body的位置，跟style.top，style.left一样？
positionedOffset: function(element) {
    var valueT = 0, valueL = 0;
    do {
      valueT += element.offsetTop  || 0;
      valueL += element.offsetLeft || 0;
      element = element.offsetParent;
      if (element) {
        if(element.tagName==’BODY’) break;
        var p = Element.getStyle(element, 'position’);
        if (p == 'relative’ || p == 'absolute’) break;
      }
    } while (element);
    return [valueL, valueT];
  },
  
  //offsetParent
  offsetParent: function(element) {
    if (element.offsetParent) return element.offsetParent;
    if (element == document.body) return element;

    while ((element = element.parentNode) && element != document.body)
      if (Element.getStyle(element, 'position’) != ’static’)
        return element;

    return document.body;
  },
 
  // caches x/y coordinate pair to use with overlap
  //判断指定的位置是否在元素内
  within: function(element, x, y) {
    if (this.includeScrollOffsets)
      return this.withinIncludingScrolloffsets(element, x, y);
    this.xcomp = x;
    this.ycomp = y;
    this.offset = this.cumulativeOffset(element);

    return (y >= this.offset[1] &&
            y <  this.offset[1] + element.offsetHeight &&
            x >= this.offset[0] &&
            x <  this.offset[0] + element.offsetWidth);
  },

//跟within差不多，不过考虑到滚动条，也许是在元素上面，但不是直接在上面，因为滚动条也许已经使元素不可见了 
withinIncludingScrolloffsets: function(element, x, y) {
    var offsetcache = this.realOffset(element);

    this.xcomp = x + offsetcache[0] - this.deltaX;
    this.ycomp = y + offsetcache[1] - this.deltaY;
    this.offset = this.cumulativeOffset(element);

    return (this.ycomp >= this.offset[1] &&
            this.ycomp <  this.offset[1] + element.offsetHeight &&
            this.xcomp >= this.offset[0] &&
            this.xcomp <  this.offset[0] + element.offsetWidth);
  },

  // within must be called directly before
  //在调用这个方法前，必须先调用within，返回在with指定的位置在水平或者垂直方向上占用的百分比
  overlap: function(mode, element) { 
    if (!mode) return 0; 
    if (mode == 'vertical’)
      return ((this.offset[1] + element.offsetHeight) - this.ycomp) /
        element.offsetHeight;
    if (mode == 'horizontal’)
      return ((this.offset[0] + element.offsetWidth) - this.xcomp) /
        element.offsetWidth;
  },

//返回元素相对页面的真实位置 
page: function(forElement) {
    var valueT = 0, valueL = 0;

    var element = forElement;
    do {
      valueT += element.offsetTop  || 0;
      valueL += element.offsetLeft || 0;

      // Safari fix
      if (element.offsetParent==document.body)
        if (Element.getStyle(element,’position’)==’absolute’) break;

    } while (element = element.offsetParent);

    element = forElement;
    do {
      if (!window.opera || element.tagName==’BODY’) {
        valueT -= element.scrollTop  || 0;
        valueL -= element.scrollLeft || 0;
      }
    } while (element = element.parentNode);

    return [valueL, valueT];
  },

//设置target为source的位置，大小 
clone: function(source, target) {
    var options = Object.extend({
      setLeft:    true,
      setTop:     true,
      setWidth:   true,
      setHeight:  true,
      offsetTop:  0,
      offsetLeft: 0
    }, arguments[2] || {})

    // find page position of source
    source = $(source);
    var p = Position.page(source);

    // find coordinate system to use
    target = $(target);
    var delta = [0, 0];
    var parent = null;
    // delta [0,0] will do fine with position: fixed elements,
    // position:absolute needs offsetParent deltas
    if (Element.getStyle(target,’position’) == 'absolute’) {
      parent = Position.offsetParent(target);
      delta = Position.page(parent);
    }

    // correct by body offsets (fixes Safari)
    if (parent == document.body) {
      delta[0] -= document.body.offsetLeft;
      delta[1] -= document.body.offsetTop;
    }

    // set position
    if(options.setLeft)   target.style.left  = (p[0] - delta[0] + options.offsetLeft) + 'px’;
    if(options.setTop)    target.style.top   = (p[1] - delta[1] + options.offsetTop) + 'px’;
    if(options.setWidth)  target.style.width = source.offsetWidth + 'px’;
    if(options.setHeight) target.style.height = source.offsetHeight + 'px’;
  },

//将element的position设置为absolute的模式 
absolutize: function(element) {
    element = $(element);
    if (element.style.position == 'absolute’) return;
    Position.prepare();

    var offsets = Position.positionedOffset(element);
    var top     = offsets[1];
    var left    = offsets[0];
    var width   = element.clientWidth;
    var height  = element.clientHeight;

    element._originalLeft   = left - parseFloat(element.style.left  || 0);
    element._originalTop    = top  - parseFloat(element.style.top || 0);
    element._originalWidth  = element.style.width;
    element._originalHeight = element.style.height;

    element.style.position = 'absolute’;
    element.style.top    = top + 'px’;;
    element.style.left   = left + 'px’;;
    element.style.width  = width + 'px’;;
    element.style.height = height + 'px’;;
  },

//将element的position设置为absolute的模式 
relativize: function(element) {
    element = $(element);
    if (element.style.position == 'relative’) return;
    Position.prepare();

    element.style.position = 'relative’;
    var top  = parseFloat(element.style.top  || 0) - (element._originalTop || 0);
    var left = parseFloat(element.style.left || 0) - (element._originalLeft || 0);

    element.style.top    = top + 'px’;
    element.style.left   = left + 'px’;
    element.style.height = element._originalHeight;
    element.style.width  = element._originalWidth;
  }
}

// Safari returns margins on body which is incorrect if the child is absolutely
// positioned.  For performance reasons, redefine Position.cumulativeOffset for
// KHTML/WebKit only.
if (/Konqueror|Safari|KHTML/.test(navigator.userAgent)) {
  Position.cumulativeOffset = function(element) {
    var valueT = 0, valueL = 0;
    do {
      valueT += element.offsetTop  || 0;
      valueL += element.offsetLeft || 0;
      if (element.offsetParent == document.body)
        if (Element.getStyle(element, 'position’) == 'absolute’) break;
       
      element = element.offsetParent;
    } while (element);
   
    return [valueL, valueT];
  }
}

终于把Prototype的所有部分都写完了，哈哈，越来越佩服自己的耐力了

下一步决定写写Scriptaculous这个超级流行的效果库

Prototype1.5的下载为什么不简单点

这几天在论坛和博客上看到很多人问Prototype1.5怎么下载，为什么下载这么困难呢？
Prototype的官方网站是：http://prototype.conio.net/，如果你一下子找不到，到google上搜索Prototype就找到了
下载当然要到官方网站下载了，但是问题是Prototype官方网站更新太慢，首页上的下载连接还是prototype1.4的，而且只是一个单独的js文件
那么怎么下载最新版本的呢？
1，如果你只想得到一个单独的js文件使用的话，其实官方网站提供了最新版1.5的下载, 下面连接就是下载地址了http://dev.rubyonrails.org/browser/trunk/railties/html/javascripts/prototype.js?format=raw
2，如果你想得到详细的源文件以及测试代码，需要通过svn下载：使用下面的命令就可以了：svn co http://dev.rubyonrails.org/svn/rails/spinoffs/prototype
如果你没有svn的话，我已经下载打包了传到51js论坛中，查看下面连接的帖子中有下载的：http://bbs.51js.com/viewthread.php?tid=65070&highlight=prototype

想必很多prototype爱好者都一直在等待着prototype1.5的发布，虽然等待的时间很长，但是这一令人激动的一天终于到来了
因为网友提醒，今天访问prototype网站，发现原来的网址已经自动跳转到新的网站去了，作者使用了一个独立的域名http://www.prototypejs.org/
刚才在google里搜索prototype，发现搜索结果中出现的已经是新网站了，google爬虫也蛮勤快的嘛
更让人高兴的是，一向被人诟病的文档问题这一版有了非常大的提高，可以说是有了质的飞跃，以前的版本基本上没有文档，要使用只有自己理解了，
现在在它的官方网站上有专门的API参考以及一些使用的例子，看来作者真正的关于这个问题来了，prototype爱好者应该高兴一把了哈哈，赶快到prototype官方网站下载了Engoy吧如果感觉阅读英文是一种折磨的话，可以参考我以前写的prototype 1.5使用指南系列文章.

－－声明：该使用指南文章为转载，由于是来源于多次转载，未找到原出处。再次感谢作者与翻译人员。

(十一).Prototype（1.5 rc2)使用指南之form

这一部分提供了很多与表单操作有关的功能，包括以下部分，当通过$方法返回元素时，可以直接通过$(element).method()调用：

Form对象：提供了操作整个表单的一些方法
Form.Element对象：提供了操作某个表单元素的方法
TimedObserver类：周期性表单监视器，当表单元素值改变的时候执行一个回调函数，有Form和Element两种类型
EventObserver类：利用事件来监视表单元素，当表单元素值改变的时候执行一个回调函数，有Form和Element两种类型

Form对象：

reset(form)：form.reset()
serializeElements(elements)：将elements中的元素序列化，就是返回指定的所有元素的queryString的形式，便于在xmlhttp或其他地方使用
serialize(form)：序列化整个表单
getElements(form)：返回表单的所有可序列化元素
getInputs(form, typeName, name)：返回所有符合typeName和name的input元素
disable(form)：使整个表单处于不可用状态
enable(form) ：是整个表单可用
findFirstElement(form)：返回类型为'input’, ’select’, 'textarea’的第一个可用的非隐藏元素
focusFirstElement(form)：使findFirstElement(form)返回的元素得到焦点

Form.Element对象：

focus(element) select(element)：html元素内置方法的封装，除了返回元素本身
serialize(element)：序列化指定的表单元素，返回key=value的形式，返回的string已经encodeURIComponent了
getValue(element)：返回元素的值
clear(element)：清除元素的值
present(element)：判断元素的值是否非空
activate(element)：使元素获得焦点
disable(element)：使元素不可用
enable(element)：是元素可用

$F = Form.Element.getValue 方便使用

Form.Element.Observer以及Form.Observer类：

周期性监视表单元素，如果表单或表单元素的值有改变时，执行执行一个回调函数，使用方式如下：

var oser=new Form.Element.Observer(element, frequency, callback)
or oser=new Form.Observer(form, frequency, callback)
callback可以定义两个参数 form/element、Form.serialize()/value

Form.Element.EventObserver和Form.EventObserver类：

这两个类跟上面的差不多，只是不是周期性的监视，而是利用元素的change或click事件来监视表单元素的变化，当发生变化时执行callback，参数跟上面一样

(十二).Prototype（1.5 rc2)使用指南之event.js

在介绍Prototype中Event对象前先介绍一下浏览器中的事件模型，浏览器中的事件主要有HTML事件、鼠标事件和键盘事件，前两种事件比较好理解，这里主要解释一下键盘事件以及它在IE和firefox中的区别

键盘事件包括keydown、kepress和keyup三种，每次敲击键盘都会(依次？)触发这三种事件，其中keydown和keyup是比较低级的接近于硬件的事件，通俗的理解是这两个事件可以捕获到你敲击了键盘中某个键；而keypress是相对于字符层面的较为高级点的事件，这个事件能够捕捉到你键入了哪个字符。可以这样理解，如果你敲击了A键，keydown和keyup事件只是知道你敲击了A键，它并不知道你敲的是大写的A(你同时按下了Shift键)还是敲的是小写a，它是以"键"为单位，你敲入了大写的A，它只是当成你敲下了shift和A两个键而已，但是keypress可以捕捉到你是敲入的大写的A还是小写的a

还要理解一个概念是键盘中的键分为字符(可打印)键和功能键(不可打印)，功能键包括Backspace, Enter, Escape, the arrow keys, Page Up, Page Down, and F1 through F12 等

下面说一下键盘事件的具体使用方法，

键盘事件的event对象中包含一个keyCode属性，IE中只有这一个属性，当为keydown和keyup 事件是，keycode属性表示你具体按下的键(也称为virtual keycode)，当捕捉的是keypress事件时keyCode属性指的是你键入的字符(character code)

在firefox中情况有些不同，event对象包含一个keyCode属性和一个charCode属性，keydown和keyup事件的时候，keyCode表示的就是你具体按的键，charCode为0；当捕捉的是keypress事件时，keyCode为0，charCode指的是你按下的字符

当捕捉的是keypress事件时，当你按的是可打印字符时，keyCode为0，charCode指的是你按下的字符的键值，当你按的是不可打印字符时，keyCode为按下的键的键值，charCode为0

注意：功能键不会触发keypress事件，因为keypress对应的就是可打印的字符，但是有一点IE和FF 中的区别，你按下一个字符键的同时按下alt键，在IE中不触发keypress事件，但是在ff中可触发，我发现在IE中按下ctrl键的时候只有按下 q键会触发事件其他的要么不会触发事件，要么被浏览器IE自身捕获了，例如你按下ctrl_A，全选某个东西，你按ctrl_S保存文件，但是在FF中就好多了，事件都是先传递到网页，再向外传递

鉴于IE和FF中的区别，如果你比较懒的话，建议只使用keydow和keyup事件，这两种事件的使用在IE和FF中基本上没有区别，也不要捕获ctrl_A等被浏览器定义为快捷键的事件

键盘事件event对象还有三个其他的属性altKey, ctrlKey, and shiftKey 来判断你按下一个键的时候是否按下了alt等键，这三个属性使用比较简单，三种事件都可以使用，也不存在ie和ff的兼容性问题

在Prototype中的Event中又如下属性：

  KEY_BACKSPACE: 8,
  KEY_TAB:       9,
  KEY_RETURN:   13,
  KEY_ESC:      27,
  KEY_LEFT:     37,
  KEY_UP:       38,
  KEY_RIGHT:    39,
  KEY_DOWN:     40,
  KEY_DELETE:   46,
  KEY_HOME:     36,
  KEY_END:      35,
  KEY_PAGEUP:   33,
  KEY_PAGEDOWN: 34,

以及下面的方法：

element(event) ：返回触发事件的元素
isLeftClick(event) ：判断是否按下的左键
pointerX(event) ：事件触发时鼠标的横坐标，对于非鼠标事件，在ff中没有此信息，但在ie中有？
pointerY(event)：事件触发时鼠标所在位置的纵坐标
stop(event)：阻止事件向上传播和浏览器的默认处理方法
findElement(event, tagName) ：找到触发事件的元素的所有祖先元素中的tagName为tagName的一个元素
observe(element, name, observer, useCapture)：注册事件处理函数
stopObserving(element, name, observer, useCapture)：撤销注册的事件

(九).Prototype（1.5 rc2)使用指南之dom.js

这部分提供了很多(写的都有点烦了)方便的操作dom的方法：包含有名的$方法、document.getElementsByClassName方法，以及Element对象、Insertion对象

以下部分一个一个的详细介绍：

$(element)：getElementById的封装，element可以是一个元素的id或元素本身，也可以是一个数组，这时返回一个数组，使用$方法，会自动调用Element.extend(element)方法，这样的话使元素可以直接调用 Element中的方法, 例如Element.hide(element)可以写成这样$(element).hide()

document.getElementsByClassName(className, parentElement): 根据class选择元素

Element.extend(element): 扩展element，使element可以直接调用Element、Form.Element或Form中定义的方法

Element对象的方法：

visible: function(element)：判断element是否可见, 参数element可以是元素本身或元素id(下面的方面的参数基本上都是这样的)

toggle: function(element)：反转element的可见性

hide: function(element)：隐藏元素

show: function(element)：显示元素

remove: function(element)：移除元素

update: function(element, html) ：使用html更新element的内容，html中的script会执行(下同)

replace: function(element, html)：将element替换为html

inspect: function(element)：element的字符串表示

recursivelyCollect: function(element, property): 递归收集, 例如Element.recursivelyCollect(element, "parentNode")返回element所有的祖先节点, 注意只返回nodeType == 1的元素，也就是不返回文本元素

ancestors: function(element): 等同于上面的例子，返回元素的所有祖先节点

descendants: function(element): 返回所有子孙节点

immediateDescendants: function(element)：返回元素的直接的子孙节点(子节点)的数组

previousSiblings: function(element)：返回元素前面的兄弟节点

nextSiblings: function(element)：返回位于元素后面的兄弟节点

siblings: function(element)：返回元素所有的兄弟节点

match: function(element, selector)：使用Selector的match方法匹配元素(Selector将在后面介绍), selector参数是一个css selector表达式或者Prototype中的一个Selector实例，如果element匹配selector则返回true，否则返回 false，例如对于一个className为logcss的div来说，下面的表达式返回true, $(element).match("div.logcss") 待续。。

up(element, expression, index)：利用Selector.findElement方法找到element元素的祖先节点中符合表达式expression的所有元素组成的数组索引为index的元素，也可以忽略expression(默认为*，表示匹配所有元素)和index(默认为0)，直接这样调用up(element, index)或up(element)

down(element, expression, index)：跟up一样，只是返回的是子孙节点

previous(element, expression, index)：返回前面的兄弟节点

next(element, expression, index)：返回后面的兄弟节点

getElementsBySelector(element,args)：Selector.findChildElements(element, args)的封装，args表示可以传递多个参数，每个参数是一个css selector表达式，返回element的子孙节点中符合任何一个css selector表达式的元素组成的数组

getElementsByClassName(element, className)：返回element中的子孙节点中符合clsssName的元素

readAttribute(element, name)：return $(element).getAttribute(name)，之所以添加这个方法是因为在IE和Safari(Mac)中getAttribute不是一个真正的函数，它没有call、apply等方法，所以在很多时候调用会出现错误(Prototype中很多地方使用了函数的这两个方法)，例如下面的例子(官方文档中的一个例子)，就只能使用readAttribute：

<div id="widgets">

 <div class="widget" widget_id="7">…</div>

 <div class="widget" widget_id="8">…</div>

 <div class="widget" widget_id="9">…</div>

</div>

$$(’div.widget’).invoke(’readAttribute’, 'widget_id’)

// ["7", "8", "9"]

getHeight: function(element)：返回元素高度，return element.offsetHeight

classNames: function(element)：返回一个Element.ClassNames对象，改对象提供对元素class的操作，包括add、remove、set等，一般很少使用，使用Element.addClassName等方法就可以了(就在下面)

hasClassName: function(element, className) ：判断element是否含有className

addClassName: function(element, className) ：给element添加一个class

removeClassName: function(element, className) ：移除元素中的一个class

observe()：调用Event对象(Prototype中的，将在后面介绍)的observe方法为元素注册事件handle

stopObserving() ：移除注册的事件handle

cleanWhitespace: function(element)：移除元素中空白的文本子节点

empty: function(element)：判断元素是否为空

childOf: function(element, ancestor) ：判断element是否为ancestor的子孙节点

scrollTo: function(element) ：滚动条移动到元素所在的地方

getStyle: function(element, style) ：得到元素某个css样式的值，例如$(element).getStyle("float")

setStyle: function(element, style) ：设置元素的css样式，style十一个对象，例如element.setStyle({left: "40px", "background-color":"#666"})

getDimensions: function(element) ：得到元素的尺寸，即使元素是隐藏的也可以正确的返回，返回 return {width: originalWidth, height: originalHeight}这样的关联数组

makePositioned: function(element) ：当元素的position css属性为static或不存在使，将次属性更改为relative

undoPositioned: function(element) ：跟makePositioned相反的操作

makeClipping: function(element) ：把元素变成clipping(切片)，也就是设置元素的overflow属性为hidden

undoClipping: function(element)：反转上面的方法对元素所做的修改

hasAttribute(element)：判断元素是否有某个属性

Element对象的方法是不是不少啊，哈哈，下面介绍有关Insertion的四个类

Insertion.Before：将内容插入到元素的前面，内容在元素外面

Insertion.Top：将内容插入到元素的顶部，内容在元素里面

Insertion.Bottom：将内容插入到元素的底部，内容在元素里面

Insertion.After：将内容插入到元素后面，内容在元素外面

使用它们的方法比较简单：new Insertion.where(element, content)，其中where表示上面的Before、Top等，content是html字符串，注意其中javascript片断会执行

终于写完了，Prototype的Element方法还真不少

虽然以前觉得自己对Prototype还比较熟悉，写的也有点累，但是发现自己收获仍然挺大的，为了写出这些方法的具体作用和用法，必须强迫自己一行行的把Prototype的代码弄清楚，使自己对Prototype中很多精巧的写法有了更深刻的认识和理解

写这个教程的主要目的是为了给大家一个快速的参考，大家还是对照着源代码看才会真正有所提高

这时我第一次写比较完整的一个教程，错误幼稚的地方在所难免，希望大家批评指正，互相学习提高，

(十).Prototype使用指南之Selector

Selector是利用css selector来匹配选择页面元素的，所以要理解Selector首先应该对css selector有所理解，下面是css2 selector的语法，当然很多浏览器只是支持其中的一部分，Prototype 中的Selector主要支持tag选择器、class选择器和id选择器，还有属性(attribute)选择器，基本上包含我们平时所用的所有类型

The following table summarizes CSS2 selector syntax, 详细的可以看http://www.w3.org/TR/REC-CSS2/selector.html:

Selector中包含Selector对象和类，

Selector对象具有下面两个方法：

match(element)：元素是否与本selector匹配，在Element中已经介绍了
findElements(parentNode)：parentNode中所有匹配本selector的子孙元素列表

使用方法也很简单 var s=new Selector(expression); s.match(element); s.findElements($(element))，其中expression可以是如下方式 "div"、"#id"、".class"、"div#id"、"div[attribute]"、"div[attribute=fff]"、"div[attribute!=sdf]"

其中Selector也有几个静态方法，它们分别是：

matchElements(elements, expression)：返回elements中符合expression的元素列表
findElement(elements, expression, index)：返回elements中符合expression的元素列表中索引为index的元素
findChildElements(element, expressions)：找出element的子孙元素中符合expressions的元素列表，其中expressions是一个expression数组，其中的expression支持"div li.#id"形式

$$方法：只是简单的调用return Selector.findChildElements(document, $A(arguments))

虽然Selector有这么多方法，但是大部分都是内部调用的，我们一般都很少使用，因为我们有个一个方便的方法$$，对于绝大部分情况已经足够了

在写这个指南之前，先介绍一下Prototype主要是干吗的，如果你比较关注ajax/javascipt方面的应用，你应该早就听说过这个 javascript framework。 Prototype是一个基础的javascript应用框架，先引用一段官方网站的介绍

Prototype is a JavaScript framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

根据作者自己的介绍，Prototype的目的是为了更方便的开发javascript的应用，使用它可以更加方便简单的使用javascript编程，开发出面向对象的javascript程序，Prototype中包含包含了一个功能强大好用的ajax框架，Prototype是一个基础性的框架，很多更高层次的框架都以它为基础，例如scriptaculous效果库

Prototype中包含一下几个部分：

base: Prototype中应用的基本功能，基本上其他所有部分都依赖于它，包括用于面向对象风格的Class.create和Object.extend，一个Try对象，函数绑定，number扩展，PeriodicalExecuter(周期性执行某个函数的功能)等

string: 对String原型的扩展，为string添加了strip,escapeHTML等等好用的方法

enumerable: 枚举类型(array, hash, range等)的父类对象，提供枚举类型的共同方法

array: 对Array原型的扩展，为array添加了indexOf、without等方法

hash: 为javascript提供了一个好用简单的Hash实现

range: 继承于enumerable，一个范围(例如3—67)对象

ajax: 一个功能强大好用的ajax框架

dom: 对基于浏览器的开发提供了很好的跨浏览器封装，并添加很多强大的功能

selector: 提供了使用class，css等选择元素的功能

form: 关于表单的一些功能

event: 简单的夸平台事件封装

position: 提供了一些关于元素位置方面的功能

可以说Prototype就想一把瑞士军刀，为javascipt封装了很多通用的功能，大大简化了javascript应用的开发，给javascript开发人员增添了很大的信心，Prototype可以运行于以下平台，使用它再也不用各种跨平台等问题烦恼了

* Microsoft Internet Explorer for Windows, version 6.0 and higher

* Mozilla Firefox 1.0/Mozilla 1.7 and higher

* Apple Safari 1.2 and higher

不过要注意的是：要想很好的理解Prototype，应该首先理解一下javascript面向对象开发的一些知识以后的文章将对Prototype中具体的每个功能中的方法做一个详细的介绍，包括作用，实例等Prototype官方网站是：http://prototype.conio.net/ ，目前发布版还只是1.4, 但是现在的1.5已经发生了很大的变化，而且很多基于prototype的库使用的都是1.5的，所以强烈建议通过svn下载最新版代码

(二).Prototype（1.5 rc2)使用指南之base.js

base.js中包含下面的内容

类的创建与继承：

Class.create(): 创建一个类，例如 person=Class.create()

Object.extend(destination, source): 把source中方法属性copy到destination(使用for property in source)，需要注意的是，javascript中除了基本类型(Number, Boolean)外都是引用类型，所以这种copy一般只是copy引用而已，destination和source还是指向同一个方法或对象属性 (function array object)

在面向对象的编程中，一般通过Class.create新建一个类，如果这个类继承于另一个类，一般使用Object.extend (class.prototype, parentClass.prototype)或者Object.extend(class.prototype, aparentClassInstance)

Object构造函数的扩展：

Object是其他对象实例的构造函数(var a=new Object())，也是所有其他类的父类，对Object直接扩展(注意不是扩展Object.prototype，扩展 Object.prototype相当于添加实例方法)相当于为Object类添加静态方法

Object.inspect(object): 调用object的inspect(如果定义了)或toString方法，返回一个对象的字符串表示

Object.keys(object): 返回一个对象的所有属性和方法名称组成的数组, 例如Object.keys(document.body)

Object.values(object):返回一个对象的所有属性和方法的值组成的数组, 例如Object.values(docuement)

Object.clone(object): 返回一个对象的clone版本，其实是执行Object.extent方法把object中的方法属性copy到一个新对象中，然后返回这个对象

函数邦定：

定义了Function对象的两个方法，bind和bindAsEventListener，这两个方法是一个函数的两个方法，对于java、c#程序员来说，看到这个也许感到很惊讶，因为在他们看来函数只是一个程序语句组织结构而已—>怎么还有方法，而且还可以扩展？这也是javascript等脚本语言相对于java等一个非常强大的功能，函数也是一个对象，函数名就是这个对象的名称，只要你愿意，你也可以使用 new Function(…)来定义函数，所以为函数定义方法也就很正常不过了

这两个函数的主要作用是为了解决使用javascript面向对象风格编程中this的引用问题，在javasctipt中this关键字始终指向调用该函数的对象或者指向使用call，apply方法指定的对象（具体这方面的知识可以自己google一下，以下系列对prototype的介绍也假设读者对javascript语言比较熟悉了，如果不熟悉可以找本javascript权威指南这本书看看）要理解这个问题首先要理解始终指向这个问题，就是this这个关键字比较特殊，不能把他当成一般的变量名看待，最常见的一个错误就是在返回函数的调用中使用this，例如return function(){this.aMethod()}, 当你下次调用这个返回的匿名方法时，这个this引用的内容又指向了调用这个函数的对象了，记住的一点的this是个关键字，不是变量名，不会产生闭包

对Number的扩展(注意num也可以看成对象，其实是在使用的时候系统自动打包成Number对象)：

toColorPart：把数字转换为可以用于表示color的16进制值：例如 7.toColorPart()=>"07"，28.toColorPart()=>"1C"

succ: 返回num++, 但不改变num本身的值，其实就是 return this＋1

times：对从0到这个数字轮流调用一个函数, 例如function a(n){docuement.write(n)}, 10.times(a), 将显示012345678910, 注意函数也是一个对象，而且与其他对象并没有实质的区别

Try对象： Try对象提供了一个很有趣的功能, 先看一下如下的代码：

var Ajax = { 

getTransport: function() {   

   return Try.these(     

              function() {return new XMLHttpRequest()},    

              function() {return new ActiveXObject(’Msxml2.XMLHTTP’)},     

             function() {return new ActiveXObject(’Microsoft.XMLHTTP’)}   )

     || false;

   }

｝

Try对象提供了一个方法these, 这个方法接受一个函数类型的参数列表，然后轮流执行这些函数，当其中一个函数没有产生错误时，就停止执行，并且返回这个函数返回的值，自己慢慢体会吧

PeriodicalExecuter(周期性执行器)对象

这个对象是对setInterval方法的简单封装，使用方法如下

var a=new PeriodicalExecuter(callback, frequency ) ，其中callback指要执行的函数名 frequency指每次执行的时间间隔

要停止的话，调用这个对象的stop方法就可以了 a.stop() 

(三)Prototype（1.5 rc2)使用指南之string.js

下面介绍Prototype对String对象的扩展部分：

这部分主要为string对象添加了几个很有用的方法:

strip(): 去掉字符串两边的空白, 例如" jj ".strip()返回"jj"

stripTags()：去掉字符串中的html标签

stripScripts(): 去掉字符串中的javascript代码段

extractScripts(): 返回字符串中的javascript代码，返回数组

evalScripts(): 执行字符串中的javascript代码

escapeHTML()：将字符串中的html代码转换为可以直接显示的格式, 例如将< 转化为 &lt; ，在ie6中有bug，执行这个操作返回的字符串，将多个连在一起的空白变成了一个，所以很多换行什么的都被去掉了

unescapeHTML(): escapeHTML的反向过程

truncate(length, truncation): 截断，例如"abcdefghigkl".truncate(10)返回abcdefg…, truncation默认为"…" toQueryParams(separator)/parseQuery(separator)：将一个querystring转化为一个hash表（其实是一个对象，在javascript中对象可以当成hash表来用，因为对象的属性或方法可以通过object[propertyName]来访问）

toArray(): return this.split('’), 转化为一个字符数组

camelize(): 将background-color的形式转化为backgroundColor形式，用在style/css中

capitalize(): 返回一个首字母大写的字符串

inspect(useDoubleQuotes): 返回字符串的表示形式, 例如"sdfj""sfa".inspect() 返回“’sdfj"sfa’”

gsub(pattern, replacement)：pattern是一个正则表达式，replacement是一个函数(或者是一个template字符串)，对于字符串中每个匹配pattern的部分使用replacement处理，然后将 replacement返回的值将原来匹配的部分替换掉，例如"skdjfAsfdjkAdk".gsub(/A/,function(match) {return match[0].toLowerCase()}), 将字符串所有的A转化为a, 注意pattern中不要添加g选项，因为gsub会递归的执行match方法

sub(pattern, replacement, count) ：gsub的另一种形式，不过可以设置执行的次数

scan(pattern, iterator): 跟gsub差不多，但是返回的是字符串本身，也就是说对于pattern中的每个匹配执行iterator，但是不返回替换的字符串"skdjfAsfdjkAdk".gsub(/A/,function(){alert have a A’})

underscore(): 'borderBottomWidth’.underscore() -> 'border_bottom_width’

dasherize(): 'Hello_World’.dasherize() -> 'Hello-World’

Template模板类：

使用方法：

var template = new Template(replacement, pattern);               

template.evaluate(object) 有点像php中的模板，默认(没有提供pattern)将{propertyName}形式的东西替换了object的属性值

(四).Prototype（1.5 rc2)使用指南之Enumerable.js

Enumerable是一个抽象对象（需要说明的是，javascript中并没有类的概念，所指的类也就是一个函数，继承一般指的是一个对象(父)将它的方法属性copy(通过Object.extend, copy的是引用)到子类(函数)的prototype属性(一个对象)中）

Enumerable不能直接使用，它被很多枚举类型（Hash、Array、Range等）所继承，继承的类型都要实现一个_each方法，提供具体类型的枚举方法

Enumerable为其他子类提供了如下的方法：

each(iterator): iterator是一个函数对象, 这个方法调用具体类型的_each方法对自身包含的每个对象调用iterator，例如如果Enumerable具体指的是一个Array，eg: var a=[2,3,4], 则a.each(iterator)方法将依次调用iterator(2,0) ,iterator(3,1), iterator(4,3)，其中第二个参数指的是索引。这个方法几乎在Enumerable中的每个方法中都要用到

eachSlice(number, iterator)：将Enumerable 类型对象每个每个按照number分开，例如[1,2,3,4,5].eachSlice(3)=>[[1,2,3],[4,5]], 没有提供iterator, 则iterator=Prototype.K: function(k){return k}，Prototype中的很多iterator默认值都是这个，或者是Prototype.emptyFunction: function() {},其实实际上返回的是[iterator([1,2,3]),iterator([4,5])]

all(iterator): 对Enumerable类型中的每个值调用iterator，如果其中有一个返回false，则返回false，否则返回true，相当于判断是否每个值执行iterator都是"true"

any(iterator): 跟all相反，判断是否每个值都是"false"（是否有一个值是true）

collect(iterator)/map: 对每个值调用iterator，将结果组成一个新的数组返回

detect(iterator)/find: 对每个值调用iterator，如果有一个不为false，则返回这个执行iterator后不为false的值(不是返回执行iterator后的值)，相当于找出第一个真值

findAll(iterator)/select: 相当于detect, 但是找出所有的真值，返回一个数组

grep(pattern, iterator)：返回所以符合pattern的值，iterator提供的话，则返回执行iterator的值

include(object)/member: 数组中是否包含object

inGroupsOf(number, fillWith): eachSlice的变异版本，按照number将对象分开，如果分开后的数组的最后一个值的length小于number, 则用fillwith填充, 例如[1,2,3,4,5].inGroupsOf(3)=>[[1,2,3],[4,5,null]]

inject(memo, iterator): 注入

invoke(method): 调用

max(iterator): 最大值

min(iterator): 最小值

partition(iterator): 分离

pluck(property): 采集

reject(iterator): 不合格的产品, 于findAll相反

sortBy(iterator): 根据iterator排序，如果调用的对象是Array的话，直接调用内置的sort(iterator)就行了

toArray()/entries: 将调用对象的每个值组成一个数组返回

zip(): 例如[2,3,4].zip([5,6,7])=>[[2,5],[3,6],[4,7]], 如果最后一个参数类型为function，将返回[iterator([2,5]),iterator([3,6]),iterator([4,7])],

inspect(): Enumerable对象的字符串表示

(五).Prototype（1.5 rc2)使用指南之array.js

$A = Array.from(iterable): 将iterable转化为数组，如果iterable定义了toArray方法，就调用这个方法，否则利用iterable的length属性进行枚举, 如果iterable没有length属性的话就返回空数组[]

Array对象除了扩展Enumerable对象的方法外，另外扩展了如下的几个方法，

注意以下方法除了clear外都不改变原来数组，而是返回一个新数组：

clear(): 清除数组，利用arr.length=0

first(): 返回第一个元素

last()：返回最后一个元素

compact(): 去除数组中值为null或undefined的元素

flatten(): 将数组扁平化，例如[3,4,[6,7]]变为[3,4,6,7]

without(): 去除指定的元素, 可以指定多个值, 例如[4,56,7,8].without(4,7) 返回[56，8]

indexOf(object): 返回指定的元素在数组中的索引，不包含则返回-1

reverse(inline)：Array内置函数reverse的增强，当inline为true时，跟内置的reverse函数效果一样，改变原数组的值，否则不改变原来的值

reduce(): 如果数组只有一个元素，则返回这个元素，否则返回数组本身

uniq(): 返回没有重复元素的数组

clone(): 返回一个跟数组相同的数组，Array中的toArray方法覆盖了Enumerable中的toArray方法，指向了这个方法

inspect(): 跟数组的toString方法类似，返回对象的字符串表示，例如[2,3].inspect() 返回 "[2,3]"

(六).Prototype（1.5 rc2)使用指南之hash.js

Hash对象(关联数组)是Prototype新建的一个对象，要创建一个Hash对象可以调用$H(object)方法，使用这个方法将生成一个基于 object对象的Hash对象，生成的Hash对象将object的属性名作为key，将object的属性值最为键值，因为javascript本身的特点(对象本身就是关联数组) ，所以实现Hash也很简单，Prototype中的Hash只是javascript的关联数组(对象)而已

Prototype中的Hash对象继承自Enumerable对象，所以也具有Enumerable对象的所有属性和方法，另外它具有以下的方法：

keys(): 返回hash的键值数组

values(): 返回值得数组

merge(hash): 合并两个hash

toQueryString(): 跟string的toQueryParams方法想法，将hash转化为一个querystring, 会调用encodeURIComponent对键和值进行编码

inspect(): hash的字符串表示

因为hash只是javascript的一个普通的对象而已，所以添加一个键值对使用： hash[key]=value就可以了，删除一个键值对使用 detele hash[key]就可以了

(七).Prototype（1.5 rc2)使用指南之range.js

Range对象是一个继承自Enumerable的"范围"对象，你可以把它看成[x,x+1,x+2,x+3……x+n]的数组看待，但是比这样的数组更节省存储空间，因为range对象只是保存x和x+n而已

要创建一个Range对象调用$R(start, end, exclusive) 函数就可以了，exclusive指定是否包含end本身，如果没有指定或为false则包含end，否则不包含,你可以利用Enumerable中定义的方法来操作range对象，range对象只是实现了Enumerable对象需要的枚举逻辑_each和覆盖了include方法而已

(八).Prototype（1.5 rc2)使用指南之ajax

Prototype中的ajax.js提供了一个非常好用的ajax框架，一般应用中简单的调用以下代码就可以了

new Ajax.Request(

    url, {method: “get”,

    onSuccess: showFilter,

    onFailure: function(request){alert(”Server error!”)},

    onException: showError}

 );

这个框架中提供了如下的对象和方法等：

Ajax对象：

只有一个getTransport方法，返回一个XMLHttpRequest对象，另外有一个activeRequestCount属性，反映当前正在处理的ajax数量

Ajax.Responders对象：

继承自Enumerable，管理全局Ajax的请求，具有如下方法

register(responder)：注册一个管理ajax请求的对象

unregister(responder)：撤销一个管理ajax请求的对象

dispatch(callback, request, transport, json)：触发注册的处理对象的方法

这个对象一般很少使用，系统中已经使用如下的代码注册了一个处理对象

Ajax.Responders.register({

 onCreate: function() {

    Ajax.activeRequestCount++;

 },

 onComplete: function() {

    Ajax.activeRequestCount–;

 }

});

Ajax.Base类：

Ajax的基类, 只有一个方法setOptions(options), 默认request参数如下，你可以在新建Ajax.request时指定：

method:       'post’,

asynchronous: true,

contentType: 'application/x-www-form-urlencoded’,

encoding:     'UTF-8′,

Ajax.Request类：

ajax主要的类，继承自ajax.base类，客户端使用 new Ajax.Request(url,options) 调用，options是一个对象(关联数组), 在options中可以指定method，asynchronous，contentType，encoding，parameters， postBody，username,password等选项，其中parameters可以是字符传或者关联数组象，

另外在options中还可以通过requestHeaders指定request heads，其中requestHeaders可以是数组(例如[”Connection”,”Close”,”aheadkey”,”aheadvalue”])或一个关联数组；

options中最重要的选项就是指定ajax的回调方法，可以定义onComplete, onSuccess, onFailure, onException(执行过程中发生异常调用的方法，主要为onComplete, onSuccess, onFailure等回调方法产生的)，甚至可以定义on404,on503这样的回调方法，它们的参数为(transport, json),其中transport为请求的XMLHttpRequest对象, json是evalJSON的结果

如果返回的是一个javascript文件(根据返回的Content-type头判断)将会执行evalResponse方法，另外Ajax.Request对象还有一个evalJSON方法，取得文件的时候就会执行

这个对象的方法列表如下：

request(url) : 发送请求，new的时候就已经调用了，所以一般不需要使用

success(): 判断request是否成功了

getHeader(name)：根据name得到request head

evalJSON(): 执行getHeader(”X-JSON”),并返回结果

evalResponse(): 执行返回的responseText并返回

Ajax.Updater类:

继承自Ajax.Request，只是比Ajax.Request增加了更新html元素的功能，一般使用方法是new Ajax.Updater(element, url, options), element可以是一个元素，也可以是{success:e1,failure:e2}这种形式,

默认情况下不会执行返回结果中的javascript，如果你先执行，你可以指定options中的evalScripts为true

默认情况下是替换指定元素的内容，如果你希望是添加，可以指定options的insertion参数, insertion是一个Insertion.Before、Insertion.Top或Insertion.Bottom、 Insertion.After(将在dom.js中介绍)

Ajax.PeriodicalUpdater类:

继承自Ajax.Base，周期性的更新一个html元素的内容，这个类会调用Ajax.Updater对html元素进行周期性的更新，使用方法为new Ajax.PeriodicalUpdater(container, url, options), 参数跟Ajax.Updater差不多，其中options可以设置frequency(默认为2)，decay，decay指的是当请求的内容没有变化的时候，frequency需要延长的倍数，默认是1，例如如果decay设为2，frequency设为3而内容一直没有变化，则请求的时间依次会变为 3,6,12,24等

start(): 开始更新, 初始化的时候会自动调用

stop(): 停止更新