Prototype - 快速指南

上一頁
下一頁

Prototype - 概述

什麼是 Prototype？

Prototype 是一個 JavaScript 框架，旨在簡化動態 Web 應用程式的開發。Prototype 由 Sam Stephenson 開發。

Prototype 是一個 JavaScript 庫，它使您可以非常輕鬆有趣的方式操作 DOM，並且安全（跨瀏覽器）。

Scriptaculous 和其他庫，例如 Rico，建立在 Prototype 的基礎上，用於建立小部件和其他終端使用者內容。

Prototype −

  • 擴充套件 DOM 元素和內建型別，提供有用的方法。

  • 內建支援類風格的面向物件程式設計，包括繼承。

  • 具有高階的事件管理支援。

  • 擁有強大的 Ajax 功能。

  • 不是一個完整的應用程式開發框架。

  • 不提供小部件或完整的標準演算法或 I/O 系統集。

如何安裝 Prototype？

Prototype 以單個檔案（名為 prototype.js）的形式分發。請按照以下步驟設定 Prototype 庫：

  • 訪問下載頁面 (http://prototypejs.org/download/) 獲取最新版本的便捷安裝包。

  • 現在，將 prototype.js 檔案放在網站目錄下，例如 /javascript。

您現在可以在網頁中使用功能強大的 Prototype 框架了。

如何使用 Prototype 庫？

現在，您可以按如下方式包含 Prototype 指令碼：

<html>
   <head>
      <title>Prototype examples</title> 
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
   </head>
   
   <body>
      ........
   </body>
</html>

示例

這是一個簡單的示例，展示瞭如何使用 Prototype 的 $() 函式在 JavaScript 中獲取 DOM 元素：

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function test() {
            node = $("firstDiv");
            alert(node.innerHTML);
         }
      </script>
   </head>

   <body>
      <div id = "firstDiv">
         <p>This is first paragraph</p> 
      </div>
      
      <div id = "secondDiv">
         <p>This is another paragraph</p>
      </div>
      
      <input type = "button" value = "Test $()" onclick = "test();"/>
   </body>
</html>

輸出

為什麼需要本教程？

Prototype 框架的非常好的文件可在 prototypejs.org 上找到，那麼為什麼要參考本教程呢！

答案是我們已在本教程中將所有最常用的功能組合在一起。其次，我們解釋了所有有用的方法以及合適的示例，這些示例在官方網站上不可用。

如果您是 Prototype 框架的高階使用者，則可以直接跳轉到官方網站，否則本教程可以作為您的良好起點，並且您可以將其用作參考手冊。

Prototype - 有用功能

現在讓我們看看 Prototype 可以為我們開發動態 Web 應用程式做些什麼。

跨瀏覽器支援

在進行 JavaScript 程式設計時，需要以不同的方式處理不同的 Web 瀏覽器。Prototype 庫的編寫方式使其能夠處理所有相容性問題，並且您可以毫無困難地進行跨瀏覽器程式設計。

文件物件模型

Prototype 提供了輔助方法，可以減輕一些 DOM 程式設計的負擔。使用 Prototype，您可以非常輕鬆地操作 DOM。

HTML 表單

藉助 Ajax，其他輸入機制（例如拖放）可以用作瀏覽器和伺服器之間對話的一部分。使用傳統的 JavaScript 程式設計，很難捕獲這些輸入並將它們傳遞給伺服器。Prototype 提供了一套用於處理 HTML 表單的實用程式。

JavaScript 事件

Prototype 在編寫事件時提供了一些優秀的跨瀏覽器支援，並且擴充套件了 Function 物件，使其易於處理事件處理。

Ajax 實用程式

Prototype 最重要的功能是它對 Ajax 的支援。所有主要的瀏覽器都支援 XMLHttpRequest 物件的某個版本，該版本使 Ajax 成為可能，無論是作為 ActiveX 元件還是作為本機 JavaScript 物件。

但是，XMLHttpRequest 在非常低的級別公開 HTTP 協議，這為開發人員提供了很大的權力，但也要求她編寫大量程式碼才能完成簡單的事情。

Prototype 使用其自己的物件繼承系統來提供 Ajax 輔助物件的層次結構，其中更通用的基類由更集中的輔助物件作為子類，這些輔助物件允許用一行程式碼編寫最常見的 Ajax 請求型別。

Prototype - 實用方法

Prototype 庫附帶了許多預定義的物件和實用程式函式。您可以在 JavaScript 程式設計中直接使用這些函式和物件。

這些方法是基於 Prototype 的高效 JavaScript 編碼的基石之一。花一些時間學習它們，以便熟悉這些方法。

本章詳細介紹了所有這些有用的方法以及示例。

序號 方法及說明
1. $()

如果提供字串，則返回文件中具有匹配 ID 的元素；否則返回傳遞的元素。
2. $$()

獲取任意數量的 CSS 選擇器（字串），並返回與其中任何一個匹配的擴充套件 DOM 元素的文件順序陣列。
3. $A()

將接收到的單個引數轉換為 Array 物件。
4. $F()

返回表單控制元件的值。這是 Form.Element.getValue 的便捷別名。
5. $H()

將物件轉換為類似於關聯陣列的可列舉 Hash 物件。
6. $R()

建立一個新的 ObjectRange 物件。
7. $w()

將字串拆分為陣列，將所有空格視為分隔符。
8. Try.these

接受任意數量的函式，並返回第一個不丟擲錯誤的函式的結果。

document.getElementsByClassName

此方法檢索（並擴充套件）所有具有 CSS 類名 className 的元素。

但是，此方法在最新版本的 Prototype 中已被棄用。

Prototype - 元素物件

Element 物件提供各種用於操作 DOM 中元素的實用程式函式。

以下是所有實用程式函式及其示例的列表。此處定義的所有方法都會自動新增到使用 $() 函式訪問的任何元素。

因此，編寫 Element.show('firstDiv'); 與編寫 $('firstDiv').show(); 相同。

Prototype 元素方法

注意 - 確保您至少擁有 1.6 版的 prototype.js。

序號 方法及說明
1. absolutize()

將元素轉換為絕對定位的元素，而不會更改其在頁面佈局中的位置。
2. addClassName()

將給定的 CSS 類名新增到元素的類名中。
3. addMethods()

使您可以將自己的方法混合到 Element 物件中，以後可以將其用作擴充套件元素的方法。
4. adjacent()

查詢與給定選擇器匹配的當前元素的所有兄弟元素。
5. ancestors()

收集元素的所有祖先，並將它們作為擴充套件元素的陣列返回。
6. childElements()

收集元素的所有子元素，並將它們作為擴充套件元素的陣列返回。
7.

classNames()

已棄用。返回 ClassNames 的新例項，這是一個用於讀取和寫入元素 CSS 類名的 Enumerable 物件。
8. cleanWhitespace()

刪除元素的所有僅包含空格的文字節點。返回元素。
9. clonePosition()

根據可選引數 options 將源的位置和/或尺寸克隆到元素上。
10. cumulativeOffset()

返回元素相對於文件左上角的偏移量。
11. cumulativeScrollOffset()

計算巢狀滾動容器中元素的累積滾動偏移量。
12. descendantOf()

檢查元素是否是祖先的後代。
13. descendants()

收集元素的所有後代，並將它們作為擴充套件元素的陣列返回。
14. down()

返回與 cssRule 匹配的元素的第一個後代。如果未提供 cssRule，則會考慮所有後代。如果沒有後代匹配這些條件，則返回 undefined。
15. empty()

測試元素是否為空（即僅包含空格）。
16. extend()

使用 Element.Methods 和 Element.Methods.Simulated 中包含的所有方法擴充套件元素。
17. fire()

使用當前元素作為其目標觸發自定義事件。
18. firstDescendant()

返回第一個是元素的子元素。這與 firstChild DOM 屬性相反，firstChild DOM 屬性將返回任何節點。
19. getDimensions()

查詢元素的計算寬度和高度，並將它們作為物件的鍵/值對返回。
20.

getElementsByClassName

已棄用。獲取元素的所有具有 CSS 類 className 的後代，並將它們作為擴充套件元素的陣列返回。請使用 $$()。
21.

getElementsBySelector

已棄用。獲取任意數量的 CSS 選擇器（字串），並返回與其中任何一個匹配的元素擴充套件子元素的陣列。請使用 $$()。
22. getHeight()

查詢並返回元素的計算高度。
23. getOffsetParent()

返回元素最接近的定位祖先。如果未找到，則返回 body 元素。
24. getStyle()

返回元素的給定 CSS 屬性值。屬性可以用其 CSS 或駝峰式形式指定。
25. getWidth()

查詢並返回元素的計算寬度。
26. hasClassName()

檢查元素是否具有給定的 CSS className。
27. hide()

隱藏並返回元素。
28. identify()

如果存在，則返回元素的 id 屬性，否則設定並返回唯一的自動生成的 id。
29.

immediateDescendants()

已棄用。收集元素的所有直接後代（即子元素），並將它們作為擴充套件元素的陣列返回。請使用 childElements()。
30. insert()

在元素之前、之後、頂部或底部插入內容。
31. inspect()

返回元素的除錯導向字串表示形式。
32. makeClipping()

透過將元素的 overflow 值設定為 'hidden' 來模擬支援不佳的 CSS clip 屬性。返回元素。
33. makePositioned()

允許輕鬆建立 CSS 包含塊，如果元素的初始位置為 'static' 或未定義，則將其 CSS position 設定為 'relative'。返回元素。
34. match()

檢查元素是否與給定的 CSS 選擇器匹配。
35. next()

返回與給定 cssRule 匹配的元素的後續兄弟元素。
36. nextSiblings()

收集元素的所有後續兄弟元素，並將它們作為擴充套件元素的陣列返回。
37. observe()

在元素上註冊事件處理程式並返回元素。
38. positionedOffset()

返回元素相對於其最近的定位祖先的偏移量。
39. previous ()

返回與給定cssRule匹配的元素的前一個兄弟元素。
40. previousSiblings()

收集所有元素的前一個兄弟元素，並將其作為擴充套件元素陣列返回。
41. readAttribute()

返回元素屬性的值，如果屬性未指定則返回null。
42. recursivelyCollect()

遞迴收集其關係由屬性指定的元素。
43. relativize()

將元素轉換為相對定位的元素，而不更改其在頁面佈局中的位置。
44. remove ()

完全從文件中刪除元素並返回它。
45. removeClassName()

刪除元素的CSS className並返回元素。
46. replace ()

用html引數的內容替換元素，並返回已刪除的元素。
47. scrollTo ()

滾動視窗，使元素出現在視口頂部。返回元素。
48. select()

接受任意數量的CSS選擇器（字串），並返回與其中任何一個匹配的元素的擴充套件後代陣列。
49. setOpacity()

設定元素的視覺不透明度，同時解決各種瀏覽器中的不一致性。
50. setStyle()

修改元素的CSS樣式屬性。
51. show()

顯示並返回元素。
52. siblings()

收集所有元素的兄弟元素，並將其作為擴充套件元素陣列返回。
53. stopObserving()

取消註冊處理程式並返回元素。
54. toggle()

切換元素的可見性。
55. toggleClassName()

切換元素的CSS className並返回元素。
56. undoClipping()

將元素的CSS overflow屬性設定回應用Element.makeClipping()之前的值。返回元素。
57. undoPositioned()

將元素恢復到應用Element.makePositioned之前的狀態。返回元素。
58. up()

返回與給定cssRule匹配的元素的第一個祖先。
59. update()

用提供的newContent引數替換元素的內容並返回元素。
60. viewportOffset()

返回元素相對於視口的X/Y座標。
61. visible()

返回一個布林值，指示元素是否可見。
62. wrap()

將一個元素包裝在另一個元素內部，然後返回包裝器。
63. writeAttribute()

新增、指定或刪除作為雜湊或名稱/值對傳遞的屬性。

Prototype - 數字處理

Prototype擴充套件了原生JavaScript數字，以便提供−

  • 透過Number#succ實現ObjectRange相容性。

  • 使用Number#times實現類似Ruby的數值迴圈。

  • 簡單的實用程式方法，例如Number#toColorPart和Number#toPaddedString。

以下是所有處理數字的函式及其示例的列表。

Prototype Number 方法

注意 - 確保您擁有1.6版本的prototype.js。

序號 方法及說明
1. abs()

返回數字的絕對值。
2. ceil()

返回大於或等於數字的最小整數。
3. floor()

返回小於或等於數字的最大整數。
4. round()

將數字四捨五入到最接近的整數。
5. succ()

返回當前數字的後繼，定義為current + 1。用於使數字與ObjectRange相容。
6. times()

封裝常規[0..n]迴圈，Ruby風格。
7. toColorPart()

生成數字的兩位十六進位制表示形式（因此假定數字在[0..255]範圍內）。用於組合CSS顏色字串。
8. toJSON()

返回JSON字串。
9. toPaddedString()

將數字轉換為用0填充的字串，使字串的長度至少等於length。

Prototype - 字串處理

Prototype透過一系列從簡單到複雜的實用方法增強了String物件。

以下是所有處理字串的函式及其示例的列表。

Prototype String 方法

注意 - 確保您擁有1.6版本的prototype.js。

序號 方法及說明
1. blank()

檢查字串是否為空白，這意味著它為空或僅包含空格。
2. camelize()

將用連字元分隔的字串轉換為camelCase等價物。例如，“foo-bar”將轉換為“fooBar”。
3. capitalize()

將字串的第一個字母大寫，並將其他所有字母小寫。
4. dasherize()

將每個下劃線字元（“_”）替換為連字元（“-”）。
5. empty()

檢查字串是否為空。
6. endsWith()

檢查字串是否以子字串結尾。
7. escapeHTML()

將HTML特殊字元轉換為其實體等價物。
8. evalJSON()

評估字串中的JSON並返回結果物件。
9. evalScripts()

評估字串中存在的任何指令碼塊的內容。返回一個包含每個指令碼返回的值的陣列。
10. extractScripts()

提取字串中存在的任何指令碼塊的內容，並將其作為字串陣列返回。
11. gsub()

返回字串，其中給定模式的每次出現都被替換為常規字串、函式的返回值或模板字串。
12. include()

檢查字串是否包含子字串。
13. inspect()

返回字串的除錯版本。
14. interpolate()

將字串視為模板並用物件的屬性填充它。
15. isJSON()

透過使用正則表示式檢查字串是否為有效的JSON。此安全方法在內部呼叫。
16. parseQuery()

解析類似URI的查詢字串，並返回由引數/值對組成的物件。
17. scan()

允許迭代給定模式的每次出現。
18. startsWith()

檢查字串是否以子字串開頭。
19. strip()

去除字串中所有前導和尾隨空格。
20. stripScripts()

從字串中刪除任何看起來像HTML指令碼塊的內容。
21. stripTags()

從字串中刪除任何HTML標籤。
22. sub()

返回一個字串，其中模式的前count次出現被替換為常規字串、函式的返回值或模板字串。
23. succ()

由ObjectRange在內部使用。將字串的最後一個字元轉換為Unicode字母表中的下一個字元。
24. times()

將字串連線count次。
25. toArray()

逐字元分割字串，並返回包含結果的陣列。
26. toJSON()

返回JSON字串。
27. toQueryParams()

解析類似URI的查詢字串，並返回由引數/值對組成的物件。
28. truncate()

將字串截斷到給定長度，並在其後附加字尾（表示它只是一個摘錄）。
29. underscore()

將駝峰式字串轉換為用下劃線（“_”）分隔的一系列單詞。
30. unescapeHTML()

去除標籤並將特殊HTML字元的實體形式轉換為其正常形式。
31. unfilterJSON ()

去除Ajax JSON或JavaScript響應周圍的註釋分隔符。此安全方法在內部呼叫。

Prototype - 陣列處理

Prototype擴充套件了所有原生JavaScript陣列，並添加了許多強大的方法。

這是透過兩種方式完成的−

  • 它混合了Enumerable模組，該模組已經引入了大量方法。

  • 它還添加了一些額外的 方法，在本節中進行了說明。

使用迭代器

Prototype提供的一個重要支援是，您可以在JavaScript中使用類似Java的迭代器。請參閱以下區別−

編寫for迴圈的傳統方式−

for (var index = 0; index < myArray.length; ++index) {
   var item = myArray[index];
   // Your code working on item here...
}

現在，如果您使用Prototype，則可以如下替換上述程式碼−

myArray.each(function(item) {
   // Your code working on item here...
});

以下是所有處理陣列的函式及其示例的列表。

Prototype Array 方法

注意 - 確保您擁有1.6版本的prototype.js。

序號 方法及說明
1. clear()

清空陣列（使其為空）。
2. clone()

返回陣列的副本，保持原始陣列不變。
3. compact()

返回陣列的新版本，不包含任何null/undefined值。
4. each()

按升序數字索引順序迭代陣列。
5. first()

返回陣列中的第一個專案，如果陣列為空則返回undefined。
6. flatten()

返回陣列的“扁平”（一維）版本。
7. from()

克隆現有陣列或從類似陣列的集合中建立一個新陣列。
8. indexOf()

返回引數在陣列中第一次出現的索引位置。
9. inspect()

返回陣列的除錯字串表示形式。
10. last()

返回陣列中的最後一個專案，如果陣列為空則返回undefined。
11. reduce()

減少陣列：單元素陣列將轉換為其唯一元素，而多元素陣列將保持不變。
12. reverse()

返回陣列的反向版本。預設情況下，直接反轉原始陣列。如果inline設定為false，則使用原始陣列的副本。
13. size()

返回陣列的大小。
14. toArray()

這只是從Enumerable混合的toArray的本地最佳化。
15. toJSON()

返回JSON字串。
16. uniq()

生成陣列的無重複版本。如果未找到重複項，則返回原始陣列。
17. without()

生成陣列的新版本，不包含任何指定的元素。

Prototype - 雜湊處理

雜湊可以被認為是將唯一鍵繫結到值的關聯陣列。唯一的區別是您可以使用任何字串作為索引，而不僅僅是使用數字作為索引。

建立雜湊

有兩種方法可以構造雜湊例項−

  • 使用JavaScript關鍵字new。
  • 使用Prototype實用程式函式$H。

要建立空雜湊，您也可以在不帶引數的情況下呼叫任何構造方法。

以下示例展示瞭如何以簡單的方式建立雜湊、設定值和獲取值−

// Creating Hash
var myhash = new Hash();
var yourhash = new Hash( {fruit: 'apple'} );
var hishash = $H( {drink: 'pepsi'} );

// Set values in terms of key and values.
myhash.set('name', 'Bob');

// Get value of key 'name' as follows.
myhash.get('name');
yourhash.get('fruit');
hishash.get('drink');

// Unset a key & value
myhash.unset('name');
yourhash.unset('fruit');
hishash.unset('drink');

Prototype提供了廣泛的方法來輕鬆評估雜湊。本教程將詳細解釋每種方法並提供合適的示例。

以下是與雜湊相關的所有方法的完整列表。

Prototype Hash 方法

注意 - 確保至少擁有1.6版本的prototype.js。

序號 方法及說明
1. clone()

返回雜湊的副本。
2. each()

迭代雜湊中的名稱/值對。
3. get()

返回雜湊鍵屬性的值。
4. inspect()

返回雜湊的除錯字串表示形式。
5. keys()

提供雜湊的鍵（即屬性名稱）陣列。
6. merge()

將物件合併到雜湊中，並返回合併結果。
7. remove()

從雜湊中刪除鍵並返回其值。此方法在1.6版本中已棄用。
8. set()

將雜湊鍵的屬性設定為value並返回value。
9. toJSON()

返回JSON字串。
10. toObject()

返回一個克隆的、原始的物件。
11. toQueryString()

將雜湊轉換為其 URL 編碼的查詢字串表示形式。
12. unset()

刪除雜湊鍵的屬性並返回其值。
13. update()

使用物件的鍵/值對更新雜湊。原始雜湊將被修改。
14. values()

收集雜湊的值並將其儲存在一個數組中返回。

Prototype - 基本物件

Object 被 Prototype 用作名稱空間，並使用 Object 物件呼叫相關函式。這以以下兩種方式使用 -

  • 如果你是簡單的開發者，那麼你可以使用現有的函式，比如 inspect 或 clone。

  • 如果你希望像 Prototype 一樣建立自己的物件，或者像處理雜湊一樣探索物件，則會轉向 extend、keys 和 values。

Prototype 物件方法

注意 - 確保至少擁有1.6版本的prototype.js。

序號 方法及說明
1. clone()

使用淺拷貝克隆傳遞的物件（將所有原始物件的屬性複製到結果中）。
2. extend()

將所有屬性從源物件複製到目標物件。
3. inspect()

返回物件的除錯導向字串表示形式。
4. isArray ()

如果 obj 是陣列，則返回 true，否則返回 false。
5. isElement()

如果 obj 是型別為 1 的 DOM 節點，則返回 true，否則返回 false。
6. isFunction()

如果 obj 的型別是函式，則返回 true，否則返回 false。
7. isHash()

如果 obj 是 Hash 類的例項，則返回 true，否則返回 false。
8. isNumber()

如果 obj 的型別是數字，則返回 true，否則返回 false。
9. isString()

如果 obj 的型別是字串，則返回 true，否則返回 false。
10. isUndefined()

如果 obj 的型別是 undefined，則返回 true，否則返回 false。
11. keys()

將任何物件視為雜湊並獲取其屬性名稱列表。
12. toHTML()

如果存在，則返回 obj 的 toHTML 方法的返回值，否則透過 String.interpret 執行 obj。
13. toJSON()

返回JSON字串。
14. toQueryString()

將物件轉換為其 URL 編碼的查詢字串表示形式。
15. values()

將任何物件視為雜湊並獲取其屬性值列表。

Prototype - 模板

模板用於格式化一組類似的物件，併為這些物件生成格式化的輸出。

Prototype 提供了一個 Template 類，它有兩個方法 -

  • Template() - 這是一個構造方法，用於建立一個模板物件並呼叫 evaluate() 方法來應用模板。

  • evaluate() - 此方法用於應用模板以格式化物件。

建立格式化輸出涉及三個步驟。

  • 建立模板 - 這涉及建立預格式化的文字。此文字包含格式化的內容以及 #{fieldName} 值。當 evaluate() 方法使用實際值呼叫時，這些 #{fieldName} 值將被實際值替換。

  • 定義實際值 - 這涉及以鍵值對的形式建立實際值。這些鍵將在模板中對映，並將被相應的數值替換。

  • 對映鍵和替換值 - 這是最後一步，其中將呼叫 evaluate()，並且格式化物件中所有可用的鍵都將被定義的值替換。

示例1

步驟1

建立一個模板。

var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');

步驟2

準備我們的值集，這些值將傳遞到上面的物件中以獲得格式化的輸出。

var record1 = {title: 'Metrix', author:'Arun Pandey'};
var record2 = {title: 'Junoon', author:'Manusha'};
var record3 = {title: 'Red Moon', author:'Paul, John'};
var record4 = {title: 'Henai', author:'Robert'};
var records = [record1, record2, record3, record4 ];

步驟3

最後一步是填充模板中的所有值併產生最終結果，如下所示 -

records.each( function(conv) {
   alert( "Formatted Output : " + myTemplate.evaluate(conv) );
});

因此，讓我們將這三個步驟放在一起 -

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function showResult() {
            //  Create template with formatted content and placeholders.
            var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');
   
            // Create hashes with the required values for placeholders
            var record1 = {title: 'Metrix', author:'Arun Pandey'};
            var record2 = {title: 'Junoon', author:'Manusha'};
            var record3 = {title: 'Red Moon', author:'Paul, John'};
            var record4 = {title: 'Henai', author:'Robert'};
            var records = [record1, record2, record3, record4 ];

            // Now apply template to produce desired formatted output
            records.each( function(conv) {
               alert( "Formatted Output : " + myTemplate.evaluate(conv) );
            });
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br />
      <br />
      <input type = "button" value = "Result" onclick = "showResult();"/>
   </body>
</html>

這將產生以下結果 -

輸出

Prototype - 列舉

Enumerable 類為列舉提供了一大組有用的方法。列舉是充當值集合的物件。

列舉方法主要用於列舉陣列和雜湊。還有其他物件，例如ObjectRange和各種與 DOM 或 AJAX 相關的物件，您可以在其中使用列舉方法。

上下文引數

Enumerable 的每個採用迭代器的的方法也採用上下文物件作為下一個（可選）引數。上下文物件是迭代器將繫結到的物件，因此其中的this關鍵字將指向該物件。

var myObject = {};

['foo', 'bar', 'baz'].each(function(name, index) {
   this[name] = index;
}, myObject); // we have specified the context

myObject;

這將產生以下結果 -

輸出

{ foo: 0, bar: 1, baz: 2}

有效地使用它

  • 當您需要在所有元素上呼叫相同的方法時，請使用 invoke() 方法。

  • 當您需要獲取所有元素上的相同屬性時，請使用 pluck() 方法。

  • findAll/select 方法檢索與給定謂詞匹配的所有元素。相反，reject() 方法檢索不與謂詞匹配的所有元素。在您需要兩個集合的特定情況下，您可以避免迴圈兩次：只需使用 partition() 方法。

以下是與 Enumerable 相關的所有方法的完整列表。

Prototype Enumerable 方法

注意 - 確保您至少擁有 prototype.js 1.6 版。

序號 方法及說明
1. all()

確定所有元素是否都與 true 布林等效，無論是直接還是透過提供的迭代器進行計算。
2. any()

確定至少一個元素是否與 true 布林等效，無論是直接還是透過提供的迭代器進行計算。
3. collect()

返回將迭代器應用於每個元素的結果。作為 map() 的別名。
4. detect()

查詢迭代器返回 true 的第一個元素。由 find() 方法別名。
5. each()

它允許您以通用方式迭代所有元素，然後返回 Enumerable，從而允許鏈式呼叫。
6. eachSlice()

根據給定的大小將專案分組為塊，最後一個塊可能更小。
7. entries()

更通用 toArray 方法的別名。
8. find()

查詢迭代器返回 true 的第一個元素。detect() 的便捷別名。
9. findAll()

返回迭代器返回 true 的所有元素。作為 select() 的別名。
10. grep()

返回與過濾器匹配的所有元素。如果提供了迭代器，則將其用於為每個選定元素生成返回值。
11. inGroupsOf()

將專案分組為固定大小的塊，如果必要，使用特定值填充最後一個塊。
12. include()

根據 == 比較運算子確定給定物件是否在 Enumerable 中。作為 member() 的別名。
13. inject()

基於迭代器連續結果遞增地構建結果值。
14. invoke()

each() 或 collect() 的常見用例的最佳化：為所有元素呼叫相同的方法，並使用相同的潛在引數。
15. map()

返回將迭代器應用於每個元素的結果。collect() 的便捷別名。
16. max()

返回最大元素（或基於元素的計算），如果列舉為空則返回 undefined。元素要麼直接比較，要麼先應用迭代器然後比較返回值。
17. member()

根據 == 比較運算子確定給定物件是否在 Enumerable 中。include() 的便捷別名。
18. min()

返回最小元素（或基於元素的計算），如果列舉為空則返回 undefined。元素要麼直接比較，要麼先應用迭代器然後比較返回值。
19. partition()

將元素劃分為兩組：那些被視為 true 的和那些被視為 false 的。
20. pluck()

collect() 的常見用例的最佳化：為所有元素獲取相同的屬性。返回屬性值。
21. reject()

返回迭代器返回 false 的所有元素。
22. select()

findAll() 方法的別名。
23. size()

返回列舉的大小。
24. sortBy()

根據為每個元素計算的標準提供元素的自定義排序檢視，由迭代器計算。
25. toArray()

返回列舉的陣列表示形式。作為 entries() 的別名。
26. zip()

將 2+ 個序列壓縮在一起（想想褲子上的拉鍊），提供一個元組陣列。每個元組包含每個原始序列的一個值。

Prototype - 事件處理

事件管理是實現跨瀏覽器指令碼的最大挑戰之一。每個瀏覽器都有不同的方法來處理擊鍵。

Prototype 框架處理所有跨瀏覽器相容性問題，讓您免受所有與事件管理相關的麻煩。

Prototype 框架提供 Event 名稱空間，該名稱空間包含許多方法，所有這些方法都將當前事件物件作為引數，並很樂意提供您在所有主要瀏覽器中請求的資訊。

Event 名稱空間還提供了一個標準化的鍵程式碼列表，您可以在與鍵盤相關的事件中使用。以下常量在名稱空間中定義 -

序號 鍵常量和描述
1.

KEY_BACKSPACE

表示退格鍵。
2.

KEY_TAB

表示 Tab 鍵。
3.

KEY_RETURN

表示回車鍵。
4.

KEY_ESC

表示 Esc 鍵。
5.

KEY_LEFT

表示左箭頭鍵。
6.

KEY_UP

表示上箭頭鍵。
7.

KEY_RIGHT

表示右箭頭鍵。
8.

KEY_DOWN

表示下箭頭鍵。
9.

KEY_DELETE

表示 Delete 鍵。
10.

KEY_HOME

表示 Home 鍵。
11.

KEY_END

表示 End 鍵。
12.

KEY_PAGEUP

表示 Page Up 鍵。
13.

KEY_PAGEDOWN

表示 Page Down 鍵。

如何處理事件

在開始之前，讓我們看看使用事件方法的示例。此示例顯示如何捕獲發生事件的 DOM 元素。

示例

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         // Register event 'click' and associated call back.
         Event.observe(document, 'click', respondToClick);
  
         // Callback function to handle the event.
         function respondToClick(event) {
            var element = event.element();
            alert("Tag Name : " + element.tagName );
         }
      </script>
   </head>

   <body>
      <p id = "note"> Click on any part to see the result.</p>
      <p id = "para">This is paragraph</p>
      <div id = "division">This is divsion.</div>
   </body>
</html>

輸出

以下是與Event相關的所有方法的完整列表。您最可能經常使用的函式是 observe、element 和 stop。

Prototype 事件方法

注意 - 確保您至少擁有 prototype.js 1.6 版。

序號 方法及說明
1. element()

返回發生事件的 DOM 元素。
2. extend()

使用 Event.Methods 中包含的所有方法擴充套件 event。
3. findElement()

返回具有給定標籤名稱的第一個 DOM 元素，從發生事件的元素向上。
4. isLeftClick()

確定與按鈕相關的滑鼠事件是否與“左”（實際上是主要）按鈕有關。
5. observe()

在 DOM 元素上註冊事件處理程式。
6. pointerX()

返回滑鼠事件的絕對水平位置。
7. pointerY()

返回滑鼠事件的絕對垂直位置。
8. stop()

停止事件的傳播並阻止其預設操作最終被觸發。
9. stopObserving()

登出事件處理程式。
10. unloadCache()

登出透過 observe 註冊的所有事件處理程式。自動為您連線。從 1.6 版開始不可用。

Prototype - 表單管理

Prototype 提供了一種簡單的方法來管理 HTML 表單。Prototype 的 Form 是一個名稱空間和一個與表單相關的所有事物的模組，包含表單操作和序列化功能。

雖然它包含處理整個表單的方法，但其子模組 Form.Element 處理特定的表單控制元件。

以下是與表單元素相關的所有方法的完整列表。

Prototype 表單方法

注意 - 確保您至少擁有 prototype.js 1.6 版。

序號 方法及說明
1. disable()

停用整個表單。表單控制元件將可見但不可編輯。
2. enable()

啟用完全或部分停用的表單。
3. findFirstElement()

查詢第一個非隱藏、非停用的表單控制元件。
4. focusFirstElement()

將鍵盤焦點賦予表單的第一個元素。
5. getElements()

返回表單內所有表單控制元件的集合。
6. getInputs()

返回表單中所有 INPUT 元素的集合。使用可選的 type 和 name 引數來限制對這些屬性的搜尋。
7. request()

一種用於透過 Ajax.Request 將表單序列化並提交到表單 action 屬性的 URL 的便捷方法。options 引數傳遞給 Ajax.Request 例項，允許覆蓋 HTTP 方法並指定其他引數。
8. reset()

將表單重置為其預設值。
9. serialize()

將表單資料序列化為適合 Ajax 請求的字串（預設行為），或者，如果可選的 getHash 評估為 true，則序列化為一個物件雜湊，其中鍵是表單控制元件名稱，值是資料。
10. serializeElements()

將表單元素陣列序列化為適合 Ajax 請求的字串（預設行為），或者，如果可選的 getHash 評估為 true，則序列化為一個物件雜湊，其中鍵是表單控制元件名稱，值是資料。

Prototype 和 JSON 教程

JSON 簡介

JSON（JavaScript 物件表示法）是一種輕量級的資料交換格式。

  • JSON 易於人類閱讀和編寫。

  • JSON 易於機器解析和生成。

  • JSON 基於 JavaScript 程式語言的一個子集。

  • JSON 尤其被網路上的所有 API 使用，並且是 Ajax 請求中 XML 的快速替代方案。

  • JSON 是一種完全獨立於語言的文字格式。

Prototype 1.5.1 及更高版本具有 JSON 編碼和解析支援。

JSON 編碼

Prototype 提供以下用於編碼的方法：

注意 - 確保至少擁有 prototype.js 的 1.6 版本。

序號 方法及說明
1. Number.toJSON()

返回給定數字的 JSON 字串。
2. String.toJSON()

返回給定字串的 JSON 字串。
3. Array.toJSON()

返回給定陣列的 JSON 字串。
4. Hash.toJSON()

返回給定雜湊的 JSON 字串。
5. Date.toJSON()

將日期轉換為 JSON 字串（遵循 JSON 使用的 ISO 格式）。
6. Object.toJSON()

返回給定物件的 JSON 字串。

如果您不確定需要編碼的資料型別，最好的方法是使用 Object.toJSON，例如：

var data = {name: 'Violet', occupation: 'character', age: 25 };
Object.toJSON(data);

這將產生以下結果 -

'{"name": "Violet", "occupation": "character", "age": 25}'

此外，如果您使用自定義物件，您可以設定自己的 toJSON 方法，該方法將由 Object.toJSON 使用。例如：

var Person = Class.create();
Person.prototype = {
   initialize: function(name, age) {
      this.name = name;
      this.age = age;
   },  
   toJSON: function() {
      return ('My name is ' + this.name + 
         ' and I am ' + this.age + ' years old.').toJSON();
   }
};
var john = new Person('John', 49);
Object.toJSON(john);

這將產生以下結果 -

'"My name is John and I am 49 years old."'

解析 JSON

在 JavaScript 中，解析 JSON 通常透過評估 JSON 字串的內容來完成。Prototype 引入了 String.evalJSON 來處理此問題。例如：

var d='{ "name":"Violet","occupation":"character" }'.evalJSON();
d.name;

這將產生以下結果 -

"Violet"

將 JSON 與 Ajax 結合使用

將 JSON 與 Ajax 結合使用非常簡單。只需在傳輸的 responseText 屬性上呼叫 String.evalJSON 即可：

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON();
   }
});

