使用原型無痛的JavaScript-js教程-PHP中文網

Painless JavaScript Using Prototype

如果您在軌道上，則無需下載原型：它包含在發行版中。您可以通過將其放入頁面的中來包括在您的視圖中：

<%= javascript_include_tag 'prototype' %>

登入後複製

現在，讓我們開始！

>原型的小助手

使用原型的真正好處之一是它為非常常見的腳本任務提供的致命簡單輔助功能。 $函數已經引起了人們的關注。給它一個或多個元素ID，它將返回給它們的引用：

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

登入後複製

>它就像一個湯具。 GetElementById，令人驚訝的是，當您使用它時似乎更方便地編碼。

>另一個非常有用的功能是document.getElementsByClassName，它在錫上說的是：它佔用CSS類名稱，並返回該類別的所有元素列表：

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

登入後複製

>另外，在編寫本文時，原型版本1.5.0_rc0獲得了功能強大的$$函數，它允許您使用標準CSS選擇器語法選擇元素：>

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

登入後複製

>請注意，在撰寫本文時，除非您從顛覆中下載最新版本的原型，否則此功能將無法提供。

$F takes an ID and returns the value of any form field, for instance, a select box like this:

登入後複製

<select name="country" > <br>
  <option selected="selected" value="UK">United Kingdom</option> <br>
  <option value="FR">France</option> <br>
  ... <br>
</select> <br>
 <br>
$F('country') // 'UK'

登入後複製

使JavaScript吸吮

糟糕，我已經偷走了另一個JavaScript庫的標籤行。 JavaScript庫開發人員似乎無法嘗試使JavaScript像另一種語言一樣。 Mochikit的傢伙希望JavaScript成為Python，無數的程序員試圖製作JavaScript，例如Java，而原型試圖使其像Ruby一樣。原型可以擴展到JavaScript的核心，該核心可以（如果選擇使用它們）對您的編碼JavaScript的方法產生巨大影響。根據您的背景和大腦的工作方式，這可能對您有所幫助。

oo ruby（ish）方式：class.create and object.extend

class.greate方法允許您以更類似紅寶石的方式定義類，儘管這純粹是美學的，因為它本質上只是稱您將定義為構造函數定義的初始化方法，而不是採用傳統的JavaScript方法來創建具有構造函數的對象的傳統JavaScript方法。

但是，

var DOMTable = Class.create(); <br>
DOMTable.prototype = { <br>
  initialize : function(el) { <br>
    this.el = el; <br>
  }, <br>
  ... <br>
}

登入後複製

更強大的是愚蠢但有效的對象。 extend方法。它所做的只是將一個對象的屬性和方法複製到另一個對象，但其用途很多。這是一個快速的品嚐者：

// make a (shallow) copy of obj1 <br>
var obj2 = Object.extend({}, obj1); <br>
 <br>
var options = { <br>
  method : "post", <br>
  args : "" <br>
}; <br>
 <br>
// merges in the given options object to the default options object <br>
Object.extend(options, { <br>
  args : "data=454", <br>
  onComplete : function() { alert("done!"); } <br>
}); <br>
 <br>
options.method // "post" <br>
options.args // "ata=454" <br>
options.onComplete // function() { alert("done!"); }

登入後複製

>最常用的用來與另一個對象“混合”方法。例如，您可以創建一組可使某些DOM元素可排序的函數：>

然後，如果我們想從上面的可分配中使我們的滴滴使我們的滴滴混合在一起，則可以將這些方法混合到可滴的對象：>

<%= javascript_include_tag 'prototype' %>

登入後複製

現在，我們可以在表上調用這些方法：

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

登入後複製

>函數綁定

>原型還為函數對象添加了兩個真正有用的方法：綁定和bindaseVentListener。這些主要用於將函數綁定到特定對象，以便該關鍵字指向該對象。當您設置事件處理程序功能時，這非常有用。想像一下您嘗試這樣的事情：

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

登入後複製

傳統上，您會遇到一個錯誤，因為當事件觸發處理程序功能時，這是指myDiv元素，而不是myObject，因此此Mess.message不確定。您可以使用類似的綁定方法解決此問題：

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

