ต้นแบบ
ผู้เขียนต้นฉบับ	แซม สตีเฟนสัน
นักพัฒนา	ทีมหลักของต้นแบบ
ปล่อย	กุมภาพันธ์ พ.ศ. 2548 ( 2548-2548 )
เวอร์ชันเสถียร	1.7.3 / 22 กันยายน 2558 ( 22 กันยายน 2015 )
เขียนเป็น	โค้ด JavaScript
พิมพ์	ไลบรารี JavaScript
ใบอนุญาต	ใบอนุญาต MIT
เว็บไซต์	prototypejs .org
ที่เก็บข้อมูล	github.com/prototypejs/prototype​​​

Prototype JavaScript Frameworkเป็นเฟรมเวิร์ก JavaScript ที่สร้างโดย Sam Stephenson ในเดือนกุมภาพันธ์ 2005 โดยเป็นส่วนหนึ่งของ การสนับสนุน AjaxในRuby on Railsมันถูกนำไปใช้ในรูปแบบไฟล์โค้ด JavaScript ไฟล์เดียว ซึ่งโดยปกติจะตั้งชื่อว่าPrototype Prototype ถูกแจกจ่ายในรูปแบบสแตนด์อโลน แต่ก็เป็นส่วนหนึ่งของโปรเจกต์ขนาดใหญ่ เช่น Ruby on Rails, script.aculo.us และ Rico ด้วย ณ เดือนมีนาคม 2021 ตามข้อมูลของ w3techs พบว่า 0.6% ของเว็บไซต์ทั้งหมดใช้ Prototype ^{[ 1 ]}prototype.js

Prototype มีฟังก์ชันหลากหลายสำหรับการพัฒนาแอปพลิเคชัน JavaScript ฟีเจอร์ต่างๆ มีตั้งแต่ทางลัดในการเขียนโปรแกรมไปจนถึงฟังก์ชันหลักสำหรับการจัดการกับ XMLHttpRequest

Prototype ยังมีฟังก์ชันไลบรารีเพื่อรองรับคลาสและวัตถุตามคลาส อีกด้วย ^{[ 2 ]}ใน JavaScript การสร้างวัตถุจะ ใช้ ต้นแบบแทน กล่าวคือ ฟังก์ชันการสร้างวัตถุสามารถมีprototypeคุณสมบัติ และวัตถุใดๆ ที่กำหนดให้กับคุณสมบัตินั้นจะถูกใช้เป็นต้นแบบสำหรับวัตถุที่สร้างด้วยฟังก์ชันนั้น เฟรมเวิร์ก Prototype ไม่ควรสับสนกับคุณลักษณะของภาษาดังกล่าว

ฟังก์ชันดอลลาร์ , $(), สามารถใช้เป็นตัวย่อสำหรับ ฟังก์ชัน getElementByIdได้ ในการอ้างถึงองค์ประกอบในDocument Object Model (DOM) ของ หน้า HTMLฟังก์ชันที่ใช้ระบุองค์ประกอบโดยทั่วไปคือ:

document.getElementById ( "id_of_element" ) . style.color = " # ffffff " ;

ฟังก์ชัน $() ช่วยลดโค้ดให้เหลือเพียง:

$ ( "id_of_element" ). setStyle ({ color : '#ffffff' });

ฟังก์ชัน $() ยังสามารถรับองค์ประกอบเป็นพารามิเตอร์ได้ และจะส่งคืนออบเจ็กต์ต้นแบบที่ขยายแล้ว ดังเช่นในตัวอย่างก่อนหน้านี้

var domElement = document.getElementById ( " id_of_element" ); // ส่งคืนการอ้างอิงวัตถุตามปกติvar prototypeEnhancedDomElement = $ ( domElement ) ; // การอ้างอิงวัตถุแบบขยายของต้นแบบ