如果您的資料來自不受信任的來源，請務必對其進行清理：

new Ajax.Request('/some_url', {
   method:'get',
   requestHeaders: {Accept: 'application/json'},
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON(true);
   }
});

Prototype 和 AJAX 教程

AJAX 簡介

AJAX 代表 **A**synchronous **Ja**vaScript and **X**ML。AJAX 是一種建立更好、更快和更具互動性的 Web 應用程式的新技術，它藉助 XML、HTML、CSS 和 Java Script。

要全面瞭解 AJAX，請參閱我們簡單的 AJAX 教程。

Prototype 對 AJAX 的支援

Prototype 框架使您可以非常輕鬆有趣的方式處理 Ajax 呼叫，並且也很安全（跨瀏覽器）。Prototype 還以智慧的方式處理從伺服器返回的 JavaScript 程式碼，並提供用於輪詢的輔助類。

Ajax 功能包含在全域性 Ajax 物件中。此物件提供處理 AJAX 請求和響應所需的所有方法，以簡便的方式。

AJAX 請求

實際請求是透過建立 Ajax.Request() 物件的例項來進行的。

new Ajax.Request('/some_url', { method:'get' });

第一個引數是請求的 URL；第二個是 options 雜湊。method 選項指的是要使用的 HTTP 方法；預設方法是 POST。