登入後複製

>現在一切都很好，因為此關鍵字已綁定到myObject。除此之外，BindaseVentListener執行了同樣的事情，儘管它以跨瀏覽器兼容的方式將事件對像傳遞到您的函數，因此您不再需要擔心window。嘗試一下：

$F takes an ID and returns the value of any form field, for instance, a select box like this:

登入後複製

現在，我們的EventHandler函數可以訪問事件對象。有關這兩種方法的更多詳細信息，可以在其創建者的網站上獲得。

新的字符串和數字方法>

>原型已向內置的字符串對象添加了大量有用的方法。讓我們快速看一些最好的。

<select name="country" > <br>
  <option selected="selected" value="UK">United Kingdom</option> <br>
  <option value="FR">France</option> <br>
  ... <br>
</select> <br>
 <br>
$F('country') // 'UK'

登入後複製

var DOMTable = Class.create(); <br>
DOMTable.prototype = { <br>
  initialize : function(el) { <br>
    this.el = el; <br>
  }, <br>
  ... <br>
}

登入後複製

// make a (shallow) copy of obj1 <br>
var obj2 = Object.extend({}, obj1); <br>
 <br>
var options = { <br>
  method : "post", <br>
  args : "" <br>
}; <br>
 <br>
// merges in the given options object to the default options object <br>
Object.extend(options, { <br>
  args : "data=454", <br>
  onComplete : function() { alert("done!"); } <br>
}); <br>
 <br>
options.method // "post" <br>
options.args // "ata=454" <br>
options.onComplete // function() { alert("done!"); }

登入後複製

>原型也為數字添加了一個很好的方法。告別您的循環！

var Sortable = { <br>
  sortBy : function(func) { <br>
    ... <br>
  }, <br>
  sortByReversed : function(func) { <br>
    ... <br>
  }, <br>
  reset : function() { <br>
    ... <br>
  } <br>
};

登入後複製

>在這裡，Times方法採用的函數將被稱為給定的次數，並將當前迭代號作為參數傳遞。使用枚舉時，這種迭代函數的使用很常見，我們將在接下來討論。

迭代紅寶石方式：原型的隱藏寶石之一是枚舉的混合物和哈希對象，這些物體直接從紅寶石中煮出來。如果您不熟悉Ruby，請不要擔心。我將在這裡解釋這一切。我們將從枚舉開始。簡而言之，當我們使用object.extend向對象添加枚舉時，它為對象提供了許多真正有用的功能來使用其屬性。枚舉已添加到數組原型中，因此任何數組都具有這些新方法。以下是一些您可以使用新的“枚舉”數組來做的示例：

var myTable = new DOMTable("table-id"); <br>
Object.extend(myTable, Sortable);

登入後複製

// sort the table using the given function <br>
myTable.sortBy(function (itemA, itemB) { ... });

登入後複製

var myObject = new Object();  <br>
myObject.message = "Hello!";  <br>
myObject.eventHandler = function() {  <br>
  alert(this.message);  <br>
}  <br>
  <br>
$("mydiv").onmouseover = myObject.eventHandler;

登入後複製

$("mydiv").onmouseover = myObject.eventHandler.bind(myObject);

登入後複製

myObject.eventHandler = function(event) {  <br>
  alert(event.srcElement.nodeName);  <br>
}  <br>
  <br>
$("mydiv").onmouseover = myObject.eventHandler.bindAsEventListener(myObject);

登入後複製

為創建哈希，請在任何對像上調用魔術函數$ h。這將對象的所有屬性變成了一組鍵值對，並混合了枚舉。讓我們散發哈希：

// "backgroundColor"  <br>
"background-color".camelize()

登入後複製

>：

camelize turns hyphenated strings to camel case strings that you can use to work with CSS properties.

登入後複製

<%= javascript_include_tag 'prototype' %>

登入後複製

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

登入後複製

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

登入後複製

