




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
開發(fā)者手冊對應(yīng)版本1。4.0originalarticlebysp(’SergioPereira’)HYPERLINK"mailto:sergio_pereira@msn.com"SergioPereiralastupdate:March30th2006中文版:HYPERLINK"mailto:thin37421@126。com”THIN最后更新:2006-3-31看到一個很好的東西在國內(nèi)沒有被很多人使用起來,實在是不爽,所以花了很大功夫把這個手冊翻譯成中文,由于這篇文章很長,所以,翻譯的工作量很大而且有些地方英文版也沒有說清楚,雖得查看源代碼,好在不是堅持做完了,大家鼓勵下啊!^o^?prototype.js是一個非常優(yōu)雅的javascript基礎(chǔ)類庫,對javascript做了大量的擴(kuò)展,而且很好的支持Ajax,國外有多個基于此類庫實現(xiàn)的效果庫,也做得很棒。
prototype。js不僅是一個有很大實用價值的js庫,而且有很高的學(xué)習(xí)價值,所以我強(qiáng)烈建議B/S開發(fā)人員和對JS開發(fā)感興趣的朋友去瀏覽一些它的源代碼,其中有很多的珠璣,你絕對會覺得讀它的源代碼是一種享受,當(dāng)然要讀得懂,呵呵。?網(wǎng)上也有人寫過1。3版的源碼解讀,大家可以找來看看。不過1。4版做了很大的擴(kuò)充,所以希望有朋友寫出1.4版的源碼解讀.幾點說明:有朋友說prototye已經(jīng)有人翻譯過了,呵呵,是對的,說明你以前關(guān)注過它,不過原來翻譯的是1.3版的文檔,1。4版有很多重要的擴(kuò)展,而且pre_1.5版現(xiàn)在也出來,不地改動不大。有朋友說有用多沒有翻譯地來的,拜托,只是各個方法的參數(shù)說明沒有翻,這些說明很多都是什么類型,還是有空再弄吧,先將就一下,對不起了,翻到這個程序已經(jīng)很累人了,畢竟有這么長。做成CHM文檔的事也只能Sorry,因為我沒有這個時間,也沒有做過CHM,我覺得排版一下看網(wǎng)頁和CHM是差不多吧。
prototype.js是什么?萬一你沒有使用過大名鼎鼎的prototype。js,那么讓我來告訴你,HYPERLINK”http://prototype。conio。net/”prototype.js是由HYPERLINK"http://www。c/"SamStephenson寫的一個javascript類庫。這個構(gòu)思奇妙,而且兼容標(biāo)準(zhǔn)的類庫,能幫助你輕松建立有高度互動的web2。0特性的富客戶端頁面。如果你最近嘗試使用它,你大概了解到文檔并不是作者的一個強(qiáng)項.和在我以前使用這個類庫的不少開發(fā)者一樣,一開始,我不得不一頭扎進(jìn)閱讀prototype。js的源代碼和實驗它的功能中。我想,在我學(xué)習(xí)完它之后,把我學(xué)到的東西分享給大家是件不錯的事。同時,在本文中,我也將提供一個關(guān)于這個類庫提供的objects,classes,functions,extensions這對東東的HYPERLINK”http://www.cnblog/thinhunan/archive/2006/04/01/developernotesforprototype.html"\l"Reference#Reference”非官方參考在閱讀這個文檔時,熟悉Ruby的開發(fā)者將會注意到Ruby的一些內(nèi)建類和本類庫擴(kuò)展實現(xiàn)之間非常相似。相關(guān)文章AdvancedHYPERLINK”http://www.sergioperei/articles/advjs.html”JavaScriptguide.一些實用的函數(shù)這個類庫帶有很多預(yù)定義的對象和實用函數(shù),這些東東的目的顯然是把你從一些重復(fù)的打字中解放出來.使用$()方法$()方法是在DOM中使用過于頻繁的document。getElementById()方法的一個便利的簡寫,就像這個DOM方法一樣,這個方法返回參數(shù)傳入的id的那個元素。比起DOM中的方法,這個更勝一籌.你可以傳入多個id作為參數(shù)然后$()返回一個帶有所有要求的元素的一個Array對象?!碒TML>〈HEAD〉<TITLE>TestPage</TITLE>〈scriptsrc="prototype-1。3。1.js”></script〉<script>functiontest1(){vard=$(’myDiv');alert(d.innerHTML);}functiontest2(){vardivs=$('myDiv’,'myOtherDiv’);for(i=0;i〈divs。length;i++){alert(divs[i]。innerHTML);}}〈/script></HEAD〉<BODY><divid=”myDiv”><p〉Thisisaparagraph〈/p></div〉<divid=”myOtherDiv"><p>Thisisanotherparagraph</p〉</div><inputtype="button”value=Test1onclick=”test1();"〉<br><inputtype=”button"value=Test2onclick="test2();">〈br>〈/BODY〉</HTML〉另外一個好處是,這個函數(shù)能傳入用string表示的對象ID,也可以傳入對象本身,這樣,在建立其它能傳兩種類型的參數(shù)的函數(shù)時非常有用。使用$F()函數(shù)$F()函數(shù)是另一個大收歡迎的“快捷鍵”,它能用于返回任何表單輸入控件的值,比如textbox,drop—downlist。這個方法也能用元素id或元素本身做為參數(shù)?!磗cript>functiontest3(){alert($F('userName’));}〈/script〉<inputtype=”text"id="userName"value=”JoeDoe”><br〉〈inputtype=”button"value=Test3onclick=”test3();"〉〈br〉使用$A()函數(shù)$A()函數(shù)能把它接收到的單個的參數(shù)轉(zhuǎn)換成一個Array對象。這個方法,結(jié)合被本類庫擴(kuò)展了的Array類,能方便的把任何的可枚舉列表轉(zhuǎn)換成或拷貝到一個Array對象。一個推薦的用法就是把DOMNodeLists轉(zhuǎn)換成一個普通的Array對象,從而更有效率的進(jìn)行遍歷,請看下面的例子。〈script>functionshowOptions(){varsomeNodeList=$('lstEmployees’).getElementsByTagName('option');varnodes=$A(someNodeList);nodes。each(function(node){alert(node。nodeName+’:'+node。innerHTML);});}〈/script〉<selectid=”lstEmployees”size="10">〈optionvalue="5”〉Buchanan,Steven</option>〈optionvalue=”8">Callahan,Laura</option〉<optionvalue=”1"〉Davolio,Nancy〈/option〉〈/select〉<inputtype="button"value="Showtheoptions"onclick=”showOptions();”〉使用
$H()函數(shù)$H()函數(shù)把一些對象轉(zhuǎn)換成一個可枚舉的和聯(lián)合數(shù)組類似的Hash對象.<script〉functiontestHash(){//let'screatetheobjectvara={first:10,second:20,third:30};//nowtransformioahashvarh=$H(a);alert(h。toQueryString());//displays:first=10&second=20&third=30}</script〉使用$R()函數(shù)$R()是newObjectRange(lowBound,upperBound,excludeBounds)的縮寫。跳到HYPERLINK”http://b/thinhunan/archive/2006/04/01/developernotesforprototype.html”\l"Reference。ObjectRange#Reference。ObjectRange”ObjectRange類文檔可以看到一個關(guān)于此類的完整描述.此時,我們還是先來看一個例子以展示這個縮寫能代替哪些方法吧。其它相關(guān)的一些知識可以在HYPERLINK"http://wblog/thinhunan/archive/2006/04/01/developernotesforprototype.html”\l"Reference.Enumerable#Reference.Enumerable"Enumerable對象文檔中找到。〈script>functiondemoDollar_R(){varrange=$R(10,20,false);range。each(function(value,index){alert(value);});}〈/script>〈inputtype="button”value=”SampleCount"onclick=”demoDollar_R();”〉使用Try.these()函數(shù)Try.these()方法使得實現(xiàn)當(dāng)你想調(diào)用不同的方法直到其中的一個成功正常的這種需求變得非常容易,他把一系列的方法作為參數(shù)并且按順序的一個一個的執(zhí)行這些方法直到其中的一個成功執(zhí)行,返回成功執(zhí)行的那個方法的返回值。在下面的例子中,xmlNode.text在一些瀏覽器中好用,但是xmlNode。textContent在另一些瀏覽器中正常工作。使用Try。these()方法我們可以得到正常工作的那個方法的返回值。<script>?functiongetXmlNodeValue(xmlNode){?
returnTry。these(?
function(){returnxmlNode。text;},?
function(){returnxmlNode。textContent;)
);
}?〈/script〉
Ajax對象上面提到的共通方法非常好,但是面對它吧,它們不是最高級的那類東西.它們是嗎?你很可能自己編寫了這些甚至在你的腳本里面有類似功能的方法。但是這些方法只是冰山一角。我很肯定你對prototype。js感興趣的原因很可能是由于它的AJAX能力。所以讓我們解釋當(dāng)你需要完成AJAX邏輯的時候,這個包如何讓它更容易。Ajax對象是一個預(yù)定義對象,由這個包創(chuàng)建,為了封裝和簡化編寫HYPERLINK"http://en.wikiped/wiki/Ajax_%28programming%29”\t”_top"AJAX功能涉及的狡猾的代碼。這個對象包含一系列的封裝AJAX邏輯的類。我們來看看其中幾個類。使用Ajax。Request類如果你不使用任何的幫助程序包,你很可能編寫了整個大量的代碼來創(chuàng)建XMLHttpRequest對象并且異步的跟蹤它的進(jìn)程,然后解析出響應(yīng)然后處理它.當(dāng)你不需要支持多于一種類型的瀏覽器時你會感到非常的幸運。為了支持AJAX功能。這個包定義了Ajax。Request類。假如你有一個應(yīng)用程序可以通過urlhttp://yoursever/app/get_sales?empID=1234&year=1998與服務(wù)器通信.它返回下面這樣的XML響應(yīng).<?xmlversion="1。0"encoding=”utf-8"?〉<ajax-response>〈responsetype="object”id="productDetails"〉<monthly—sales〉〈employee—sales><employee—id〉1234</employee—id><year-month〉1998-01</year—month〉<sales〉$8,115.36〈/sales>〈/employee-sales>〈employee-sales><employee—id>1234〈/employee—id〉<year—month>1998—02〈/year-month〉<sales>$11,147。51〈/sales〉〈/employee—sales></monthly—sales〉〈/response〉〈/ajax-response>用Ajax。Request對象和服務(wù)器通信并且得到這段XML是非常簡單的。下面的例子演示了它是如何完成的.〈script>functionsearchSales(){varempID=$F(’lstEmployees’);vary=$F('lstYears’);varurl='http://yoursever/app/get_sales';varpars=’empID='+empID+’&year='+y;varmyAjax=newAjax。Request(url,{method:'get’,parameters:pars,onComplete:showResponse});}functionshowResponse(originalRequest){//putreturnedXMLinthetextarea$('result’)。value=originalRequest.responseText;}</script><selectid=”lstEmployees”size="10”onchange=”searchSales()"〉<optionvalue=”5”>Buchanan,Steven〈/option〉〈optionvalue=”8”〉Callahan,Laura</option><optionvalue="1">Davolio,Nancy</option></select〉<selectid="lstYears"size=”3”onchange=”searchSales()”〉<optionselected=”selected”value=”1996”>1996〈/option><optionvalue=”1997">1997</option〉〈optionvalue="1998"〉1998</option〉</select>〈br〉<textareaid=resultcols=60rows=10>〈/textarea〉你注意到傳入Ajax。Request構(gòu)造方法的第二個對象了嗎?參數(shù){method:’get’,parameters:pars,onComplete:showResponse}表示一個匿名對象的真實寫法。他表示你傳入的這個對象有一個名為method值為'get’的屬性,另一個屬性名為parameters包含HTTP請求的查詢字符串,和一個onComplete屬性/方法包含函數(shù)showResponse.還有一些其它的屬性可以在這個對象里面定義和設(shè)置,如asynchronous,可以為true或false來決定AJAX對服務(wù)器的調(diào)用是否是異步的(默認(rèn)值是true)。這個參數(shù)定義AJAX調(diào)用的選項。在我們的例子中,在第一個參數(shù)通過HTTPGET命令請求那個url,傳入了變量pars包含的查詢字符串,Ajax。Request對象在它完成接收響應(yīng)的時候?qū)⒄{(diào)用showResponse方法。也許你知道,XMLHttpRequest在HTTP請求期間將報告進(jìn)度情況。這個進(jìn)度被描述為四個不同階段:Loading,Loaded,Interactive,或Complete.你可以使Ajax.Request對象在任何階段調(diào)用自定義方法,Complete是最常用的一個。想調(diào)用自定義的方法只需要簡單的在請求的選項參數(shù)中的名為onXXXXX屬性/方法中提供自定義的方法對象。就像我們例子中的onComplete。你傳入的方法將會被用一個參數(shù)調(diào)用,這個參數(shù)是XMLHttpRequest對象自己。你將會用這個對象去得到返回的數(shù)據(jù)并且或許檢查包含有在這次調(diào)用中的HTTP結(jié)果代碼的status屬性。還有另外兩個有用的選項用來處理結(jié)果。我們可以在onSuccess選項處傳入一個方法,當(dāng)AJAX無誤的執(zhí)行完后調(diào)用,相反的,也可以在onFailure選項處傳入一個方法,當(dāng)服務(wù)器端出現(xiàn)錯誤時調(diào)用。正如onXXXXX選項傳入的方法一樣,這兩個在被調(diào)用的時候也傳入一個帶有AJAX請求的XMLHttpRequest對象。我們的例子沒有用任何有趣的方式處理這個XML響應(yīng),我們只是把這段XML放進(jìn)了一個文本域里面。對這個響應(yīng)的一個典型的應(yīng)用很可能就是找到其中的想要的信息,然后更新頁面中的某些元素,或者甚至可能做某些XSLT轉(zhuǎn)換而在頁面中產(chǎn)生一些HTML。
在1.4.0版本中,一種新的事件回傳外理被引入。如果你有一段代碼總是要為一個特殊的事件執(zhí)行,而不管是哪個AJAX調(diào)用引發(fā)它,那么你可以使用新的HYPERLINK”http://wwblogs.com/thinhunan/archive/2006/04/01/developernotesforprototype。html"\l”Ajax.Responders#Ajax。Responders"Ajax.Responders對象。假設(shè)你想要在一個AJAX調(diào)用正在運行時,顯示一些提示效果,像一個不斷轉(zhuǎn)動的圖標(biāo)之類的,你可以使用兩個全局事件Handler來做到,其中一個在第一個調(diào)用開始時顯示圖標(biāo),另一個在最后一個調(diào)用完成時隱藏圖標(biāo)??聪旅娴睦?。<script>varmyGlobalHandlers={onCreate:function(){Element。show(’systemWo(hù)rking’);},onComplete:function(){if(Ajax.activeRequestCount==0){Element.hide(’systemWorking');}}};Ajax。Responders.register(myGlobalHandlers);〈/script〉〈divid=’systemWorking'>〈imgsrc=’spinner.gif’〉Loading。.?!?div>更完全的解釋,請參照HYPERLINK"blogs。com/thinhunan/archive/2006/04/01/developernotesforprototype.html”\l”ajax_request_reference#ajax_request_reference”\o”4.14。
Ajax。Request類"Ajax。Request參考和HYPERLINK"http://www.cnb/thinhunan/archive/2006/04/01/developernotesforprototype.html”\l"options_reference#options_reference”\o”4.15.
options參數(shù)對象"Ajax選項參考。使用Ajax.Updater類如果你的服務(wù)器的另一端返回的信息已經(jīng)是HTML了,那么使用這個程序包中Ajax.Updater類將使你的生活變得更加得容易。用它你只需提供哪一個元素需要被AJAX請求返回的HTML填充就可以了,例子比我寫說明的更清楚。
<script>functiongetHTML(){varurl=’http://yourserver/app/getSomeHTML’;varpars=’someParameter=ABC';varmyAjax=newAjax.Updater('placeholder’,url,{method:'get’,parameters:pars});}</script>〈inputtype=buttonvalue=GetHtmlonclick="getHTML()”>〈divid=”placeholder”></div〉你可以看到,這段代碼比前面的例子更加簡潔,不包括onComplete方法,但是在構(gòu)造方法中傳入了一個元素id。我們來稍稍修改一下代碼來描述如何在客戶端處理服務(wù)器段錯誤成為可能。我們將加入更多的選項,指定處理錯誤的一個方法。這個是用onFailure選項來完成的。我們也指定了一個placeholder只有在成功請求之后才會被填充.為了完成這個目的我們修改了第一個參數(shù)從一個簡單的元素id到一個帶有兩個屬性的對象,success(一切OK的時候被用到)和failure(有地方出問題的時候被用到)在下面的例子中沒有用到failure屬性,而僅僅在onFailure處使用了reportError方法。<script>?functiongetHTML()
{?varurl='http://yourserver/app/getSomeHTML’;
varpars='someParameter=ABC’;varmyAjax=newAjax.Updater({success:'placeholder’},url,{method:’get',parameters:pars,onFailure:reportError});}functionreportError(request){alert('Sorry。Therewasanerror.');}</script><inputtype=buttonvalue=GetHtmlonclick="getHTML()”〉<divid=”placeholder"〉〈/div〉如果你的服務(wù)器邏輯是連同HTML標(biāo)記返回JavaScript代碼,Ajax。Updater對象可以執(zhí)行那段JavaScript代碼.為了使這個對象對待響應(yīng)為JavaScript,你只需在最后參數(shù)的對象構(gòu)造方法中簡單加入evalScripts:true屬性.但是值得提醒的是,像這個選項名evalScripts暗示的,這些腳本會被執(zhí)行,但是它們不會被加入到Page的腳本中?!坝惺裁磪^(qū)別?”,可能你會這樣問。我們假定請求地址返回的東東像這樣:〈scriptlanguage=”javascript”type=”text/javascript”>functionsayHi(){alert('Hi’);}〈/script>〈inputtype=buttonvalue=”ClickMe"onclick="sayHi()"〉如果你以前這樣嘗試過,你知道這些腳本不會如你所期望的那樣工作,原因是這段腳本會被執(zhí)行,但像上面這樣的腳本執(zhí)行并不會創(chuàng)建一個名叫sayHi的函數(shù),它什么也不做.如果要創(chuàng)建一個函數(shù),我們應(yīng)當(dāng)把代碼改成下面這個樣子:<scriptlanguage=”javascript”type="text/javascript"〉sayHi=function(){alert(’Hi');};〈/script〉<inputtype=buttonvalue=”ClickMe"onclick=”sayHi()”〉為什么我們在上面的代碼中不使用var關(guān)鍵字來聲明這個變量呢(指sayHi
),因為那樣做創(chuàng)建出來的函數(shù)將只是當(dāng)前腳本塊的一個局部變量(至少在IE中是這樣)。不寫var關(guān)鍵字,創(chuàng)建出來的對象的作用域就是我們所期望的window.更多相關(guān)知識,請參看
HYPERLINK”http://www。cnblogs.com/thinhunan/archive/2006/04/01/developernotesforprototype。html”\l"Ajax.options#Ajax.options"optionsreference.枚舉...噢!噢!你知道,我們都是這樣來做循環(huán)的,建一個Array,用elements組織它們,再建一個循環(huán)結(jié)構(gòu)(例如for,foreach,while)通過index數(shù)字來訪問每一個element,再用這個element做一些動作.當(dāng)你想到這時,你會發(fā)現(xiàn)幾乎每次寫循環(huán)代碼你都會遲早用到一個Array。那么,如果Array對象能夠提供更多的功能給它們的迭代器使用不是很爽嗎?確實是這樣,事實上很多的編程語言都在它們的Array或其它類似的結(jié)構(gòu)中(如Collections,Lists)提供一些這樣的功能?,F(xiàn)在好了,prototype。js了給我們一個HYPERLINK"http://www.cnblogs.com/thinhunan/archive/2006/04/01/developernotesforprototype。html”\l”Reference。Enumerable#Reference。Enumerable"Enumerable對象,它實現(xiàn)了很多和可迭代數(shù)據(jù)進(jìn)行交互的竅門.和原有的JS對象相比prototype。js更上一層樓,它對HYPERLINK"http://www。cnbl/thinhunan/archive/2006/04/01/developernotesforprototype。html"\l"Reference.Array#Reference。Array"Array類s擴(kuò)展了所有枚舉要用的函數(shù).循環(huán),Ruby樣式的在標(biāo)準(zhǔn)的javascript中,如果你想把一個array中的所有elements顯示出來,你可以像下面代碼這樣寫得很好:〈script〉functionshowList(){varsimpsons=['Homer','Marge','Lisa’,'Bart’,’Meg’];for(i=0;i<simpsons.length;i++){alert(simpsons[i]);}}</script〉<inputtype=”button"value="ShowList"onclick=”showList();”>使用我們新的最好的朋友,prototype。js,我們可以把它生寫成這樣functionshowList(){varsimpsons=['Homer’,’Marge',’Lisa’,’Bart','Meg'];simpsons。each(function(familyMember){alert(familyMember);});}你可能會想“非常奇怪的方式..。相對舊的,這種語法太怪異了”。哦,在上面的例子,確實什么也沒有,在這個簡單得要死例子中,也沒有改變太多啊,盡管如此,請繼續(xù)讀下去。在繼續(xù)下面內(nèi)容之前,你注意到那個被做為一個參數(shù)傳遞給each函數(shù)的函數(shù)?我們把它理解成迭代器函數(shù).Yourarraysonsteroids就如我們上面提到的,把你的Array中的elements當(dāng)成相同的類型使用相同的屬性和函數(shù)是很通用(Common,不知該翻譯成通用還是庸俗)的。讓我們看看怎么樣利用我們新的馬力強(qiáng)勁的Arrays的迭代功能吧。依照標(biāo)準(zhǔn)找到一個element.<script>functionfindEmployeeById(emp_id){varlistBox=$('lstEmployees')varoptions=listBox.getElementsByTagName('option');options=$A(options);varopt=options。find(function(employee){return(employee。value==emp_id);});alert(opt。innerHTML);//displaystheemployeename}〈/script>〈selectid="lstEmployees"size=”10”>〈optionvalue="5">Buchanan,Steven〈/option>〈optionvalue="8”〉Callahan,Laura〈/option〉〈optionvalue="1">Davolio,Nancy</option〉〈/select><inputtype="button"value=”FindLaura”onclick=”findEmployeeById(8);"〉現(xiàn)在我們再下一城,看看如何過濾一個Array中的元素,從每個元素中得到我們想要的成員。〈script〉functionshowLocalLinks(paragraph){paragraph=$(paragraph);varlinks=$A(paragraph.getElementsByTagName(’a’));//findlinksthatdonotstartwith’http’varlocalLinks=links。findAll(function(link){varstart=link.href。substring(0,4);returnstart!='http’;});//nowthelinktextsvartexts=localLinks.pluck('innerHTML’);//gettheminasinglestringvarresult=texts.inspect();alert(result);}〈/script〉<pid="someText">This〈ahref="http://othersite。com/page.html”〉text</a〉hasa<ahref=”#localAnchor”〉lot〈/a〉of〈ahref="#otherAnchor”〉links</a>.Someare〈ahref="http://wherever。com/page.html”>external</a>andsomeare〈ahref="#someAnchor”>local〈/a〉〈/p>〈inputtype=buttonvalue="FindLocalLinks”onclick="showLocalLinks('someText')”〉上面的代碼僅僅是一點小小的實踐讓人愛上這種語法。請參看HYPERLINK”http://blogs。com/thinhunan/archive/2006/04/01/developernotesforprototype.html”\l"Reference。Enumerable#Reference.Enumerable"Enumerable和HYPERLINK"http://wblogs.com/thinhunan/archive/2006/04/01/developernotesforprototype.html”Array的所有函數(shù)
prototype。js參考JavaScript類擴(kuò)展prototype。js類庫實現(xiàn)強(qiáng)大功能的一種途徑是擴(kuò)展已有的JavaScript類。對Object的擴(kuò)展MethodKindArgumentsDescriptionextend(destination,source)stat(yī)icdestination:anyobject,source:anyobject提供一種通過拷貝所有源以象屬性和函數(shù)到目標(biāo)函數(shù)實現(xiàn)繼承的方法inspect(targetObj)stat(yī)ictargetObj:anyobject返回可讀性好關(guān)于目標(biāo)對象的文字描述,如果對象實例沒有定義一個inspect函數(shù),默認(rèn)返回toString函數(shù)的值。對Number的擴(kuò)展MethodKindArgumentsDescriptiontoColorPart()instance(none)返回數(shù)字的十六進(jìn)制表示形式.在把一個RGB數(shù)字轉(zhuǎn)換成HTML表現(xiàn)形式時很有用.succ()instance(none)
返回下一個數(shù)字,這個方法可用于迭代調(diào)用場景中.times(iterat(yī)or)instanceiterator:afunctionobjectconformingtoFunction(index)Callstheiteratorfunctionrepeatedlypassingthecurrentindexintheindexargument。反復(fù)調(diào)用iterator函數(shù)并傳遞當(dāng)前index到iterator的index參數(shù)。下面的例子用提示框顯示0—9.〈script>functiondemoTimes(){varn=10;n。times(function(index){alert(index);});/****************************youcouldhavealsoused:*(10).times(...。);***************************/}</script>〈inputtype=buttonvalue="TestNumber.times()”onclick=”demoTimes()”〉對Function擴(kuò)展MethodKindArgumentsDescriptionbind(object)instanceobject:theobjectthatownsthemethod返回function的實例,這個實例和源function的結(jié)構(gòu)一樣,但是它已被綁定給了參數(shù)中提供的object,就是說,function中的this指針指向參數(shù)object。bindAsEventListener(object)instanceobject:theobjectthatownsthemethod用法和上面的bind一樣,區(qū)別在于用來綁定事件。讓我們看看如何運用這些擴(kuò)展。<inputtype=checkboxid=myChkvalue=1〉Test?<script>//declaringtheclassvarCheckboxWat(yī)cher=Class。create();//definingtherestoftheclassimplementationCheckboxWatcher.prototype={initialize:function(chkBox,message){this.chkBox=$(chkBox);this.message=message;//assigningourmethodtotheeventthis。chkBox。onclick=this。showMessage.bindAsEventListener(this);},showMessage:function(evt){alert(this。message+'(’+evt.type+’)’);}};varwatcher=newCheckboxWatcher(’myChk’,'Changed’);</script>對String的擴(kuò)展MethodKindArgumentsDescriptionstripTags()instance(none)返回一個把所有的HTML或XML標(biāo)記都移除的字符串。stripScripts()instance(none)返回一個把所有的script都移除的字符串。escapeHTML()instance(none)返回一個把所有的HTML標(biāo)記合適的轉(zhuǎn)義掉的字符串。unescapeHTML()instance(none)escapeHTML()的反轉(zhuǎn)。extractScripts()instance(none)返回一個包含在string中找到的所有〈script>的數(shù)組。evalScripts()instance(none)執(zhí)行在string中找到的所有<script>。toQueryParams()instance(none)把querystring分割才一個用parametername做index的聯(lián)合Array,更像一個hash。parseQuery()instance(none)和toQueryParams()一樣.toArray()instance(none)把字符串轉(zhuǎn)換成字符數(shù)組.camelize()instance(none)轉(zhuǎn)換一個以連字符連接的字符串成一個駱駝法樣式的字符串.比如,這個函數(shù)在寫代碼時,把它做為一個樣式工具使用是很有用的.對
Array的擴(kuò)展因為array擴(kuò)展于enumerable,所以所有enumberable對象的函數(shù),array都是可以使用的,除此之外,下面的這些也是已經(jīng)實現(xiàn)了的。MethodKindArgumentsDescriptionclear()instance(none)清空.compact()instance(none)返回一個不包括源array中null或undefined元素的array,此方法不改變源array。first()instance(none)返回array的第一個對象。flat(yī)ten()instance(none)通過遞歸組合array每個元素的子元素(如果該元素也是array)來返回一個“扁平的”一維的array。indexOf(value)instancevalue:what(yī)youarelookingfor.返回給出數(shù)字位置(從0算起)的元素,如果在該位置沒有找到對象,返回—1。inspect()instance(none)重載inspect(),返回更好格式的反映Array每個元素的字符描述.last()instance(none)返回最后一個元素.reverse([applyToSelf])instanceapplyToSelf:indicatesifthearrayitselfshouldalsobereversed。
反轉(zhuǎn)Array中元素的順序,如果沒有給出參數(shù),或參數(shù)為true,則源Array中元素的順序也反轉(zhuǎn),否則源Array保持不變。shift()instance(none)返回Array的第一個元素并從Array中移除它,Array的Length—1。without(value1[,value2[,。.valueN]])instancevalue1.。。valueN:valuestobeexcludedifpresentinthearray.
返回一個把參數(shù)列表中包含的元素從源Array中排除的Array。documentDOM擴(kuò)展MethodKindArgumentsDescriptiongetElementsByClassName(className[,parentElement])instanceclassName:nameofaCSSclassassociatedwiththeelements,parentElement:objectoridoftheelementthatcontainstheelementsbeingretrieved.返回所有CSSclassName屬性等于className參數(shù)的元素,如果沒有給出parentElement,那么將搜索documentbody。(此處使用document。body我覺得不如使用document,因為有時有的頁面沒有body)
Event擴(kuò)展PropertyTypeDescriptionKEY_BACKSPACENumberNumber8:Constant.CodefortheBackspacekey。KEY_TABNumber9:Constant。CodefortheTabkey。KEY_RETURNNumber13:Constant。CodefortheReturnkey.KEY_ESCNumber27:Constant.CodefortheEsckey.KEY_LEFTNumber37:Constant。CodefortheLeftarrowkey.KEY_UPNumber38:Constant。CodefortheUparrowkey。KEY_RIGHTNumber39:Constant.CodefortheRightarrowkey.KEY_DOWNNumber40:Constant。CodefortheDownarrowkey。KEY_DELETENumber46:Constant。CodefortheDeletekey。observers:ArrayListofcachedobservers。Partoftheinternalimplementationdetailsoftheobject.MethodKindArgumentsDescriptionelement(event)staticevent:anEventobject返回事件源對象。isLeftClick(event)staticevent:anEventobject如果點擊了鼠標(biāo)左鍵,返回true。pointerX(event)staticevent:anEventobject返回鼠標(biāo)的X座標(biāo)。pointerY(event)staticevent:anEventobject返回鼠標(biāo)的Y座標(biāo)。stop(event)stat(yī)icevent:anEventobject使用此函數(shù)來中斷事件的默認(rèn)行為并阻止傳遞(冒泡).findElement(event,tagName)stat(yī)icevent:anEventobject,tagName:nameofthedesiredtag。從事件源對象開始向上搜索DOM樹,直到找到第一個符合tagName的元素observe(element,name,observer,useCapture)staticelement:objectorid,name:eventname(like'click’,’load’,etc),observer:functiontohandletheevent,useCapture:iftrue,handlestheeventinthecapturephaseandiffalseinthebubblingphase。為對象的某個事件增加一個處理函數(shù).stopObserving(element,name,observer,useCapture)staticelement:objectorid,name:eventname(like'click'),observer:functionthatishandlingtheevent,useCapture:iftruehandlestheeventinthecapturephaseandiffalseinthebubblingphase.和上面的函數(shù)相反。_observeAndCache(element,name,observer,useCapture)static
私有函數(shù),別管它。unloadCache()static(none)私有函數(shù),別管它.從內(nèi)存中清除所有的observers緩存。下面代碼演示如何給window添加一個load事件處理函數(shù).<script>Event.observe(window,'load',showMessage,false);functionshowMessage(){alert('Pageloaded。');}</script〉在prototype。js中定義新的對象和類另一個這個程序包幫助你的地方就是提供許多既支持面向?qū)ο笤O(shè)計理念又有共通功能的許多對象.ThePeriodicalExecuterobject這個對象提供一定間隔時間上重復(fù)調(diào)用一個方法的邏輯。MethodKindArgumentsDescription[ctor](callback,interval)constructorcallback:aparameterlessfunction,interval:numberofseconds創(chuàng)建這個對象的實例將會重復(fù)調(diào)用給定的方法。PropertyTypeDescriptioncallbackFunction()被調(diào)用的方法,該方法不能傳入?yún)?shù).frequencyNumber以秒為單位的間隔。currentlyExecutingBoolean表示這個方法是否正在執(zhí)行.ThePrototypeobjectPrototype沒有太重要的作用,只是聲明了該程序包的版本。PropertyTypeDescriptionVersionString版本.emptyFunctionFunction()空函數(shù)。KFunction(obj)一個僅僅回傳參數(shù)的函數(shù)。ScriptFragmentString識別script的正則式。TheEnumerableobjectEnumberable對象能夠已更優(yōu)雅的方式實現(xiàn)對列表樣式的結(jié)構(gòu)進(jìn)行枚舉。很多其它的對象通過擴(kuò)展自Enumberable對象來得到這些有用的接口。MethodKindArgumentsDescriptioneach(iterator)instanceiterat(yī)or:afunctionobjectconformingtoFunction(value,index)把每個element做為第一個參數(shù),element的index作為第一個參數(shù)調(diào)用iterator函數(shù).all([iterator])instanceiterator:afunctionobjectconformingtoFunction(value,index)這個函數(shù)會用給出的iterator測試整個集合,如果集合中任一元素在iterator函數(shù)測試中返回false或null,那么這個函數(shù)返回false,否則返回true。如果沒有給出iterator,那么就會測試所有的元素是不是不等于false和null.你可以簡單的把它看成是“檢測每個元素都為非空非負(fù)"。any(iterator)instanceiterat(yī)or:afunctionobjectconformingtoFunction(value,index),optional.這個函數(shù)會用給出的iterator測試整個集合,如果集合中任一元素在iterat(yī)or函數(shù)測試中返回true,那么這個函數(shù)返回true,否則返回false.如果沒有給出iterator,那么就會測試所有的元素是不是有一個不等于false和null。你可以簡單的把它看成是“檢測元素中是不是有非空非負(fù)的”。collect(iterator)instanceiterator:afunctionobjectconformingtoFunction(value,index)
調(diào)用iterator函數(shù)根據(jù)集合中每個元素返回一個結(jié)果,然后按照原來集合中的順序,返回一個Array。detect(iterator)instanceiterator:afunctionobjectconformingtoFunction(value,index)集合中每個元素調(diào)用一次Iterator,返回第一個使Iterat(yī)or返回True的元素,如果最終都沒有為true的調(diào)用,那么返回null。entries()instance(none)等于toArray()。find(iterat(yī)or)instanceiterat(yī)or:afunctionobjectconformingtoFunction(value,index)等于detect().findAll(iterator)instanceiterat(yī)or:afunctionobjectconformingtoFunction(value,index)集合中每個元素調(diào)用Iterat(yī)or,返回一個由所有調(diào)用Iterat(yī)or返回結(jié)果等于true的元素組成的數(shù)組.和reject()相反。grep(pattern[,iterator])instancepattern:aRegExpobjectusedtomatchtheelements,iterat(yī)or:afunctionobjectconformingtoFunction(value,index)
用pattern參數(shù)正則表達(dá)式測試集合中的每個元素,返回一個包含所有匹配正則式的元素的Array,如果給出了Iterator,那個每個結(jié)果還要經(jīng)過一下Iterator處理.include(obj)instanceobj:anyobject
判斷集合中包不包含指定對象.inject(initialValue,iterat(yī)or)instanceinitialValue:anyobjecttobeusedastheinitialvalue,iterator:afunctionobjectconformingtoFunction(accumulator,value,index)
用Iterator聯(lián)接所有集合中的元素。Iterator在被調(diào)用時把上一次迭代的結(jié)果做為第一個參數(shù)傳給accumulat(yī)or。第一次迭代時,accurmelat(yī)or等于initialValue,最后返回accumulator的值。invoke(methodName[,arg1[,arg2[。。。]]])instancemethodName:nameofthemethodthatwillbecalledineachelement,arg1。.a(chǎn)rgN:argumentsthatwillbepassedinthemethodinvocat(yī)ion。集合中的每個元素調(diào)用指定的函數(shù)(查看源代碼可以發(fā)現(xiàn)指定函數(shù)被調(diào)用時,this指針被傳成當(dāng)前元素),并傳入給出的參數(shù),返回調(diào)用結(jié)果組成的Array.map(iterator)instanceiterat(yī)or:afunctionobjectconformingtoFunction(value,index)同collect()。max([iterator])instanceiterat(yī)or:afunctionobjectconformingtoFunction(value,index)返回集合中元素的最大值,或調(diào)用Iterator后返回值的最大值(如果給出了Iterator的話)。member(obj)instanceobj:anyobject同include().min([iterator])instanceiterator:afunctionobjectconformingtoFunction(value,index)返回最小值,參見max()。partition([iterator])instanceiterator:afunctionobjectconformingtoFunction(value,index)返回一個包含兩個Array的Array,第一個Array包含所有調(diào)用Iterator返回True的元素,第二個Array包含剩下的元素.如果Iterator沒有給出,那么就根據(jù)元素本身判斷。pluck(propertyName)instancepropertyNamenameofthepropertythatwillbereadfromeachelement。Thiscanalsocontaintheindexoftheelement返回每個元素的指定屬性名的屬性的值組成的Array.reject(iterator)instanceiterat(yī)or:afunctionobjectconformingtoFunction(value,index)和
findAll()相反(返回所有等于false的元素).select(iterator)instanceiterator:afunctionobjectconformingtoFunction(value,index)同findAll().sortBy(iterator)instanceiterator:afunctionobjectconformingtoFunction(value,index)根據(jù)每個元素調(diào)用Iterator返回的值進(jìn)行排序返回一個Array。toArray()instance(none)返回由集合所有元素組成的一個Array。zip(collection1[,collection2[,。。。collectionN[,transform]]])instancecollection1。。collectionN:enumerationsthatwillbemerged,transform:afunctionobjectconformingtoFunction(value,index)合并每個給出的集合到當(dāng)前集合。合并操作返回一個新的array,這個array的元素個數(shù)和原集合的元素個數(shù)一樣,這個array的每個元素又是一個子array,它合并了所有集合中相同index的元素.如果transform函數(shù)被指定,那么array的每個元素還會調(diào)用transform函數(shù)先做處理.舉個例子:[1,2,3]。zip([4,5,6],[7,8,9]).inspect()
返回”[[1,4,7],[2,5,8],[3,6,9]]”TheHashobject
Hash對象實現(xiàn)一種Hash結(jié)構(gòu),也就是一個Key:Value對的集合.Hash中的每個Item是一個有兩個元素的array,前一個是Key,后一個是Value,每個Item也有兩個不需加以說明的屬性,key和value。MethodKindArgumentsDescriptionkeys()instance(none)返回所有Item的key的集合的一個array.values()instance(none)返回所有Item的value的集合的一個array。merge(otherHash)instanceotherHash:Hashobject合并給出的Hash,返回一個新Hash。toQueryString()instance(none)以QueryString那樣的樣式返回hash中所有的item,例如:’key1=value1&key2=value2&key3=value3’inspect()instance(none)用一種合適的方法顯示hash中的key:value對。TheObjectRangeclass繼承自
HYPERLINK"http://www。cnblogs。com/thinhunan/archive/2006/04/01/developernotesforprototype.html”\l"Reference.Enumerable#Reference.Enumerable"Enumerable用上、下邊界描述一個對象區(qū)域.PropertyTypeKindDescriptionstart(any)instancerange的下邊界end(any)instancerange的上邊界exclusiveBooleaninstance決定邊界自身是不是range的一部分。MethodKindArgumentsDescription[ctor](start,end,exclusive)constructorstart:thelowerbound,end:theupperbound,exclusive:includetheboundsintherange?創(chuàng)建一個range對象,從start生成到end,這里要注意的是,start和end必段類型一致,而且該類型要有succ()方法。include(searchedValue)instancesearchedValue:valuethatwearelookingfor檢查一個value是不是在range中。TheClassobject在這個程序包中Class對象在聲明其他的類時候被用到。用這個對象聲明類使得新類支持initialize()方法,他起構(gòu)造方法的作用。看下面的例子//declaringtheclass?varMySampleClass=Class。create();
?//definingtherestoftheclassimplmentat(yī)ion
MySampleClass.prototype={??
initialize:function(message){
this。message=message;?
},
?
showMessage:function(ajaxResponse){?
alert(this.message);?
}?};
?//now,let’sinstantiateanduseoneobject
varmyTalker=newMySampleClass('hithere。');?myTalker.showMessage();//displaysalertMethodKindArgumentsDescriptioncreate(*)instance(any)定義新類的構(gòu)造方法。TheAjaxobject這個對象被用作其他提供AJAX功能的類的根對象。
PropertyTypeKindDescriptionactiveRequestCountNumberinstance正在處理中的Ajax請求的個數(shù)。MethodKindArgumentsDescriptiongetTransport()instance(none)返回新的XMLHttpRequest對象。TheAjax。Respondersobject繼承自HYPERLINK”http://www.cnblogs.com/thinhunan/archive/2006/04/01/developernotesforprototype.html"\l"Ajax。Base#Ajax。Base"Ajax。Base封裝AJAX操作PropertyTypeKindDescriptionEventsArraystatic在AJAX操作中所有可能報告的事件/狀態(tài)的列表。這個列表包括:’Uninitialized','Loading’,'Loaded',’Interactive',和’Complete'。transportXMLHttpRequestinstance承載AJAX操作的XMLHttpRequest對象。urlstringinstance請求的URL。MethodKindArgumentsDescription[ctor](url,options)constructorurl:theurltobefetch
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- Unit2 Topic3 教學(xué)設(shè)計 2024-2025學(xué)年仁愛科普版八年級英語上冊
- 序言 物理學(xué):研究物質(zhì)及其運動規(guī)律的科學(xué) 教學(xué)設(shè)計-2023-2024學(xué)年高一上學(xué)期物理人教版(2019)必修第一冊
- 5《我們的校園》(教學(xué)設(shè)計)-2023-2024學(xué)年道德與法治一年級上冊統(tǒng)編版
- 信息技術(shù)與數(shù)學(xué)學(xué)科的融合教學(xué)-用Python作二次函數(shù)圖像教學(xué)設(shè)計2024-2025學(xué)年人教版九年級上冊第22章
- Unit3 Learning Lesson 4(教學(xué)設(shè)計)-2024-2025學(xué)年北師大版(三起)(2024)英語三年級上冊
- 粵教版高中信息技術(shù)選修1教學(xué)設(shè)計-2.1.1 VB語言概述
- 中國全不銹鋼污物車項目投資可行性研究報告
- 2025年高光純黑色漿項目投資可行性研究分析報告
- 辦公樓裝修改造項目資金來源
- Unit 1 Make friends Part C Reading time(教學(xué)設(shè)計)-2024-2025學(xué)年人教PEP版(2024)英語三年級上冊
- 5000只淮山羊和波爾山羊雜交良種養(yǎng)殖場建設(shè)項目可行性研究報告
- GB/T 5534-2008動植物油脂皂化值的測定
- GB/T 12771-2019流體輸送用不銹鋼焊接鋼管
- 測量管理體系內(nèi)審檢查表
- 工程驗收及移交管理方案
- 心臟手術(shù)麻醉的一般流程課件
- 圖片編輯概述課件
- 2023年岳陽職業(yè)技術(shù)學(xué)院單招職業(yè)技能考試筆試題庫及答案解析
- 信號與系統(tǒng)復(fù)習(xí)題及答案
- 北師大版八年級數(shù)學(xué)上冊《認(rèn)識無理數(shù)(第2課時)》參考課件2
- 中級建構(gòu)筑物消防員理論綜合模擬題01原題
評論
0/150
提交評論