AJAX 響應回撥

預設情況下，Ajax 請求是非同步的，這意味著您必須擁有處理響應資料的回撥。在發出請求時，回撥方法將傳遞到 options 雜湊中：

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var response = transport.responseText || "no response text";
      alert("Success! \n\n" + response);
   },
   onFailure: function() { alert('Something went wrong...') }
});

這裡，兩個回撥傳遞到雜湊中：

  • onSuccess
  • onFailure

根據響應的狀態，將相應地呼叫上述兩個回撥中的一個。傳遞給這兩個回撥的第一個引數是本機 xmlHttpRequest 物件，您可以分別使用其 responseText 和 responseXML 屬性。

您可以指定兩個回撥、一個回撥或都不指定 - 由您決定。其他可用的回撥包括：

  • onUninitialized
  • onLoading
  • onLoaded
  • onInteractive
  • onComplete
  • onException

它們都與 xmlHttpRequest 傳輸的某個狀態匹配，除了 onException，它在排程其他回撥時發生異常時觸發。

注意 - onUninitialized、onLoading、onLoaded 和 onInteractive 回撥並非所有瀏覽器都一致地實現。通常，最好避免使用這些。

Prototype AJAX 方法

Ajax 物件提供處理 AJAX 請求和響應所需的所有方法，以簡便的方式。以下是所有與 AJAX 相關的方法的完整列表。