首先，如果您不是紅寶石主義者，枚舉和哈希似乎有些麻煩，但是我可以向您保證，一旦您開始使用它們，您會想知道為什麼您會願意讓RSI寫所有這些循環的RSI！當您將其中一個或多個一起使用時，您將意識到這些新方法的巨大力量。你可以 “>在Encyte Media中更詳細地閱讀有關枚舉和哈希的信息。

事件對像有助於提供許多人，這是JavaScript的聖杯：簡單，跨瀏覽器事件處理：

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

登入後複製

>以一種相當令人愉悅的方式，原型試圖通過在頁面卸載時自動刪除每個觀察者來避免IE中的討厭記憶洩漏。

不過，在我看來，這是一個相當不發達的事件處理解決方案，因此，可能值得考慮使用像Dean Edwards的Addevent一樣暫時使用的東西。

處理表單

表單和字段對象為使用表單和輸入字段的工作提供了許多簡單但方便的功能，以及支持原型AJAX實現的代碼。

形式對象

>通常，表單對象的方法以ID或對象引用元素的引用：>

字段對象

$F takes an ID and returns the value of any form field, for instance, a select box like this:

登入後複製

字段對象處理單個元素，其方法通常以與形式對象相似的方式對元素進行ID或對象引用：>

形式序列化

<select name="country" > <br>
  <option selected="selected" value="UK">United Kingdom</option> <br>
  <option value="FR">France</option> <br>
  ... <br>
</select> <br>
 <br>
$F('country') // 'UK'

登入後複製

在原型術語中，序列化表單意味著讀取所有表單的元素，並將它們變成與URL編碼的字符串（幾乎）相同的字符串（幾乎），如果您提交了表單，則會發送。例如，考慮以下形式：

請注意，表格巧妙地對訪問不同形式元素的方式之間的差異巧妙地平滑，以便正確處理輸入，選擇，複選框和無線電按鈕。 form.Serialize對於多個任務很有用，但是當我們與Ajax合作時，我們會很快就會出現。

var DOMTable = Class.create(); <br>
DOMTable.prototype = { <br>
  initialize : function(el) { <br>
    this.el = el; <br>
  }, <br>
  ... <br>
}

登入後複製

這些觀察者每秒檢查一下數據是否已更改，如果有的話，將調用mycallbackfunction。

第二種類型的觀察者是基於事件的，只有在為元素產生更改或點擊事件時才執行檢查。您可以這樣使用：

// make a (shallow) copy of obj1 <br>
var obj2 = Object.extend({}, obj1); <br>
 <br>
var options = { <br>
  method : "post", <br>
  args : "" <br>
}; <br>
 <br>
// merges in the given options object to the default options object <br>
Object.extend(options, { <br>
  args : "data=454", <br>
  onComplete : function() { alert("done!"); } <br>
}); <br>
 <br>
options.method // "post" <br>
options.args // "ata=454" <br>
options.onComplete // function() { alert("done!"); }

登入後複製

var Sortable = { <br>
  sortBy : function(func) { <br>
    ... <br>
  }, <br>
  sortByReversed : function(func) { <br>
    ... <br>
  }, <br>
  reset : function() { <br>
    ... <br>
  } <br>
};

登入後複製

var myTable = new DOMTable("table-id"); <br>
Object.extend(myTable, Sortable);

登入後複製

>如果您要觀察到支持事件處理程序的所有字段，這是一種更有效的觀察表格的方法。但是，如果您想注意不支持這些事件的元素的更改，請使用定期觀察者。

工作dom

>原型具有4個對象（元素，插入，觀察者和位置），可以在許多瀏覽器差異上進行各種形式的DOM操縱和平滑，從而使dom so屏幕上耗時令人髮指。與其將計算機扔出窗口，不如瀏覽本節。

元素對象

元素對像以您可能期望的那樣起作用：大多數元素方法只是將ID或對象引用您要操縱的元素。這是一些最有用的方法：

<%= javascript_include_tag 'prototype' %>

登入後複製

請參閱Sergio Pereira網站上的完整列表。

插入對象

我知道您在想什麼：這聽起來有些怪異，對嗎？好吧，插入對像在一個元素中和周圍添加了HTML塊。插入有4種類型：前後，頂部和底部。這是您在帶有ID“ mylement”元素之前添加一些html的方法：

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

