[prototype.js是由​​Sam Stephenson​​写的一个javascript类库。用于建立有高度互动的web2.0特性的富客户端页面。] 

1. JavaScript 类的扩展 

prototype.js 包中加入功能的一种途径就是扩展已有的JavaScript 类。 

2. 对 Object 类的扩展 

Object 类的扩展 

方法

类别

参数

描述

extend(destination,source) 

static 

destination: 任何对象, source: 任何对象 

用从 source 到 destination复制所有属性和方法的方式 来提供一种继承机制。 

extend(object) 

instance 

任何对象 

用从传入的 object 中复制所有属性和方法的方式 来提供一种继承机制。 

3. 对 Number 类的扩展 

Number 类的扩展

方法

类别

参数

描述

toColorPart() 

instance 

(none) 

返回数字的十六进制描述， 当在HTML中转换为RGB颜色组件到HTML中使用的颜色。 

4.对 Function 类的扩展 

对 Function 类的扩展

方法

类别

参数

描述

bind(object) 

instance 

object: 拥有这个方法的对象 

返回预先绑定在拥有该函数(=方法)的对象上的函数实例， 返回的方法将和原来的方法具有相同的参数。 

bindAsEventListener(object) 

instance 

object: 拥有这个方法的对象 

返回预先绑定在拥有该函数(=方法)的对象上的函数实例， 返回的方法将把当前的事件对象作为它的参数。 

让我们看看这些扩展的具体例子。 

<input type=checkbox id=myChk value=1> Test? 

<script> 

//declaring the class

var CheckboxWatcher = Class.create(); 

//defining the rest of the class implmentation

CheckboxWatcher.prototype = { 

initialize: function(chkBox, message){ 

this.chkBox = $(chkBox); 

this.message = message; 

//assigning our method to the event

this.chkBox.onclick = this.showMessage.bindAsEventListener(this); 

}, 

showMessage: function(evt){ 

alert(this.message + ' (' + evt.type + ')'); 

} 

}; 

var watcher = new CheckboxWatcher('myChk', 'Changed'); 

</script> 

5. 对 String 类的扩展 

String 类的扩展 

方法

类别

参数

描述

stripTags() 

instance 

(none) 

返回一个把所有的HTML或XML标记都移除的字符串。 

escapeHTML() 

instance 

(none) 

返回一个把所有的HTML标记回避掉的字符串。 

unescapeHTML() 

instance 

(none) 

和 escapeHTML()相反。 

6. 对 document DOM 对象的扩展 

document DOM 对象的扩展 

方法

类别

参数

描述

getElementsByClassName(className) 

instance 

className: 关联在元素上的CSS类名 

返回给定的具有相同的CSS类名的所有元素。 

7. 对 Event 对象的扩展 

Event 对象的扩展 

属性

类型

描述

KEY_BACKSPACE 

Number 

8: 常量，退格(Backspace)键的代码。 

KEY_TAB 

Number 

9: 常量，Tab键的代码。 

KEY_RETURN 

Number 

13: 常量，回车键的代码。 

KEY_ESC 

Number 

27: 常量， Esc键的代码。 

KEY_LEFT 

Number 

37: 常量，左箭头键的代码。 

KEY_UP 

Number 

38: 常量，上箭头键的代码。 

KEY_RIGHT 

Number 

39: 常量，右箭头键的代码。 

KEY_DOWN 

Number 

40: 常量，下箭头键的代码。 

KEY_DELETE 

Number 

46: 常量，删除(Delete)键的代码。 

observers: 

Array 

缓存的观察者的列表，这个对象内部具体实现的一部分。 

Event 对象的扩展

方法

类别

参数

描述

element(event) 

static 

event: 事件对象 

返回引发这个事件的元素。 

isLeftClick(event) 

static 

event: 事件对象 

如果鼠标左键单击返回true。 

pointerX(event) 

static 

event: 事件对象 

返回在页面上x坐标。 

pointerY(event) 

static 

event: 事件对象 

返回在页面上y坐标。 

stop(event) 

static 

event: 事件对象 

用这个方法来中止事件的默认行为来使事件的传播停止。 

findElement(event, tagName) 

static 

event: 事件对象, tagName: 指定标记的名字 

向 DOM 树的上位查找，找到第一个给定标记名称的元素， 从这个元素开始触发事件。 

observe(element, name, observer, useCapture) 

static 

element: 对象或者对象id, name: 事件名 (如 'click', 'load', etc), observer: 处理这个事件的方法, useCapture: 如果true, 在捕捉到事件的阶段处理事件 那么如果 false在 bubbling 阶段处理。 

加入一个处理事件的方法。 

stopObserving(element, name, observer, useCapture) 

static 

element: 对象或者对象id, name: 事件名 (如 'click', 'load', etc), observer: 处理这个事件的方法, useCapture: 如果true, 在捕捉到事件的阶段处理事件 那么如果 false在 bubbling 阶段处理。 

删除一个处理实践的方法。 

_observeAndCache( element, name, observer, useCapture) 

static 

 

私有方法，不用管它。 

unloadCache() 

static 

(none) 

私有方法，不用管它。清除内存中的多有观察着缓存。 

让我们看看怎样用这个对象加入处理 window 对象的load事件的处理方法。 

<script> 

Event.observe(window, 'load', showMessage, false); 


function showMessage(){ 

alert('Page loaded.'); 

} 

</script> 

8. 在 prototype.js中定义的新对象和类 

另一个这个程序包帮助你的地方就是提供许多既支持面向对象设计理念又有共通功能的许多对象。 

9. PeriodicalExecuter 对象 

这个对象提供一定间隔时间上重复调用一个方法的逻辑。 

PeriodicalExecuter 对象

方法

类别

参数

描述

[ctor](callback, interval) 

constructor 

callback: 没有参数的方法, interval: 秒数 

创建这个对象的实例将会重复调用给定的方法。 

PeriodicalExecuter 对象

属性

类型

描述

callback 

Function() 

被调用的方法，该方法不会被传入参数。 

frequency 

Number 

以秒为单位的间隔。 

currentlyExecuting 

Boolean 

表示这个方法是否正在执行。 

10. Prototype 对象 

Prototype 没有太重要的作用，只是声明了该程序包的版本 。 

The Prototype object

属性

类型

描述

Version 

String 

包的版本。 

emptyFunction 

Function() 

空方法对象。 

11. Class 对象 

在这个程序包中 Class 对象在声明其他的类时候被用到 。用这个对象声明类使得新类支持 initialize() 方法，他起构造方法的作用。 

看下面的例子 

//declaring the class 

var MySampleClass = Class.create(); 

//defining the rest of the class implmentation

MySampleClass.prototype =

{ 

initialize: function(message){ 

this.message = message; 

}

showMessage: function(ajaxResponse){ 

alert(this.message); 

} 

}; 

//now, let's instantiate and use one object 

var myTalker = new MySampleClass('hi there.'); 

myTalker.showMessage(); //displays alert 

Class 对象

方法

类别

参数

描述

create(*) 

instance 

(any) 

定义新类的构造方法。