注意 - 確保您至少擁有 prototype.js 1.6 版。

序號 方法及說明
1. Ajax 選項

這不是一種方法，而是詳細說明了所有 AJAX 請求者和回撥共享的核心選項。
2. Ajax.PeriodicalUpdater()

定期執行 AJAX 請求並根據響應文字更新容器的內容。
3. Ajax.Request()

啟動和處理 AJAX 請求。
4. Ajax.Responders()

一個全域性監聽器的儲存庫，通知 Prototype 基於 AJAX 請求的每個步驟。
5. Ajax.Response()

作為所有 Ajax 請求回撥的第一個引數傳遞的物件。
6. Ajax.Updater()

執行 AJAX 請求並根據響應文字更新容器的內容。

Prototype - 表達範圍

Prototype 範圍表示值的區間。獲取範圍的首選方法是使用 **$R** 實用程式函式。

您可以使用簡單的語法建立一大範圍的值，如下所示：

$R(1, 10).inspect();

$R('a', 'e').inspect();

這將產生以下結果 -

['1, 2, 3, 4, 5, 6, 7, 8, 9, 10']

['a', 'b', 'c', 'd', 'e']

include() 方法

此方法確定值是否包含在範圍內：

語法

Range.include(value);

返回值

如果包含值，則返回 true，否則返回 false。

