Chapter 1. Programming Guide
1.1. Prototype是什麼?
或許你還沒有用過它， prototype.js 是一個由Sam Stephenson寫的JavaScript包。這個構思奇妙編寫良好的一段相容標準的一段代碼將承擔創造胖用戶端， 高互動性WEB應用程式的重擔。輕鬆加入Web 2.0特性。
如果你最近體驗了這個程式包，你很可能會發現文檔並不是它的強項之一。像所有在我之前的開發人員一樣，我只能一頭紮進prototype.js的原始碼中並且實驗其中的每一個部分。 我想當我學習他的時候記寫筆記然後分享給其他人將會很不錯。
我也一起提供了這個包的對象，類，方法和擴充的 非官方參考 。
1.2. 關聯文章
進階JavaScript指南
1.3. 通用性方法
這個程式包裡麵包含了許多預定義的對象和通用性方法。編寫這些方法的明顯的目的就是為了減少你大量的重複編碼和慣用法。
1.3.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字串或者元素對象自己，這使得在建立可以傳入任何形式參數的方法的時候， 它變得非常有用。
1.3.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>1.3.3. 使用$A()方法
$A()方法把接收到的參數轉換成一個Array對象。
這個方法加上對Array類的擴充，可以很容易的轉換或者複製任意的列舉列表到Array對象， 一個被推薦使用的用法就是轉換DOM的NodeLists到一個普通的數組裡，可以被更廣泛高效的使用， 看下面的例子。
<script>
function showOptions(){
var someNodeList = $(`lstEmployees`).getElementsByTagName(`option`);
var nodes = $A(someNodeList);
nodes.each(function(node){
alert(node.nodeName + `: ` + node.innerHTML);
});
}
</script>
<select id="lstEmployees" size="10" >
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<input type="button" value="Show the options" onclick="showOptions();" > 1.3.4. 使用$H()方法
$H()方法把對象轉化成可枚舉的貌似聯合數組Hash對象。
<script>
function testHash()
{
//let`s create the object
var a = {
first: 10,
second: 20,
third: 30
};
//now transform it into a hash
var h = $H(a);
alert(h.toQueryString()); //displays: first=10&second=20&third=30
}
</script>
1.3.5. 使用$R()方法
$R()方法是new ObjectRange(lowerBound, upperBound, excludeBounds)的一個簡單快捷的使用方式。
ObjectRange類文檔裡面有完整的解釋。 同時，我們來看看一個簡單的例子， 來示範通過each方法遍曆的用法。 那個方法的更多解釋在Enumerable對象文檔裡面。
<script>
function demoDollar_R(){
var range = $R(10, 20, false);
range.each(function(value, index){
alert(value);
});
}
</script>
<input type="button" value="Sample Count" onclick="demoDollar_R();" > 1.3.6. 使用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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
