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 框架的高階使用者，則可以直接跳轉到官方網站，否則本教程可以作為您的良好起點，並且您可以將其用作參考手冊。

列印頁面