prototype

更新时间:2022-08-25 17:18

在JavaScript中,prototype对象是实现面向对象的一个重要机制。

简介

在通过new创建一个类的实例对象的时候,prototype对象的成员都成为实例化对象的成员。

1、该对象被类所引用,只有函数对象才可引用;

2、在new实例化后,其成员被实例化,实例对象方可调用。

同时,函数是一个对象,函数对象若直接声明成员,不用被实例化即可调用。

优点

prototype.js是由Sam Stephenson写的一个javascript类库。该框架的设计思路巧妙,而且兼容标准的类库,能够帮助开发人员轻松建立有交互性良好的web2.0特性富客户端页面。

使用$()方法

$() 方法是在DOM中使用过于频繁的 document.getElementById() 方法的一个便利的简写,就像这个DOM方法一样,这个方法返回参数传入的id的那个元素。

比起DOM中的方法,这个更胜一筹。可以传入多个id作为参数然后 $() 返回一个带有所有要求的元素的一个 Array 对象。

另外一个好处是,这个函数能传入用string表示的对象ID,也可以传入对象本身,这样,在建立其它能传两种类型的参数的函数时非常有用。

使用()函数

()函数是另一个大受欢迎的“快捷键”,它能用于返回任何表单输入控件的值,比如text box,drop-down list。这个方法也能用元素id或元素本身做为参数。

使用()函数

()函数能把它接收到的单个的参数转换成一个Array对象。

这个方法,结合被本类库扩展了的Array类,能方便的把任何的可枚举列表转换成或拷贝到一个Array对象。一个推荐的用法就是把DOM Node Lists转换成一个普通的Array对象,从而更有效率的进行遍历,请看下面的例子。

使用() 函数

()函数把一些对象转换成一个可枚举的和联合数组类似的Hash对象。

使用()函数

()是new ObjectRange(lowBound,upperBound,excludeBounds)的缩写。

跳到ObjectRange 类文档可以看到一个关于此类的完整描述. 此时,还是先来看一个例子以展示这个缩写能代替哪些方法吧。其它相关的一些知识可以在Enumerable 对象文档中找到。

使用Try.these()函数

Try.these() 方法使得实现当想调用不同的方法直到其中的一个成功正常的这种需求变得非常容易, 他把一系列的方法作为参数并且按顺序的一个一个的执行这些方法直到其中的一个成功执行,返回成功执行的那个方法的返回值。

在下面的例子中, xmlNode.text在一些浏览器中好用,但是xmlNode.textContent在另一些浏览器中正常工作。 使用Try.these()方法可以得到正常工作的那个方法的返回值。

Ajax对象

上面提到的共通方法非常好,但是面对它吧,它们不是最高级的那类东西。它们是吗?很可能自己编写了这些甚至在的脚本里面有类似功能的方法。但是这些方法只是冰山一角。

我很肯定对prototype.js感兴趣的原因很可能是由于它的AJAX能力。所以让解释当需要完成AJAX逻辑的时候,这个包如何让它更容易。

Ajax 对象是一个预定义对象,由这个包创建,为了封装和简化编写AJAX 功能涉及的狡猾的代码。 这个对象包含一系列的封装AJAX逻辑的类。来看看其中几个类。

使用Ajax.Request类

如果不使用任何的帮助程序包,很可能编写了整个大量的代码来创建XMLHttpRequest对象并且异步地跟踪它的进程, 然后解析出响应并处理它。当不需要支持多于一种类型的浏览器时会感到非常的幸运。

为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。

假如有一个应用程序可以通过url http://yoursever/app/get_sales?empID=1234&year=1998与服务器通信。它返回下面这样的XML 响应。

用 Ajax.Request对象和服务器通信并且得到这段XML是非常简单的。下面的例子演示了它是如何完成的。

注意到传入 Ajax.Request构造方法的第二个对象: 参数{method: 'get', parameters: pars, onComplete: showResponse} 表示一个匿名对象的真实写法。他表示传入的这个对象有一个名为 method 值为 'get'的属性,另一个属性名为 parameters 包含HTTP请求的查询字符串,和一个onComplete 属性/方法包含函数showResponse。

还有一些其它的属性可以在这个对象里面定义和设置,如 asynchronous,可以为true 或 false 来决定AJAX对服务器的调用是否是异步的(默认值是 true)。

这个参数定义AJAX调用的选项。在的例子中,在第一个参数通过HTTP GET命令请求那个url,传入了变量 pars包含的查询字符串, Ajax.Request 对象在它完成接收响应的时候将调用showResponse 方法。

XMLHttpRequest在HTTP请求期间将报告进度情况。这个进度被描述为四个不同阶段:Loading, Loaded, Interactive, 或 Complete。可以使 Ajax.Request 对象在任何阶段调用自定义方法 ,Complete 是最常用的一个。想调用自定义的方法只需要简单的在请求的选项参数中的名为 onXXXXX 属性/方法中提供自定义的方法对象。 就像例子中的 onComplete 。传入的方法将会被用一个参数调用,这个参数是 XMLHttpRequest 对象自己。用这个对象去得到返回的数据并且或许检查包含有在这次调用中的HTTP结果代码的 status 属性。

