快捷導(dǎo)航

prototype1.5 初體驗(yàn)第1/2頁

更新時(shí)間：2006年09月22日 00:00:00 作者：

一直沒有沒有時(shí)間看prototype,現(xiàn)在好了，已經(jīng)更新到了1.5 pre1,呵呵,強(qiáng)大的功能不得不學(xué)習(xí)啊,這個(gè)是提升自己JS能力的又一個(gè)捷徑.

1. Prototype是什么?
或許你還沒有用過它， prototype.js 是一個(gè)由Sam Stephenson寫的JavaScript包。這個(gè)構(gòu)思奇妙編寫良好的一段兼容標(biāo)準(zhǔn)的一段代碼將承擔(dān)創(chuàng)造胖客戶端，高交互性WEB應(yīng)用程序的重?fù)?dān)。輕松加入Web 2.0特性。

如果你最近體驗(yàn)了這個(gè)程序包，你很可能會(huì)發(fā)現(xiàn)文檔并不是它的強(qiáng)項(xiàng)之一。像所有在我之前的開發(fā)者一樣，我只能一頭扎進(jìn)prototype.js的源代碼中并且試驗(yàn)其中的每一個(gè)部分。我想當(dāng)我學(xué)習(xí)他的時(shí)候記寫筆記然后分享給其他人將會(huì)很不錯(cuò)。

我也一起提供了這個(gè)包的對(duì)象，類，方法和擴(kuò)展的非官方參考。

2. 通用性方法
這個(gè)程序包里面包含了許多預(yù)定義的對(duì)象和通用性方法。編寫這些方法的明顯的目的就是為了減少你大量的重復(fù)編碼和慣用法。

從Prototype1.5.x版本開始，你可以更方便的如下面代碼一樣操作DOM對(duì)象了:

復(fù)制代碼代碼如下:

var ele = $("myelement"); 
ele.hide(); //隱藏DOM對(duì)象對(duì)比從前的版本var ele = $("myelement"); 
Element.hide(ele); //隱藏DOM對(duì)象 

這樣的改變有什么益處呢？我覺得一來是更面向?qū)ο罅?，二來就是便于將來IDE里的代碼提示。

2.1. 使用 $()方法
$() 方法是在DOM中使用過于頻繁的 document.getElementById() 方法的一個(gè)便利的簡寫，就像這個(gè)DOM方法一樣，這個(gè)方法返回參數(shù)傳入的id的那個(gè)元素。

比起DOM中的方法，這個(gè)更勝一籌。你可以傳入多個(gè)id作為參數(shù)然后 $() 返回一個(gè)帶有所有要求的元素的一個(gè) Array 對(duì)象。下面的例子會(huì)向你描述這些。

復(fù)制代碼代碼如下:

<HTML> 
<HEAD> 
<TITLE> Test Page </TITLE> 
<script src="prototype-1.3.1.js"></script> 

<script> 
    function test1() 
    { 
        var d = $('myDiv'); 
        alert(d.innerHTML); 
    } 

    function test2() 
    { 
        var divs = $('myDiv','myOtherDiv'); 
        for(i=0; i<divs.length; i++) 
        { 
            alert(divs[i].innerHTML); 
        } 
    } 
</script> 
</HEAD> 

<BODY> 
    <div id="myDiv"> 
        <p>This is a paragraph</p> 
    </div> 
    <div id="myOtherDiv"> 
        <p>This is another paragraph</p> 
    </div> 

    <input type="button" value=Test1 onclick="test1();"><br> 
    <input type="button" value=Test2 onclick="test2();"><br> 
</BODY> 
</HTML> 

這個(gè)方法的另一個(gè)好處就是你可以傳入id字符串或者元素對(duì)象自己，這使得在創(chuàng)建可以傳入任何形式參數(shù)的方法的時(shí)候，它變得非常有用。

2.2. 使用$F()方法
$F()方法是另一個(gè)非常受歡迎的簡寫。它可以返回任何輸入表單控件的值，如文本框或下拉框。這個(gè)方法可以傳入元素的id或者元素自己。

復(fù)制代碼代碼如下:

<script> 
    function test3() 
    { 
        alert(  $F('userName')  ); 
    } 
</script> 
<input type="text" id="userName" value="Joe Doe"><br>  
<input type="button" value=Test3 onclick="test3();"><br>

2.3. 使用Try.these()方法
Try.these() 方法使得實(shí)現(xiàn)當(dāng)你想調(diào)用不同的方法直到其中的一個(gè)成功正常的這種需求變得非常容易，他把一系列的方法作為參數(shù)并且按順序的一個(gè)一個(gè)的執(zhí)行這些方法直到其中的一個(gè)成功執(zhí)行，返回成功執(zhí)行的那個(gè)方法的返回值。

在下面的例子中， xmlNode.text在一些瀏覽器中好用，但是xmlNode.textContent在另一些瀏覽器中正常工作。使用Try.these()方法我們可以得到正常工作的那個(gè)方法的返回值。

復(fù)制代碼代碼如下:

<script> 
function getXmlNodeValue(xmlNode){ 
    return Try.these( 
        function() {return xmlNode.text;}, 
        function() {return xmlNode.textContent;) 
        ); 
} 
</script> 

12 下一頁閱讀全文