prototype.js的扩展

[prototype.js是由SamStephenson写的一个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:拥有这个方法的对象	返回预先绑定在拥有该函数(=方法)的对象上的函数实例，返回的方法将把当前的事件对象作为它的参数。

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

<inputtype=checkboxid=myChkvalue=1>Test?
<script>
//declaringtheclass
varCheckboxWatcher=Class.create();
//definingtherestoftheclassimplmentation
CheckboxWatcher.prototype={
initialize:function(chkBox,message){
this.chkBox=$(chkBox);
this.message=message;
//assigningourmethodtotheevent
this.chkBox.onclick=this.showMessage.bindAsEventListener(this);
},
showMessage:function(evt){
alert(this.message+'('+evt.type+')');
}
};
varwatcher=newCheckboxWatcher('myChk','Changed');
</script>

5.对String类的扩展

String类的扩展

方法	类别	参数	描述
stripTags()	instance	(none)	返回一个把所有的HTML或XML标记都移除的字符串。
escapeHTML()	instance	(none)	返回一个把所有的HTML标记回避掉的字符串。
unescapeHTML()	instance	(none)	和escapeHTML()相反。

6.对documentDOM对象的扩展

documentDOM对象的扩展

方法	类别	参数	描述
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);

functionshowMessage(){
alert('Pageloaded.');
}
</script>

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

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

9.PeriodicalExecuter对象

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

PeriodicalExecuter对象

方法	类别	参数	描述
[ctor](callback,interval)	constructor	callback:没有参数的方法,interval:秒数	创建这个对象的实例将会重复调用给定的方法。

PeriodicalExecuter对象

属性	类型	描述
callback	Function()	被调用的方法，该方法不会被传入参数。
frequency	Number	以秒为单位的间隔。
currentlyExecuting	Boolean	表示这个方法是否正在执行。

10.Prototype对象

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

ThePrototypeobject

属性	类型	描述
Version	String	包的版本。
emptyFunction	Function()	空方法对象。

11.Class对象

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

看下面的例子

//declaringtheclass
varMySampleClass=Class.create();
//definingtherestoftheclassimplmentation
MySampleClass.prototype=
{
initialize:function(message){
this.message=message;
}
showMessage:function(ajaxResponse){
alert(this.message);
}
};
//now,let'sinstantiateanduseoneobject
varmyTalker=newMySampleClass('hithere.');
myTalker.showMessage();//displaysalert

Class对象

方法	类别	参数	描述
create(*)	instance	(any)	定义新类的构造方法。