还有另外两个有用的选项用来处理结果。可以在onSuccess 选项处传入一个方法,当AJAX无误的执行完后调用, 相反的,也可以在onFailure选项处传入一个方法,当服务器端出现错误时调用。正如onXXXXX 选项传入的方法一样,这两个在被调用的时候也传入一个带有AJAX请求的XMLHttpRequest对象。

例子没有用任何有趣的方式处理这个 XML响应, 只是把这段XML放进了一个文本域里面。对这个响应的一个典型的应用很可能就是找到其中的想要的信息,然后更新页面中的某些元素, 或者甚至可能做某些XSLT转换而在页面中产生一些HTML。

在1.4.0版本中,一种新的事件回传外理被引入。如果有一段代码总是要为一个特殊的事件执行,而不管是哪个AJAX调用引发它,那么可以使用新的Ajax.Responders对象。

假设想要在一个AJAX调用正在运行时,显示一些提示效果,像一个不断转动的图标之类的,可以使用两个全局事件Handler来做到,其中一个在第一个调用开始时显示图标,另一个在最后一个调用完成时隐藏图标。看下面的例子。

更完全的解释,请参照 Ajax.Request 参考 和 Ajax选项参考。

使用Ajax.Updater类

如果的服务器的另一端返回的信息已经是HTML了,那么使用这个程序包中 Ajax.Updater 类将使的生活变得更加得容易。用它只需提供哪一个元素需要被AJAX请求返回的HTML填充就可以了,例子比我写说明的更清楚。

可以看到,这段代码比前面的例子更加简洁,不包括 onComplete 方法,但是在构造方法中传入了一个元素id。 来稍稍修改一下代码来描述如何在客户端处理服务器段错误成为可能。

将加入更多的选项, 指定处理错误的一个方法。这个是用 onFailure 选项来完成的。也指定了一个 placeholder 只有在成功请求之后才会被填充。为了完成这个目的修改了第一个参数从一个简单的元素id到一个带有两个属性的对象, success (一切OK的时候被用到) 和 failure (有地方出问题的时候被用到) 在下面的例子中没有用到failure属性,而仅仅在 onFailure 处使用了 reportError 方法。

如果的服务器逻辑是连同HTML 标记返回JavaScript 代码, Ajax.Updater对象可以执行那段JavaScript代码。为了使这个对象对待响应为JavaScript,只需在最后参数的对象构造方法中简单加入evalScripts: true属性。但是值得提醒的是,像这个选项名evalScripts暗示的,这些脚本会被执行,但是它们不会被加入到Page的脚本中。“有什么区别?”,可能会这样问。假定请求地址返回的东东像这样:

如果以前这样尝试过,知道这些脚本不会如所期望的那样工作,原因是这段脚本会被执行,但像上面这样的脚本执行并不会创建一个名叫sayHi的函数,它什么也不做。如果要创建一个函数,应当把代码改成下面这个样子:

为什么在上面的代码中不使用var关键字来声明这个变量呢(指sayHi ),因为那样做创建出来的函数将只是当前脚本块的一个局部变量(至少在IE中是这样)。不写var关键字,创建出来的对象的作用域就是所期望的window。

建立循环

知道,都是这样来做循环的,建一个Array,用elements组织它们,再建一个循环结构(例如for,foreach,while)通过index数字来访问每一个element,再用这个element做一些动作。

当想到这时,会发现几乎每次写循环代码都会迟早用到一个Array。那么,如果Array对象能够提供更多的功能给它们的迭代器使用不是很爽吗?确实是这样,事实上很多的编程语言都在它们的Array或其它类似的结构中(如Collections,Lists)提供一些这样的功能。

prototype.js了给一个 Enumerable对象,它实现了很多和可迭代数据进行交互的窍门。和原有的JS对象相比prototype.js更上一层楼,它对Array 类s扩展了所有枚举要用的函数。

循环, Ruby样式的

在标准的javascript中,如果想把一个array中的所有elements显示出来,可以像下面代码这样写得很好:

使用新的最好的朋友,prototype.js,可以把它生写成这样

在继续下面内容之前,注意到那个被做为一个参数传递给each函数的函数?把它理解成迭代器函数。

Your arrays on steroids

就如上面提到的,把的Array中的elements当成相同的类型使用相同的属性和函数是很通用(Common,不知该翻译成通用还是庸俗)的。让看看怎么样利用新的马力强劲的Arrays的迭代功能吧。

依照标准找到一个element。

再下一层,看看如何过滤一个Array中的元素,从每个元素中得到想要的成员。

上面的代码仅仅是一点小小的实践让人爱上这种语法。

prototype例子

例子1:给String类封装一个“日期验证”的新的方法

Prototype定期执行

很多时候,它需要后一定时间内多次执行一个函数。例如,您可能要刷新一个给定的时间后的屏幕。原型提供了一个简单的机制来实现它使用周期性的PeriodicalExecuter 对象.

通过PeriodicalExecuter提供的优势是,它屏蔽对多个并行执行回调函数.

创建一个定期执行

构造函数有两个参数:

callback 函数。

interval (in seconds) 函数。

一旦启动,PeriodicalExecuter触发下去,直到页面卸载或执行者停止使用stop()方法。

以下是例子,它会弹出一个对话框,每5秒后,直到按“取消”按钮将停止。

免责声明
隐私政策
用户协议
目录 22
0{{catalogNumber[index]}}. {{item.title}}
{{item.title}}