登入後複製

此圖顯示了每種類型的插入將在何處刪除與給定元素有關的HTML內容。

使用原型無痛的JavaScript

位置對象

>位置對象提供多種方法，可以告訴您屏幕上給定的位置，並以跨瀏覽器兼容的方式提供有關該位置的信息。這應該從編寫動畫，效果和拖放代碼的編寫動畫，效果和拖放代碼中汲取很多麻煩。查看職位參考以獲取更多詳細信息。

在

上獲取您的Web 2.0

“終於！”您在想：“他開始了我們真正想知道的。”是的，我把它留在了最後，以進入原型的Ajax助手，因為它們建在我們一直在經歷的所有其他內容之上，並且在談論Ajax時，它有助於理解原型的形式序列化，觀察者和插入。

ajax，如果您在過去幾年中被埋葬在一個非常深的孔中，則指的是使用瀏覽器的XMLHTTPRequest對象（或等效）與服務器進行通信，而無需重新加載頁面。原型在大多數細節上都可以平滑，但是在Cameron Adams的本文中，您可以在本文中找到一些背景。

>所以，現在您都在抽一些Web 2.0操作，讓我們看一個非常簡單的Ajax請求：

ajax.Request構造函數採用URL和選項對象。在這種情況下，我們將一個參數（名稱）發送給Hello..php，並提醒其響應（或在錯誤時提醒錯誤）。值得花時間熟悉可用的選擇；以下是選項的概述，以及它們的默認值：>

使用原型無痛的JavaScript

>原型將自定義的HTTP標頭添加到其所有AJAX請求中，以便您的服務器應用程序可以檢測到它是AJAX調用，而不是正常調用。標題是：

<%= javascript_include_tag 'prototype' %>

登入後複製

這是用於檢測AJAX調用的示例PHP函數：>

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

登入後複製

使用這種方法，您可以編寫AJAX應用程序，即使用戶使用舊瀏覽器或已禁用JavaScript，也可以使用JJAX應用程序，但這是其他文章……>

使用form.serialize將數據傳遞到ajax.request

> 如上所述，參數選項用於傳遞URL編碼的變量字符串。如果您需要發送的數據是由表單設置的，就像大多數AJAX應用程序一樣，您可以簡單地使用表單。 Serialize從所有表單字段中生成URL編碼的字符串，並將其傳遞到類似的參數選項中：

編寫ajax事件處理程序

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

登入後複製

> 在上面的示例中，Onsuccess和OnFailure是AJAX事件處理程序的兩個示例。 ajax的選項對像中給出的事件處理程序函數給出了一個參數，這是該ajax調用的xmlhttprequest對象。我通常稱此論點響應或resp。您可以使用此參數從服務器中獲取響應：>

但是，請記住，請記住，resp只是xmlhttprequest對象，因此所有這些屬性都可用。

>您可以通過將JSON數據添加到X-JSON響應標頭中從服務器中發送數據。然後，這將通過原型自動評估，並作為第二個參數發送。 >

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

登入後複製

>許多AJAX操作只是涉及使用從服務器返回的HTML更新頁面上的一些HTML。 ajax.updater對象包裹ajax.request，並簡化了這種常見用例。這是一個簡單的例子：

>上面的摘要將簡單地替換ID為“ myDiv”的元素的內容，並用從服務器返回的任何內容。 ajax.periodicalupdater是相似的，但是以您設置的間隔重複進行Ajax調用：

衰減選項使您可以返回許多相同的響應，使您的服務器有點休息。本質上，每次定期updater提出請求，都將結果與上次返回的服務器進行比較。如果值相同，則將間隔乘以衰減值。因此，在上面的示例中，它將在兩秒鐘後，然後在四秒鐘之後等到下一個請求，依此類推，直到收到服務器的不同結果為止。那時，間隔將重置為一秒鐘。帶有響應者的

$F takes an ID and returns the value of any form field, for instance, a select box like this:

登入後複製

如果您正在尋找帶有原型的Ajax的一些工作示例，請嘗試本文。 >