หมายเหตุ : เช่นเดียวกับเครื่องหมายขีดล่าง ( __) $อักขระนี้เป็น "อักขระคำ" ที่ถูกต้องตามกฎในตัวระบุของ JavaScript และไม่มีความสำคัญอื่นใดในภาษา มันถูกเพิ่มเข้ามาในภาษาพร้อมกับการรองรับนิพจน์ปกติเพื่อให้ สามารถจำลองตัวแปรการจับคู่แบบ Perlได้เช่น$`และ$'

โดยต่อยอดจาก$()ฟังก์ชันเดิม$F()ฟังก์ชันนี้จะส่งคืนค่าขององค์ประกอบฟอร์มที่ร้องขอ สำหรับช่องป้อนข้อมูลแบบ 'ข้อความ' ฟังก์ชันจะส่งคืนข้อมูลที่อยู่ในองค์ประกอบนั้น สำหรับช่องป้อนข้อมูลแบบ 'เลือก' ฟังก์ชันจะส่งคืนค่าที่เลือกอยู่ในปัจจุบัน

$F ( "id_of_input_element" )

ฟังก์ชัน`dollar dollar`คือเครื่องมือเลือกองค์ประกอบCSS ของ Prototype มันจะส่งคืนองค์ประกอบทั้งหมดที่ตรงกัน โดยใช้กฎเดียวกันกับตัวเลือกในสไตล์ชีต CSS ตัวอย่างเช่น หากคุณต้องการรับ<a>องค์ประกอบทั้งหมดที่มีคลาส "pulsate" คุณจะใช้ดังต่อไปนี้:

$$ ( "a.pulsate" )

ฟังก์ชันนี้จะส่งคืนชุดขององค์ประกอบ หากคุณใช้ส่วนขยาย script.aculo.us ของไลบรารี Prototype หลัก คุณสามารถใช้เอฟเฟกต์ "pulsate" (กระพริบ) ได้ดังนี้:

$$ ( "a.ชีพจร" ) แต่ละอัน( ผลกระทบ. พัลส์);

เพื่อลดปริมาณโค้ดที่จำเป็นในการเรียกใช้XMLHttpRequestฟังก์ชันที่ใช้งานได้กับหลายเบราว์เซอร์ Prototype จึงมีAjaxอ็อบเจ็กต์สำหรับแยกส่วนเบราว์เซอร์ต่างๆ โดยมีเมธอดหลักสองเมธอดคือ `get()` Ajax.Request()และ ` get()` อ็อบเจ็กต์ ` Ajax.Updater()get()` มีสองรูปแบบ คือ `get()` ส่งคืนเอาต์พุต XML ดิบจากการเรียกใช้ AJAX ในขณะที่ `get() ` จะแทรกค่าที่ส่งคืนเข้าไปในอ็อบเจ็กต์ DOM ที่ระบุไว้ โค้ดด้านล่างจะค้นหาค่าปัจจุบันขององค์ประกอบอินพุตฟอร์ม HTML สองรายการ ส่งคำขอ HTTP POST ไปยังเซิร์ฟเวอร์พร้อมกับคู่ชื่อ/ค่าขององค์ประกอบเหล่านั้น และเรียกใช้ฟังก์ชันที่กำหนดเอง (เรียกใช้ด้านล่าง) เมื่อได้รับคำตอบ HTTP จากเซิร์ฟเวอร์: AjaxAjax.RequestAjax.UpdaterAjax.RequestshowResponse

Ajax ใหม่. Request ( "http://localhost/server_script" , { parameters : { value1 : $F ( "form_element_id_1" ), value2 : $F ( "form_element_id_2" ) }, onSuccess : showResponse , onFailure : showError });

นอกจากนี้ Prototype ยังเพิ่มการรองรับการเขียนโปรแกรมเชิงวัตถุแบบดั้งเดิมมากขึ้นด้วยClass.create()วิธีนี้ใช้ในการสร้างคลาสใหม่ จากนั้นคลาสจะได้รับค่าprototypeซึ่งทำหน้าที่เป็นแบบแผนสำหรับอินสแตนซ์ของคลาส

var FirstClass = Class.create ( { // เมธอด initialize ทำหน้าที่เป็นคอนสตรัคเตอร์initialize : function ( ) { this.data = " Hello World" ; } });

ขยายคลาสอื่น:

Ajax.Request = Class.create ( Ajax.Base , { // เขียนทับเมธอดinitialize initialize : function ( url , options ) { this.transport = Ajax.getTransport ( ); this.setOptions ( options ) ; this.request ( url ) ; } , // ... เพิ่มเมธอดอื่นๆ... } ) ;

ฟังก์ชันเฟรมเวิร์กObject.extend(dest, src)รับอ็อบเจ็กต์สองตัวเป็นพารามิเตอร์ และคัดลอกคุณสมบัติของอ็อบเจ็กต์ตัวที่สองไปยังอ็อบเจ็กต์ตัวแรกเพื่อจำลองการสืบทอด อ็อบเจ็กต์ที่รวมกันแล้วจะถูกส่งคืนเป็นผลลัพธ์จากฟังก์ชันเช่นกัน ดังตัวอย่างข้างต้น พารามิเตอร์ตัวแรกมักจะสร้างอ็อบเจ็กต์พื้นฐาน ในขณะที่พารามิเตอร์ตัวที่สองเป็นอ็อบเจ็กต์นิรนามที่ใช้สำหรับกำหนดคุณสมบัติเพิ่มเติมเท่านั้น การประกาศคลาสย่อยทั้งหมดเกิดขึ้นภายในวงเล็บของการเรียกใช้ฟังก์ชัน

แตกต่างจากไลบรารี JavaScript อื่นๆ เช่นjQuery Prototype ขยาย DOM มีแผนที่จะเปลี่ยนแปลงสิ่งนี้ในเวอร์ชันหลักถัดไปของไลบรารี^{[ 3 ]}

ในเดือนเมษายน พ.ศ. 2553 บล็อกเกอร์ Juriy 'kangax' Zaytsev (จาก Prototype Core) ได้อธิบายอย่างละเอียดถึงปัญหาที่อาจเกิดขึ้นจากการแก้ไขเมธอดและคุณสมบัติใหม่ลงในอ็อบเจ็กต์ที่กำหนดโดย W3C DOM ^{[ 3 ]}แนวคิดเหล่านี้สะท้อนความคิดที่เผยแพร่ในเดือนมีนาคม พ.ศ. 2553 โดยนักพัฒนาของ Yahoo! Nicholas C. Zakas ^{[ 4 ]}ซึ่งสรุปได้ดังนี้^{[ 5 ]}

• ปัญหาที่พบในเบราว์เซอร์ต่างๆ: วัตถุโฮสต์ไม่เป็นไปตามกฎ พฤติกรรม DOM ของ IE ไม่เป็นไปตามข้อกำหนด เป็นต้น
• โอกาสที่จะเกิดการชนกันของชื่อ
• ค่าใช้จ่ายด้านประสิทธิภาพ

ภายในปี 2008 ปัญหาเฉพาะเกี่ยวกับการใช้เมธอดส่วนขยาย DOM ใน Prototype เวอร์ชันเก่า ร่วมกับเบราว์เซอร์เวอร์ชันใหม่กว่า ได้รับการบันทึกไว้แล้ว^{[ 6 ]}แทนที่จะเพิ่มเมธอดและคุณสมบัติใหม่ให้กับออบเจ็กต์ DOM 'โฮสต์' ที่มีอยู่ก่อนแล้ว เช่นElementวิธีelement.hide()แก้ปัญหาเหล่านี้คือการจัดเตรียมออบเจ็กต์ตัวห่อหุ้มรอบออบเจ็กต์โฮสต์เหล่านี้ และใช้งานเมธอดใหม่บนออบเจ็กต์เหล่านั้นjQueryเป็นออบเจ็กต์ตัวห่อหุ้มดังกล่าวในไลบรารีชื่อเดียวกัน^{[ 3 ]}

• เอแจ็กซ์ (การเขียนโปรแกรม)
• การเปรียบเทียบเฟรมเวิร์ก JavaScript
• เฟรมเวิร์ก JavaScript Mootools
• jQuery
• เฟรมเวิร์ก JavaScript
• ไลบรารี JavaScript

• เว็บไซต์อย่างเป็นทางการ