prototype1.5 初體驗第1/2頁

2019-11-21 02:30:51

字體：大中小

來源：轉載

供稿：網友

一直沒有沒有時間看prototype,現在好了，已經更新到了1.5 pre1,呵呵,強大的功能不得不學習啊,這個是提升自己JS能力的又一個捷徑.

1. Prototype是什么?
或許你還沒有用過它， prototype.js 是一個由Sam Stephenson寫的JavaScript包。這個構思奇妙編寫良好的一段兼容標準的一段代碼將承擔創造胖客戶端，高交互性WEB應用程序的重擔。輕松加入Web 2.0特性。

如果你最近體驗了這個程序包，你很可能會發現文檔并不是它的強項之一。像所有在我之前的開發者一樣，我只能一頭扎進prototype.js的源代碼中并且試驗其中的每一個部分。我想當我學習他的時候記寫筆記然后分享給其他人將會很不錯。

我也一起提供了這個包的對象，類，方法和擴展的非官方參考。

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

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

復制代碼代碼如下:

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

這樣的改變有什么益處呢？我覺得一來是更面向對象了，二來就是便于將來IDE里的代碼提示。

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

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

復制代碼代碼如下:

<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> 

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

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

復制代碼代碼如下:

<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() 方法使得實現當你想調用不同的方法直到其中的一個成功正常的這種需求變得非常容易，他把一系列的方法作為參數并且按順序的一個一個的執行這些方法直到其中的一個成功執行，返回成功執行的那個方法的返回值。

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

復制代碼代碼如下:

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

12 下一頁閱讀全文

上一篇：prototype 源碼中文說明之 prototype.js

下一篇：JS+CSS模擬IP輸入框