Nguyên mẫu - Tổng quan

Nguyên mẫu là gì?

Prototype là một Khung JavaScript nhằm mục đích dễ dàng phát triển các ứng dụng web động. Nguyên mẫu được phát triển bởi Sam Stephenson.

Prototype là một thư viện JavaScript, cho phép bạn thao tác DOM một cách rất dễ dàng và thú vị mà cũng an toàn (trình duyệt chéo).

Scriptaculous và các thư viện khác, chẳng hạn như Rico được xây dựng dựa trên nền tảng của Prototype để tạo ra các widget và các thứ khác cho người dùng cuối.

Prototype -

Mở rộng các phần tử DOM và các loại tích hợp với các phương thức hữu ích.
Có hỗ trợ tích hợp cho OOP kiểu lớp bao gồm cả kế thừa.
Có hỗ trợ nâng cao cho quản lý sự kiện.
Có các tính năng Ajax mạnh mẽ.
Không phải là một khung phát triển ứng dụng hoàn chỉnh.
Không cung cấp tiện ích con hoặc tập hợp đầy đủ các thuật toán tiêu chuẩn hoặc hệ thống I / O.

Làm thế nào để cài đặt nguyên mẫu?

Nguyên mẫu được phân phối dưới dạng một tệp duy nhất có tên là prototype.js. Làm theo các bước được đề cập dưới đây để thiết lập thư viện nguyên mẫu -

Truy cập trang tải xuống (http://prototypejs.org/download/) để tải phiên bản mới nhất trong một gói tiện lợi.
Bây giờ, hãy đặt tệp prototype.js vào thư mục trên trang web của bạn, ví dụ: / javascript.

Bây giờ bạn đã sẵn sàng để sử dụng khuôn khổ Nguyên mẫu mạnh mẽ trong các trang web của mình.

Làm thế nào để sử dụng Thư viện Nguyên mẫu?

Bây giờ, bạn có thể bao gồm tập lệnh Prototype như sau:

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

Thí dụ

Đây là một ví dụ đơn giản cho thấy cách bạn có thể sử dụng hàm $ () của Prototype để lấy các phần tử DOM trong JavaScript của bạn -

<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>

Đầu ra

Tại sao Hướng dẫn này?

Một tài liệu rất tốt về Prototype Framework có sẵn tại prototypejs.org, vậy tại sao bạn nên tham khảo hướng dẫn này!

Câu trả lời là chúng tôi đã tổng hợp tất cả các chức năng được sử dụng phổ biến nhất lại với nhau trong hướng dẫn này. Thứ hai, chúng tôi đã giải thích tất cả các phương pháp hữu ích cùng với các ví dụ phù hợp, không có sẵn trên trang web chính thức.

Nếu bạn là người dùng nâng cao của Prototype Framework, thì bạn có thể chuyển trực tiếp đến trang web chính thức, nếu không thì hướng dẫn này có thể là một khởi đầu tốt cho bạn và bạn có thể sử dụng nó như một hướng dẫn tham khảo.