prototype 1.5相關知識及他人筆記
2024-09-06 12:44:17
供稿:網友
一直沒有沒有時間看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.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>