原型 - 概述

什么是原型？

Prototype 是一个 JavaScript 框架，旨在简化动态 Web 应用程序的开发。原型由萨姆·斯蒂芬森开发。

Prototype 是一个 JavaScript 库，它使您能够以一种非常简单、有趣且安全的方式操作 DOM（跨浏览器）。

Scriptaculous和其他库（例如Rico）构建在 Prototype 的基础上，用于创建小部件和其他最终用户的东西。

原型-

使用有用的方法扩展 DOM 元素和内置类型。
具有对类风格 OOP（包括继承）的内置支持。
具有对事件管理的高级支持。
具有强大的Ajax功能。
不是一个完整的应用程序开发框架。
不提供小部件或全套标准算法或 I/O 系统。

如何安装原型？

原型作为一个名为prototype.js 的单个文件分发。按照下面提到的步骤设置原型库 -

转到下载页面(http://prototypejs.org/download/)以方便的包形式获取最新版本。
现在，将prototype.js 文件放入您网站的目录中，例如/javascript。

您现在可以在网页中使用强大的 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>

输出

为什么这个教程？

prototypejs.org上提供了一份非常好的原型框架文档，那么为什么要参考本教程呢！

答案是，我们在本教程中将所有最常用的功能放在一起。其次，我们解释了所有有用的方法以及合适的示例，这些方法在官方网站上没有提供。

如果您是Prototype Framework的高级用户，那么您可以直接跳转到官方网站，否则本教程对您来说可能是一个很好的开始，您可以像参考手册一样使用它。