prototype1.4.javaScript开发手册

prototype.js是什么?万一你没有使用过大名鼎鼎的prototype.js，那么让我来告诉你，prototype.js是由SamStephenson写的一个javascript类库。这个构思奇妙，而且兼容标准的类库，能帮助你轻松建立有高度互动的web2.0特性的富客户端页面。如果你最近尝试使用它，你大概了解到文档并不是作者的一个强项。和在我以前使用这个类库的不少开发者一样，一开始，我不得不一头扎进阅读prototype.js的源代码和实验它的功能中。我想，在我学习完它之后，把我学到的东西分享给大家是件不错的事。同时，在本文中，我也将提供一个关于这个类库提供的objects,classes,functions,extensions这对东东的非官方参考在阅读这个文档时，熟悉Ruby的开发者将会注意到Ruby的一些内建类和本类库扩展实现之间非常相似。相关文章AdvancedJavaScriptguide.一些实用的函数这个类库带有很多预定义的对象和实用函数，这些东东的目的显然是把你从一些重复的打字中解放出来。使用$()方法$()方法是在DOM中使用过于频繁的document.getElementById()方法的一个便利的简写，就像这个DOM方法一样，这个方法返回参数传入的id的那个元素。比起DOM中的方法，这个更胜一筹。你可以传入多个id作为参数然后$()返回一个带有所有要求的元素的一个Array对象。HTMLHEADTITLETestPage/TITLEscriptsrc=prototype-1.3.1.js/scriptscriptfunctiontest1(){vard=$('myDiv');alert(d.innerHTML);}functiontest2(){vardivs=$('myDiv','myOtherDiv');for(i=0;idivs.length;i++){alert(divs[i].innerHTML);}}/script/HEADBODYdivid=myDivpThisisaparagraph/p/divdivid=myOtherDivpThisisanotherparagraph/p/divinputtype=buttonvalue=Test1onclick=test1();brinputtype=buttonvalue=Test2onclick=test2();br/BODY/HTML另外一个好处是，这个函数能传入用string表示的对象ID，也可以传入对象本身，这样，在建立其它能传两种类型的参数的函数时非常有用。使用$F()函数$F()函数是另一个大收欢迎的“快捷键”，它能用于返回任何表单输入控件的值，比如textbox,drop-downlist。这个方法也能用元素id或元素本身做为参数。scriptfunctiontest3(){alert($F('userName'));}/scriptinputtype=textid=userNamevalue=JoeDoebrinputtype=buttonvalue=Test3onclick=test3();br使用$A()函数$A()函数能把它接收到的单个的参数转换成一个Array对象。这个方法，结合被本类库扩展了的Array类，能方便的把任何的可枚举列表转换成或拷贝到一个Array对象。一个推荐的用法就是把DOMNodeLists转换成一个普通的Array对象，从而更有效率的进行遍历，请看下面的例子。scriptfunctionshowOptions(){varsomeNodeList=$('lstEmployees').getElementsByTagName('option');varnodes=$A(someNodeList);nodes.each(function(node){alert(node.nodeName+':'+node.innerHTML);});}/scriptselectid=lstEmployeessize=10optionvalue=5Buchanan,Steven/optionoptionvalue=8Callahan,Laura/optionoptionvalue=1Davolio,Nancy/option/selectinputtype=buttonvalue=Showtheoptionsonclick=showOptions();使用$H()函数$H()函数把一些对象转换成一个可枚举的和联合数组类似的Hash对象。scriptfunctiontestHash(){//let'screatetheobjectvara={first:10,second:20,third:30};//nowtransformitintoahashvarh=$H(a);alert(h.toQueryString());//displays:first=10&second=20&third=30}/script使用$R()函数$R()是newObjectRange(lowBound,upperBound,excludeBounds)的缩写。跳到ObjectRange类文档可以看到一个关于此类的完整描述.此时，我们还是先来看一个例子以展示这个缩写能代替哪些方法吧。其它相关的一些知识可以在Enumerable对象文档中找到。scriptfunctiondemoDollar_R(){varrange=$R(10,20,false);range.each(function(value,index){alert(value);});}/scriptinputtype=buttonvalue=SampleCountonclick=demoDollar_R();使用Try.these()函数Try.these()方法使得实现当你想调用不同的方法直到其中的一个成功正常的这种需求变得非常容易，他把一系列的方法作为参数并且按顺序的一个一个的执行这些方法直到其中的一个成功执行，返回成功执行的那个方法的返回值。在下面的例子中，xmlNode.text在一些浏览器中好用，但是xmlNode.textContent在另一些浏览器中正常工作。使用Try.these()方法我们可以得到正常工作的那个方法的返回值。scriptfunctiongetXmlNodeValue(xmlNode){returnTry.these(function(){returnxmlNode.text;},function(){returnxmlNode.textContent;));}/scriptAjax对象上面提到的共通方法非常好，但是面对它吧，它们不是最高级的那类东西。它们是吗？你很可能自己编写了这些甚至在你的脚本里面有类似功能的方法。但是这些方法只是冰山一角。我很肯定你对prototype.js感兴趣的原因很可能是由于它的AJAX能力。所以让我们解释当你需要完成AJAX逻辑的时候，这个包如何让它更容易。Ajax对象是一个预定义对象，由这个包创建，为了封装和简化编写AJAX功能涉及的狡猾的代码。这个对象包含一系列的封装AJAX逻辑的类。我们来看看其中几个类。使用Ajax.Request类如果你不使用任何的帮助程序包，你很可能编写了整个大量的代码来创建XMLHttpRequest对象并且异步的跟踪它的进程，然后解析出响应然后处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。为了支持AJAX功能。这个包定义了Ajax.Request类。假如你有一个应用程序可以通过url=1234&year=1998与服务器通信。它返回下面这样的XML响应。?xmlversion=1.0encoding=utf-8?ajax-responseresponsetype=objectid=productDetailsmonthly-salesemployee-salesemployee-id1234/employee-idyear-month1998-01/year-monthsales$8,115.36/sales/employee-salesemployee-salesemployee-id1234/employee-idyear-month1998-02/year-monthsales$11,147.51/sales/employee-sales/monthly-sales/response/ajax-response用Ajax.Request对象和服务器通信并且得到这段XML是非常简单的。下面的例子演示了它是如何完成的。scriptfunctionsearchSales(){varempID=$F('lstEmployees');vary=$F('lstYears');varurl='varpars='empID='+empID+'&year='+y;varmyAjax=newAjax.Request(url,{method:'get',parameters:pars,onComplete:showResponse});}functionshowResponse(originalRequest){//putreturnedXMLinthetextarea$('result').value=originalRequest.responseText;}/scriptselectid=lstEmployeessize=10onchange=searchSales()optionvalue=5Buchanan,Steven/optionoptionvalue=8Callahan,Laura/optionoptionvalue=1Davolio,Nancy/option/selectselectid=lstYearssize=3onchange=searchSales()optionselected=selectedvalue=19961996/optionoptionvalue=19971997/optionoptionvalue=19981998/option/selectbrtextareaid=resultcols=60rows=10/textarea你注意到传入Ajax.Request构造方法的第二个对象了吗？参数{method:'get',parameters:pars,onComplete:showResponse}表示一个匿名对象的真实写法。他表示你传入的这个对象有一个名为method值为'get'的属性，另一个属性名为parameters包含HTTP请求的查询字符串，和一个onComplete属性/方法包含函数showResponse。还有一些其它的属性可以在这个对象里面定义和设置，如asynchronous，可以为true或false来决定AJAX对服务器的调用是否是异步的（默认值是true）。这个参数定义AJAX调用的选项。在我