不得不学的prototype.js开发笔记

prototype.js开发笔记TableofContents1.ProgrammingGuide1.1.Prototype是什么?1.2.关联文章1.3.通用性方法1.3.1.使用$()方法1.3.2.使用$F()方法1.3.3.使用$A()方法1.3.4.使用$H()方法1.3.5.使用$R()方法1.3.6.使用Try.these()方法1.4.Ajax对象1.4.1.使用Ajax.Request类1.4.2.使用Ajax.Updater类2.prototype.js参考2.1.JavaScript类的扩展2.2.对Object类的扩展2.3.对Number类的扩展2.4.对Function类的扩展2.5.对String类的扩展2.6.对documentDOM对象的扩展2.7.对Event对象的扩展2.8.在prototype.js中定义的新对象和类2.9.PeriodicalExecuter对象2.10.Prototype对象2.11.Class对象2.12.Ajax对象2.13.Ajax.Base类2.14.Ajax.Request类2.15.options参数对象2.16.Ajax.Updater类2.17.Ajax.PeriodicalUpdater类2.18.Element对象2.19.Abstract对象2.20.Abstract.Insertion类2.21.Insertion对象2.22.Insertion.Before类2.23.Insertion.Top类2.24.Insertion.Bottom类2.25.Insertion.After类2.26.Field对象2.27.Form对象2.28.Form.Element对象2.29.Form.Element.Serializers对象2.30.Abstract.TimedObserver类2.31.Form.Element.Observer类2.32.Form.Observer类2.33.Abstract.EventObserver类2.34.Form.Element.EventObserver类2.35.Form.EventObserver类2.36.Position对象(预备文档)覆盖版本1.3.1Chapter1.ProgrammingGuide1.1.Prototype是什么?或许你还没有用过它，prototype.js是一个由SamStephenson写的JavaScript包。这个构思奇妙编写良好的一段兼容标准的一段代码将承担创造胖客户端，高交互性WEB应用程序的重担。轻松加入Web2.0特性。如果你最近体验了这个程序包，你很可能会发现文档并不是它的强项之一。像所有在我之前的开发者一样，我只能一头扎进prototype.js的源代码中并且试验其中的每一个部分。我想当我学习他的时候记写笔记然后分享给其他人将会很不错。我也一起提供了这个包的对象，类，方法和扩展的非官方参考。1.2.关联文章高级JavaScript指南1.3.通用性方法这个程序包里面包含了许多预定义的对象和通用性方法。编写这些方法的明显的目的就是为了减少你大量的重复编码和惯用法。1.3.1.使用$()方法$()方法是在DOM中使用过于频繁的document.getElementById()方法的一个便利的简写，就像这个DOM方法一样，这个方法返回参数传入的id的那个元素。比起DOM中的方法，这个更胜一筹。你可以传入多个id作为参数然后$()返回一个带有所有要求的元素的一个Array对象。下面的例子会向你描述这些。HTMLHEADTITLETestPage/TITLEscriptsrc=prototype-1.3.1.js/scriptscriptfunctiontest1(){vard=$('myDiv');alert(d.innerHTML);}functiontest2(){vardivs=$('myDiv','myOtherDiv');for(i=0;idivs.length;i++){alert(divs[i].innerHTML);}}/script/HEADBODYdivid=myDivpThisisaparagraph/p/divdivid=myOtherDivpThisisanotherparagraph/p/divinputtype=buttonvalue=Test1onclick=test1();brinputtype=buttonvalue=Test2onclick=test2();br/BODY/HTML这个方法的另一个好处就是你可以传入id字符串或者元素对象自己，这使得在创建可以传入任何形式参数的方法的时候，它变得非常有用。1.3.2.使用$F()方法$F()方法是另一个非常受欢迎的简写。它可以返回任何输入表单控件的值，如文本框或下拉框。这个方法可以传入元素的id或者元素自己。scriptfunctiontest3(){alert($F('userName'));}/scriptinputtype=textid=userNamevalue=JoeDoebrinputtype=buttonvalue=Test3onclick=test3();br1.3.3.使用$A()方法$A()方法把接收到的参数转换成一个Array对象。这个方法加上对Array类的扩展，可以很容易的转换或者复制任意的列举列表到Array对象，一个被推荐使用的用法就是转换DOM的NodeLists到一个普通的数组里，可以被更广泛高效的使用，看下面的例子。scriptfunctionshowOptions(){varsomeNodeList=$('lstEmployees').getElementsByTagName('option');varnodes=$A(someNodeList);nodes.each(function(node){alert(node.nodeName+':'+node.innerHTML);});}/scriptselectid=lstEmployeessize=10optionvalue=5Buchanan,Steven/optionoptionvalue=8Callahan,Laura/optionoptionvalue=1Davolio,Nancy/option/selectinputtype=buttonvalue=Showtheoptionsonclick=showOptions();1.3.4.使用$H()方法$H()方法把对象转化成可枚举的貌似联合数组Hash对象。scriptfunctiontestHash(){//let'screatetheobjectvara={first:10,second:20,third:30};//nowtransformitintoahashvarh=$H(a);alert(h.toQueryString());//displays:first=10&second=20&third=30}/script1.3.5.使用$R()方法$R()方法是newObjectRange(lowerBound,upperBound,excludeBounds)的一个简单快捷的使用方式。ObjectRange类文档里面有完整的解释。同时，我们来看看一个简单的例子，来演示通过each方法遍历的用法。那个方法的更多解释在Enumerable对象文档里面。scriptfunctiondemoDollar_R(){varrange=$R(10,20,false);range.each(function(value,index){alert(value);});}/scriptinputtype=buttonvalue=SampleCountonclick=demoDollar_R();1.3.6.使用Try.these()方法Try.these()方法使得实现当你想调用不同的方法直到其中的一个成功正常的这种需求变得非常容易，他把一系列的方法作为参数并且按顺序的一个一个的执行这些方法直到其中的一个成功执行，返回成功执行的那个方法的返回值。在下面的例子中，xmlNode.text在一些浏览器中好用，但是xmlNode.textContent在另一些浏览器中正常工作。使用Try.these()方法我们可以得到正常工作的那个方法的返回值。scriptfunctiongetXmlNodeValue(xmlNode){returnTry.these(function(){returnxmlNode.text;},function(){returnxmlNode.textContent;));}/script1.4.Ajax对象上面提到的共通方法非常好，但是面对它吧，它们不是最高级的那类东西。它们是吗？你很可能自己编写了这些甚至在你的脚本里面有类似功能的方法。但是这些方法只是冰山一角。我很肯定你对prototype.js感兴趣的原因很可能是由于它的AJAX能力。所以让我们解释当你需要完成AJAX逻辑的时候，这个包如何让它更容易。Ajax对象是一个预定义对象，由这个包创建，为了封装和简化编写AJAX功能涉及的狡猾的代码。这个对象包含一系列的封装AJAX逻辑的类。我们来看看它们的一些。1.4.1.使用Ajax.Request类如果你不使用任何的帮助程序包，你很可能编写了整个大量的代码来创建XMLHttpRequest对象并且异步的跟踪它的进程，然后解析出响应然后处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。为了支持AJAX功能。这个包定义了Ajax.Request类。假如你有一个应用程序可以通过url=1234&year=1998与服务器通信。它返回下面这样的XML响应。?xmlversion=1.0encoding=utf-8?ajax-responseresponsetype=objectid=productDetailsmonthly-salesemployee-salesemployee-id1234/employee-idyear-month1998-01/year-monthsales$8,115.36/sales/employee-salesemployee-salesemployee-id1234/employee-idyear-month1998-02/year-monthsales$11,147.51/sales/employee-sales/monthly-sales/response/ajax-response用Ajax.Request对象和服务器通信并且得到这段XML是非常简单的。下面的例子演示了它是如何完成的。scriptfunctionsearchSales(){varempID=$F('lstEmployees');vary=$F('lstYears');varurl='='empID='+empID+'&year='+y;varmyAjax=newAjax.Request(url,{method:'get',parameters:pars,onComplete:showResponse});}functionshowResponse(originalRequest){//putreturnedXMLinthetextarea$('result').value