ต้นแบบ - ภาพรวม

Prototype คืออะไร?

Prototype คือ JavaScript Framework ที่มีจุดมุ่งหมายเพื่อลดความยุ่งยากในการพัฒนาเว็บแอปพลิเคชันแบบไดนามิก ต้นแบบได้รับการพัฒนาโดย Sam Stephenson

Prototype เป็นไลบรารี JavaScript ซึ่งช่วยให้คุณจัดการ DOM ได้อย่างง่ายดายและสนุกสนานซึ่งปลอดภัย (ข้ามเบราว์เซอร์)

Scriptaculousและไลบรารีอื่น ๆ เช่นRicoสร้างขึ้นจากรากฐานของ Prototype เพื่อสร้างวิดเจ็ตและสิ่งอื่น ๆ สำหรับผู้ใช้ปลายทาง

Prototype -

ขยายองค์ประกอบ DOM และชนิดในตัวด้วยวิธีการที่มีประโยชน์
มีการรองรับ OOP แบบคลาสในตัวรวมถึงการสืบทอด
มีการสนับสนุนขั้นสูงสำหรับการจัดการเหตุการณ์
มีคุณสมบัติ Ajax ที่มีประสิทธิภาพ
ไม่ใช่กรอบการพัฒนาแอปพลิเคชันที่สมบูรณ์
ไม่มีวิดเจ็ตหรืออัลกอริทึมมาตรฐานหรือระบบ I / O ครบชุด

วิธีการติดตั้ง Prototype?

Prototype ถูกแจกจ่ายเป็นไฟล์เดียวที่เรียกว่า Prototype.js ทำตามขั้นตอนที่กล่าวถึงด้านล่างเพื่อตั้งค่าไลบรารีต้นแบบ -

ไปที่หน้าดาวน์โหลด(http://prototypejs.org/download/)เพื่อดาวน์โหลดเวอร์ชันล่าสุดในแพ็คเกจที่สะดวก
ตอนนี้ใส่ไฟล์ prototype.js ในไดเร็กทอรีของเว็บไซต์ของคุณเช่น / javascript

ตอนนี้คุณพร้อมที่จะใช้กรอบงานต้นแบบที่มีประสิทธิภาพในหน้าเว็บของคุณแล้ว

วิธีใช้ไลบรารีต้นแบบ

ตอนนี้คุณสามารถรวมสคริปต์ต้นแบบได้ดังนี้ -

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

ตัวอย่าง

นี่คือตัวอย่างง่ายๆที่แสดงให้เห็นว่าคุณสามารถใช้ฟังก์ชัน $ () ของ Prototype เพื่อรับองค์ประกอบ DOM ใน JavaScript ของคุณได้อย่างไร -

<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 Framework มีอยู่ที่prototypejs.orgแล้วทำไมต้องอ้างถึงบทช่วยสอนนี้!

คำตอบคือเราได้รวบรวมฟังก์ชันที่ใช้บ่อยทั้งหมดไว้ด้วยกันในบทช่วยสอนนี้ ประการที่สองเราได้อธิบายวิธีการที่มีประโยชน์ทั้งหมดพร้อมกับตัวอย่างที่เหมาะสมซึ่งไม่มีในเว็บไซต์อย่างเป็นทางการ

หากคุณเป็นผู้ใช้ Prototype Framework ขั้นสูงคุณสามารถข้ามไปที่เว็บไซต์อย่างเป็นทางการได้โดยตรงมิฉะนั้นบทช่วยสอนนี้อาจเป็นการเริ่มต้นที่ดีสำหรับคุณและคุณสามารถใช้เป็นเหมือนคู่มืออ้างอิงได้