示例

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function showResult() {
            alert ( "Test 1 : " + $R(1, 10).include(5));
            // Returns true
   
            alert ( "Test 2 : " + $R('a', 'h').include('x'));
            // Returns flase
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br />
      <br />
      <input type = "button" value = "Result" onclick = "showResult();"/>
   </body>
</html>

輸出

Prototype - 定期執行

很多時候需要在一段時間後多次執行某個函式。例如，您可能希望在給定時間後重新整理螢幕。Prototype 提供了一種簡單的機制來使用 PeriodicalExecuter 物件實現它。

PeriodicalExecuter 提供的優勢在於，它可以防止回撥函式的多個並行執行。

建立 PeriodicalExecuter

建構函式接受兩個引數：

  • 回撥函式。
  • 執行之間的時間間隔（以秒為單位）。

啟動後，PeriodicalExecuter 將無限期觸發，直到頁面解除安裝或使用 stop() 方法停止執行程式。

示例

以下示例將在每 5 秒後彈出一個對話方塊，直到您按下“取消”按鈕停止它。

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function startExec() {
            new PeriodicalExecuter(function(pe) {
               if (!confirm('Want me to annoy you again later?'))
               pe.stop();
            }, 5);
         }
      </script>
   </head>

   <body>
      <p>Click start button to start periodic executer:</p>
      <br />
      <br />
      <input type = "button" value = "start" onclick = "startExec();"/>
   </body>
</html>

輸出

列印頁面
上一頁
下一頁
廣告