<%= javascript_include_tag 'prototype' %>

登入後複製

下一個在哪裡？

正如我們在本文中看到的那樣，原型不僅本身是有用的，而且為編寫其他更專業的庫提供了一個絕佳的起點。這正是越來越多的人在做的事情。

> script.aculo.us和moo.fx

>托馬斯·福克斯（Thomas Fuchs）的腳本。 Aculo.us目前，它引起了人們對其Whiz-Bang效果和聰明的UI小部件的關注。它最初是核心原型庫的一部分，但很快就會失控並擺脫了父母。使用原型作為基礎，script.aculo.us專門通過動畫效果，易於使用拖放功能和功能強大的UI組件來提供豐富的用戶體驗。該網站上有一個不錯的Wiki，並提供了快速增長的質量文檔來幫助您入門，並示例頁面以使您的創意果汁流動。由於script.aculo.us的文件大小越大，因此已分為幾個文件，因此您的用戶不必下載整個庫，以便您可以使用一些幻燈片效果。但是，即使單個文件也很笨重。

如果您正在追求一些簡單的效果，我真的會推薦moo.fx。它的尺寸只有3K，並為您提供一些切換的幻燈片和褪色效果，這些效果通常是簡單的Ajax應用程序中所需的一切。如果您想寫自己的效果，這也是一個很好的起點。請查看代碼，以查看使用Prototype的對象進行編程的一個很好的示例。 Valerio顯然非常專注於保持他的腳本文件大小的大小，因此他甚至具有“精簡版”的原型版本（切成大約10k左右），並且是Ajax.Request的精益版本，我發現自己比完整的原型庫更經常使用。絕對值得一看。

行為

行為是您的DOM腳本工具包的一個很好的補充，它允許您使用CSS選擇器將行為添加到文檔中。這是它允許您執行的示例：> 在行為網站上，

>在行為網站上閱讀有關此信息的更多信息。現在可以使用前面討論的全新$$函數來實現類似類型的事物，因此最終可能會變得多餘。

jquery

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

登入後複製

> jQuery是一個緊湊的小庫，可在原型中效果很好，並創建了可以吸收XPath和CSS 3選擇器的$函數的超級英雄版本。它將能力與某種極其聰明的方法鏈方法結合在一起，從而製造了非常簡潔的代碼。當心這個。

總結

在將某些DOM腳本香料添加到您的Web應用程序中時，

>原型是強大的套件。不幸的是，它的功能和工具的增長速度比文檔快得多！我們設法涵蓋了本文原型的每個角落，但不是每種方法。不過，我希望您現在知道要去哪裡獲取所需的額外信息。

如果您想了解更多，請嘗試Ronnie Roller的Frototypedoc.com，這是一種與原型文檔的不斷增長相符的資源。玩得開心！

常見問題（常見問題解答）關於無痛的JavaScript原型>

無痛的JavaScript原型是什麼？

無痛的JavaScript原型是JavaScript的獨特功能，它允許使用自己的屬性和方法創建新對象。這是可以創建其他對象的藍圖。當您要創建具有相同屬性和方法的多個對象時，此功能特別有用。它促進了代碼可重複性和效率。

>無痛的JavaScript原型與其他JavaScript特徵有何不同？

>

與其他JavaScript特徵不同，無痛的JavaScript原型允許使用自己獨特的屬性和方法來創建對象。這意味著您可以從相同的原型創建多個對象，每個對像都有其獨特的屬性和方法。這與其他JavaScript功能不同，後者僅允許創建單個對象。

如何創建一個無痛的JavaScript原型？

>創建一個涉及無痛的JavaScript原型涉及定義一個函數，該函數將用作原型，然後使用“新’密鑰單詞”來創建新的Optife otty protots類型。這是一個簡單的示例：

函數汽車（製造，模型，年）{
this.make = make; make; this.year = year; y>>} >}
}

var mycar = new Car（' “ Mycar”是一種由“汽車”原型創建的新對象。

我可以在創建它之後添加屬性嗎？這是使用“原型”屬性完成的。這是一個示例：

car.prototype.color ='black';