ต้นแบบ - คู่มือฉบับย่อ

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 ขั้นสูงคุณสามารถข้ามไปที่เว็บไซต์อย่างเป็นทางการได้โดยตรงมิฉะนั้นบทช่วยสอนนี้อาจเป็นการเริ่มต้นที่ดีสำหรับคุณและคุณสามารถใช้เป็นเหมือนคู่มืออ้างอิงได้

ตอนนี้เรามาดูกันว่า Prototype สามารถทำอะไรให้เราพัฒนา Dynamic Web Application ได้โดยเฉพาะ

การสนับสนุนข้ามเบราว์เซอร์

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

Document Object Model

Prototype มีวิธีการช่วยเหลือที่ช่วยลดความเครียดของการเขียนโปรแกรม DOM การใช้ Prototype คุณสามารถจัดการ DOM ได้อย่างง่ายดาย

แบบฟอร์ม HTML

ด้วย Ajax กลไกการป้อนข้อมูลอื่น ๆ เช่นการลากและวางสามารถใช้เป็นส่วนหนึ่งของการสนทนาระหว่างเบราว์เซอร์และเซิร์ฟเวอร์ ด้วยการเขียนโปรแกรม JavaScript แบบเดิมการจับอินพุตเหล่านี้และส่งผ่านไปยังเซิร์ฟเวอร์ทำได้ยาก Prototype มีชุดยูทิลิตี้สำหรับการทำงานกับรูปแบบ HTML

เหตุการณ์ JavaScript

Prototype ให้การสนับสนุนข้ามเบราว์เซอร์ที่ยอดเยี่ยมในขณะที่เข้ารหัสเหตุการณ์และยังขยายอ็อบเจ็กต์ Function เพื่อให้ง่ายต่อการทำงานกับการจัดการเหตุการณ์

ยูทิลิตี้ Ajax

คุณสมบัติที่สำคัญที่สุดของ Prototype คือรองรับ Ajax เบราว์เซอร์หลักทั้งหมดสนับสนุนเวอร์ชันของอ็อบเจ็กต์ XMLHttpRequest ที่ทำให้ Ajax เป็นไปได้ไม่ว่าจะเป็นคอมโพเนนต์ ActiveX หรือเป็นอ็อบเจ็กต์ JavaScript ดั้งเดิม

อย่างไรก็ตาม XMLHttpRequest เปิดเผยโปรโตคอล HTTP ในระดับที่ต่ำมากซึ่งทำให้นักพัฒนามีพลังมาก แต่ยังต้องการให้เธอเขียนโค้ดจำนวนมากเพื่อทำสิ่งง่ายๆ

Prototype ใช้ระบบการสืบทอดอ็อบเจ็กต์ของตัวเองเพื่อจัดเตรียมลำดับชั้นของอ็อบเจ็กต์ตัวช่วย Ajax โดยคลาสพื้นฐานทั่วไปจะถูกซับคลาสโดยตัวช่วยที่เน้นมากขึ้นซึ่งอนุญาตให้ประเภทของคำขอ Ajax ที่พบมากที่สุดสามารถเข้ารหัสในบรรทัดเดียวได้

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

วิธีการเหล่านี้เป็นหนึ่งในเสาหลักของการเข้ารหัส JavaScript ที่ใช้ต้นแบบที่มีประสิทธิภาพ ใช้เวลาศึกษาเพื่อทำความคุ้นเคยกับวิธีการต่างๆ

บทนี้ให้รายละเอียดเกี่ยวกับวิธีการที่เป็นประโยชน์เหล่านี้พร้อมตัวอย่าง

ส.	วิธีการและคำอธิบาย
1.	$ () หากมีสตริงให้ส่งคืนองค์ประกอบในเอกสารที่มี ID ที่ตรงกัน มิฉะนั้นจะส่งคืนองค์ประกอบที่ผ่าน
2.	$$ () ใช้ตัวเลือก CSS (สตริง) ตามจำนวนที่กำหนดเองและส่งคืนอาร์เรย์ลำดับเอกสารขององค์ประกอบ DOM แบบขยายที่ตรงกับองค์ประกอบใด ๆ
3.	$ ก () แปลงอาร์กิวเมนต์เดียวที่ได้รับเป็นวัตถุ Array
4.	$ F () ส่งกลับค่าของตัวควบคุมฟอร์ม นี่คือนามแฝงเพื่อความสะดวกของ Form.Element.getValue
5.	$ H () แปลงวัตถุเป็นวัตถุ Hash ที่แจกแจงได้ซึ่งคล้ายกับอาร์เรย์ที่เชื่อมโยงกัน
6.	$ R () สร้างวัตถุ ObjectRange ใหม่
7.	$ w () แยกสตริงออกเป็น Array โดยถือว่าช่องว่างทั้งหมดเป็นตัวคั่น
8.	ลองสิ่งเหล่านี้ ยอมรับฟังก์ชันตามจำนวนที่กำหนดและส่งกลับผลลัพธ์ของฟังก์ชันแรกที่ไม่ทำให้เกิดข้อผิดพลาด

document.getElementsByClassName

วิธีการนี้จะดึงข้อมูล (และขยาย) องค์ประกอบทั้งหมดที่มีชื่อคลาส CSS ของclassName

อย่างไรก็ตามวิธีนี้ได้เลิกใช้แล้วใน Prototype เวอร์ชันล่าสุด

ธาตุวัตถุมีฟังก์ชันยูทิลิตี้ต่าง ๆ สำหรับการจัดการองค์ประกอบได้ใน DOM

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

ดังนั้นการเขียน Element.show ('firstDiv'); เหมือนกับการเขียน $ ('firstDiv'). show ();

วิธีองค์ประกอบต้นแบบ

NOTE - ตรวจสอบให้แน่ใจว่าคุณมีต้นแบบอย่างน้อย 1.6 js

ส.	วิธีการและคำอธิบาย
1.	ทำให้สมบูรณ์ () เปลี่ยนองค์ประกอบให้เป็นองค์ประกอบในตำแหน่งที่แน่นอนโดยไม่ต้องเปลี่ยนตำแหน่งในเค้าโครงหน้า
2.	addClassName () เพิ่มชื่อคลาส CSS ที่กำหนดให้กับชื่อคลาสขององค์ประกอบ
3.	addMethods () ทำให้สามารถผสมผสานวิธีการของคุณเองกับออบเจ็กต์ Element ซึ่งคุณสามารถใช้เป็นวิธีการขยายองค์ประกอบได้ในภายหลัง
4.	ที่อยู่ติดกัน () ค้นหาพี่น้องทั้งหมดขององค์ประกอบปัจจุบันที่ตรงกับตัวเลือกที่กำหนด
5.	บรรพบุรุษ () รวบรวมบรรพบุรุษขององค์ประกอบทั้งหมดและส่งคืนเป็นอาร์เรย์ขององค์ประกอบเพิ่มเติม
6.	childElements () รวบรวมลูกขององค์ประกอบทั้งหมดและส่งคืนเป็นอาร์เรย์ขององค์ประกอบเพิ่มเติม
7.	classNames() เลิกใช้แล้ว ส่งคืนอินสแตนซ์ใหม่ของ ClassNames ซึ่งเป็นอ็อบเจ็กต์ Enumerable ที่ใช้ในการอ่านและเขียนชื่อคลาส CSS ขององค์ประกอบ
8.	cleanWhitespace () ลบโหนดข้อความทั้งหมดขององค์ประกอบซึ่งมีเฉพาะช่องว่าง ส่งคืนองค์ประกอบ
9.	clonePosition () โคลนตำแหน่งและ / หรือขนาดของแหล่งที่มาไปยังองค์ประกอบตามที่กำหนดโดยตัวเลือกอาร์กิวเมนต์ที่เป็นทางเลือก
10.	cumulativeOffset () ส่งคืนค่าชดเชยขององค์ประกอบจากมุมบนซ้ายของเอกสาร
11.	cumulativeScrollOffset () คำนวณค่าชดเชยการเลื่อนสะสมขององค์ประกอบในคอนเทนเนอร์การเลื่อนแบบซ้อนกัน
12.	ลูกหลานของ () ตรวจสอบว่าองค์ประกอบนั้นเป็นลูกหลานของบรรพบุรุษหรือไม่
13.	ลูกหลาน () รวบรวมลูกหลานขององค์ประกอบทั้งหมดและส่งคืนเป็นอาร์เรย์ขององค์ประกอบเพิ่มเติม
14.	ลง() ส่งคืนลูกหลานแรกขององค์ประกอบที่ตรงกับ cssRule หากไม่มีการระบุ cssRule จะถือว่าผู้สืบทอดทั้งหมด หากไม่มีผู้สืบทอดตรงกับเกณฑ์เหล่านี้ระบบจะส่งคืนที่ไม่ได้กำหนด
15.	ว่างเปล่า () ทดสอบว่าองค์ประกอบว่างเปล่า (กล่าวคือมีเฉพาะช่องว่าง)
16.	ขยาย () ขยายองค์ประกอบด้วยวิธีการทั้งหมดที่มีอยู่ใน Element.Methods และ Element.Methods.Simulated
17.	ไฟ() เริ่มเหตุการณ์ที่กำหนดเองโดยมีองค์ประกอบปัจจุบันเป็นเป้าหมาย
18.	firstDescendant () ส่งคืนลูกคนแรกที่เป็นองค์ประกอบ สิ่งนี้ตรงข้ามกับคุณสมบัติ firstChild DOM ซึ่งจะส่งคืนโหนดใด ๆ
19.	getDimensions () ค้นหาความกว้างและความสูงที่คำนวณได้ขององค์ประกอบและส่งกลับเป็นคู่คีย์ / ค่าของออบเจ็กต์
20.	getElementsByClassName เลิกใช้แล้ว ดึงลูกหลานขององค์ประกอบทั้งหมดซึ่งมีคลาส CSS ของ className และส่งกลับเป็นอาร์เรย์ขององค์ประกอบเพิ่มเติม โปรดใช้ $$ ()
21.	getElementsBySelector เลิกใช้แล้ว ใช้ตัวเลือก CSS (สตริง) ตามจำนวนที่กำหนดและส่งกลับอาร์เรย์ของลูกส่วนขยายขององค์ประกอบที่ตรงกับองค์ประกอบใด ๆ โปรดใช้ $$ ()
22.	getHeight () ค้นหาและส่งคืนความสูงขององค์ประกอบที่คำนวณได้
23.	getOffsetParent () ส่งคืนบรรพบุรุษที่อยู่ใกล้ที่สุดขององค์ประกอบ หากไม่พบองค์ประกอบของร่างกายจะถูกส่งกลับ
24.	getStyle () ส่งกลับค่าคุณสมบัติ CSS ที่กำหนดขององค์ประกอบ คุณสมบัติสามารถระบุได้ในรูปแบบ CSS หรือรูปแบบอูฐ
25.	getWidth () ค้นหาและส่งกลับความกว้างที่คำนวณขององค์ประกอบ
26.	hasClassName () ตรวจสอบว่าองค์ประกอบมี CSS className ที่กำหนดหรือไม่
27.	ซ่อน () ซ่อนและส่งคืนองค์ประกอบ
28.	แยกแยะ() ส่งคืนแอตทริบิวต์ id ขององค์ประกอบหากมีอยู่หรือตั้งค่าและส่งคืน id เฉพาะที่สร้างขึ้นโดยอัตโนมัติ
29.	immediateDescendants() เลิกใช้แล้ว รวบรวมลูกหลานขององค์ประกอบทั้งหมด (เช่นลูก) และส่งคืนเป็นอาร์เรย์ขององค์ประกอบเพิ่มเติม โปรดใช้ childElements ()
30.	แทรก() แทรกเนื้อหาก่อนหลังที่ด้านบนหรือด้านล่างขององค์ประกอบ
31.	ตรวจสอบ () ส่งกลับการแสดงสตริงที่มุ่งเน้นการดีบักขององค์ประกอบ
32.	makeClipping () จำลองคุณสมบัติคลิป CSS ที่ไม่ได้รับการสนับสนุนโดยตั้งค่าโอเวอร์โฟลว์ขององค์ประกอบเป็น "ซ่อน" ส่งคืนองค์ประกอบ
33.	makePositioned () ช่วยให้สร้าง CSS ที่มีบล็อกได้ง่ายโดยตั้งค่าตำแหน่ง CSS ขององค์ประกอบเป็น "สัมพัทธ์" หากตำแหน่งเริ่มต้นเป็น "คงที่" หรือไม่ได้กำหนด ส่งคืนองค์ประกอบ
34.	การแข่งขัน() ตรวจสอบว่าองค์ประกอบตรงกับตัวเลือก CSS ที่กำหนดหรือไม่
35.	ต่อไป() ส่งคืนพี่น้องต่อไปนี้ขององค์ประกอบที่ตรงกับ cssRule ที่กำหนด
36.	ต่อไป รวบรวมพี่น้องถัดไปขององค์ประกอบทั้งหมดและส่งคืนเป็นอาร์เรย์ขององค์ประกอบเพิ่มเติม
37.	สังเกต() ลงทะเบียนตัวจัดการเหตุการณ์บนองค์ประกอบและส่งคืนองค์ประกอบ
38.	ตำแหน่งออฟเซ็ต () ส่งคืนค่าชดเชยขององค์ประกอบที่สัมพันธ์กับบรรพบุรุษที่อยู่ในตำแหน่งที่ใกล้เคียงที่สุด
39.	ก่อนหน้า () ส่งคืนพี่น้องก่อนหน้าขององค์ประกอบที่ตรงกับ cssRule ที่กำหนด
40.	ก่อนหน้า รวบรวมพี่น้องก่อนหน้าขององค์ประกอบทั้งหมดและส่งคืนเป็นอาร์เรย์ขององค์ประกอบเพิ่มเติม
41.	readAttribute () ส่งคืนค่าแอตทริบิวต์ขององค์ประกอบหรือค่าว่างหากไม่ได้ระบุแอตทริบิวต์
42.	เรียกซ้ำรวบรวม () รวบรวมองค์ประกอบซ้ำ ๆ ที่ความสัมพันธ์ถูกระบุโดยคุณสมบัติ
43.	ทำให้สัมพันธ์กัน () เปลี่ยนองค์ประกอบให้เป็นองค์ประกอบที่อยู่ในตำแหน่งที่ค่อนข้างเหมาะสมโดยไม่ต้องเปลี่ยนตำแหน่งในเค้าโครงหน้า
44.	ลบ () ลบองค์ประกอบออกจากเอกสารอย่างสมบูรณ์และส่งคืน
45.	removeClassName () ลบ CSS className ขององค์ประกอบและส่งคืนองค์ประกอบ
46.	แทนที่ () แทนที่องค์ประกอบตามเนื้อหาของอาร์กิวเมนต์ html และส่งคืนองค์ประกอบที่ถูกลบ
47.	scrollTo () เลื่อนหน้าต่างเพื่อให้องค์ประกอบนั้นปรากฏที่ด้านบนของวิวพอร์ต ส่งคืนองค์ประกอบ
48.	เลือก() ใช้ตัวเลือก CSS (สตริง) ตามจำนวนที่กำหนดและส่งกลับอาร์เรย์ขององค์ประกอบที่สืบทอดเพิ่มเติมที่ตรงกับองค์ประกอบใด ๆ
49.	setOpacity () ตั้งค่าความทึบของภาพขององค์ประกอบในขณะที่ทำงานกับความไม่สอดคล้องกันในเบราว์เซอร์ต่างๆ
50.	setStyle () แก้ไขคุณสมบัติสไตล์ CSS ขององค์ประกอบ
51.	แสดง() แสดงและส่งคืนองค์ประกอบ
52.	พี่น้อง () รวบรวมพี่น้องขององค์ประกอบทั้งหมดและส่งคืนเป็นอาร์เรย์ขององค์ประกอบเพิ่มเติม
53.	หยุดการสังเกต () Unregisters handler และส่งคืนองค์ประกอบ
54.	สลับ () สลับการมองเห็นองค์ประกอบ
55.	toggleClassName () สลับ CSS className ขององค์ประกอบและส่งคืนองค์ประกอบ
56.	เลิกทำคลิป () ตั้งค่าคุณสมบัติ CSS overflow ขององค์ประกอบกลับไปเป็นค่าที่มีก่อนที่จะใช้ Element.makeClipping () ส่งคืนองค์ประกอบ
57.	เลิกทำตำแหน่ง () ตั้งค่าองค์ประกอบกลับไปเป็นสถานะก่อนที่จะใช้ Element.makePositioned ส่งคืนองค์ประกอบ
58.	ขึ้น () ส่งคืนบรรพบุรุษแรกขององค์ประกอบที่ตรงกับ cssRule ที่กำหนด
59.	ปรับปรุง () แทนที่เนื้อหาขององค์ประกอบด้วยอาร์กิวเมนต์ newContent ที่ระบุและส่งคืนองค์ประกอบ
60.	วิวพอร์ตออฟเซ็ต () ส่งคืนพิกัด X / Y ขององค์ประกอบที่สัมพันธ์กับวิวพอร์ต
61.	มองเห็นได้ () ส่งคืนบูลีนที่ระบุว่าสามารถมองเห็นองค์ประกอบได้หรือไม่
62.	ห่อ () ห่อองค์ประกอบไว้ในอีกองค์ประกอบหนึ่งจากนั้นส่งกลับกระดาษห่อหุ้ม
63.	writeAttribute () เพิ่มระบุหรือลบแอตทริบิวต์ที่ส่งผ่านเป็นแฮชหรือคู่ชื่อ / ค่า

Prototype ขยายหมายเลข JavaScript ดั้งเดิมเพื่อให้ -

ความเข้ากันได้ของ ObjectRange ผ่าน Number # succ
ลูปตัวเลขเหมือนรูบี้ที่มี Number # ครั้ง
วิธีการยูทิลิตี้ง่ายๆเช่น Number # toColorPart และ Number # toPaddedString

นี่คือรายการฟังก์ชันทั้งหมดพร้อมตัวอย่างการจัดการกับ Numbers

วิธีหมายเลขต้นแบบ

NOTE - ตรวจสอบให้แน่ใจว่าคุณมี Prototype.js เวอร์ชัน 1.6

ส.	วิธีการและคำอธิบาย
1.	เอบีเอส () ส่งคืนค่าสัมบูรณ์ของตัวเลข
2.	เพดาน () ส่งคืนจำนวนเต็มที่น้อยที่สุดที่มากกว่าหรือเท่ากับจำนวน
3.	ชั้น () ส่งคืนจำนวนเต็มที่มากที่สุดน้อยกว่าหรือเท่ากับจำนวน
4.	รอบ() ปัดเศษตัวเลขให้เป็นจำนวนเต็มที่ใกล้เคียงที่สุด
5.	ซัค () ส่งกลับตัวตายตัวแทนของ Number ปัจจุบันตามที่กำหนดโดย current + 1 ใช้เพื่อทำให้ตัวเลขเข้ากันได้กับ ObjectRange
6.	ครั้ง () ห่อหุ้มลูป [0..n] ปกติแบบรูบี้
7.	toColorPart () สร้างการแสดงตัวเลขฐานสิบหก 2 หลัก (ซึ่งถือว่าอยู่ในช่วง [0..255]) มีประโยชน์สำหรับการเขียนสตริงสี CSS
8.	toJSON () ส่งคืนสตริง JSON
9.	toPaddedString () แปลงตัวเลขเป็นสตริงที่มี 0s เพื่อให้ความยาวของสตริงเท่ากับความยาวเป็นอย่างน้อย

Prototype ปรับปรุงวัตถุ String ด้วยชุดวิธีการที่มีประโยชน์ตั้งแต่เรื่องเล็กน้อยไปจนถึงซับซ้อน

นี่คือรายการฟังก์ชั่นทั้งหมดพร้อมตัวอย่างที่เกี่ยวข้องกับ String

วิธีการสตริงต้นแบบ

NOTE - ตรวจสอบให้แน่ใจว่าคุณมี Prototype.js เวอร์ชัน 1.6

ส.	วิธีการและคำอธิบาย
1.	ว่าง () ตรวจสอบว่าสตริงเป็น "ว่าง" หมายถึงว่างหรือมีเฉพาะช่องว่าง
2.	อูฐ () แปลงสตริงที่คั่นด้วยเครื่องหมายขีดกลางให้เทียบเท่ากับ camelCase ตัวอย่างเช่น "foo-bar" จะถูกแปลงเป็น "fooBar"
3.	ใช้ประโยชน์ () อักษรตัวแรกของสตริงเป็นตัวพิมพ์ใหญ่และลดขนาดตัวอักษรอื่น ๆ ทั้งหมด
4.	dasherize () แทนที่ทุกอินสแตนซ์ของอักขระขีดล่าง ("_") ด้วยเครื่องหมายขีด ("-")
5.	ว่างเปล่า () ตรวจสอบว่าสตริงว่างหรือไม่
6.	ลงท้ายด้วย() ตรวจสอบว่าสตริงลงท้ายด้วยสตริงย่อยหรือไม่
7.	หลบหนี HTML () แปลงอักขระพิเศษ HTML ให้เทียบเท่าเอนทิตี
8.	evalJSON () ประเมิน JSON ในสตริงและส่งคืนอ็อบเจ็กต์ผลลัพธ์
9.	evalScripts () ประเมินเนื้อหาของบล็อกสคริปต์ใด ๆ ที่มีอยู่ในสตริง ส่งคืนอาร์เรย์ที่มีค่าที่ส่งคืนโดยแต่ละสคริปต์
10.	extractScripts () แยกเนื้อหาของบล็อกสคริปต์ใด ๆ ที่มีอยู่ในสตริงและส่งคืนเป็นอาร์เรย์ของสตริง
11.	gsub () ส่งคืนสตริงที่เกิดขึ้นทุกครั้งของรูปแบบที่กำหนดแทนที่ด้วยสตริงปกติค่าที่ส่งคืนของฟังก์ชันหรือสตริงเทมเพลต
12.	รวม () ตรวจสอบว่าสตริงมีสตริงย่อยหรือไม่
13.	ตรวจสอบ () ส่งคืนสตริงเวอร์ชันที่เน้นการดีบัก
14.	สอดแทรก () ถือว่าสตริงเป็นเทมเพลตและเติมด้วยคุณสมบัติของวัตถุ
15.	isJSON () ตรวจสอบว่าสตริงเป็น JSON ที่ถูกต้องหรือไม่โดยใช้นิพจน์ทั่วไป วิธีการรักษาความปลอดภัยนี้เรียกว่าเป็นการภายใน
16.	parseQuery () แยกวิเคราะห์สตริงแบบสอบถามที่เหมือน URI และส่งคืนอ็อบเจ็กต์ที่ประกอบด้วยคู่พารามิเตอร์ / ค่า
17.	สแกน () อนุญาตให้ทำซ้ำทุกครั้งที่เกิดขึ้นของรูปแบบที่กำหนด
18.	เริ่มต้นด้วย() ตรวจสอบว่าสตริงเริ่มต้นด้วยสตริงย่อยหรือไม่
19.	แถบ () ตัดช่องว่างที่นำหน้าและต่อท้ายทั้งหมดออกจากสตริง
20.	สตริปสคริปต์ () ขีดเส้นสตริงของสิ่งที่ดูเหมือนบล็อกสคริปต์ HTML
21.	แท็ก () ขีดเส้นสตริงของแท็ก HTML ใด ๆ
22.	ย่อย () ส่งคืนสตริงที่มีการนับจำนวนครั้งแรกของรูปแบบแทนที่ด้วยสตริงปกติค่าที่ส่งคืนของฟังก์ชันหรือสตริงเทมเพลต
23.	ซัค () ใช้ภายในโดย ObjectRange แปลงอักขระสุดท้ายของสตริงเป็นอักขระต่อไปนี้ในตัวอักษร Unicode
24.	ครั้ง () เชื่อมต่อเวลาในการนับสตริง
25.	toArray () แยกสตริงอักขระทีละอักขระและส่งคืนอาร์เรย์พร้อมผลลัพธ์
26.	toJSON () ส่งคืนสตริง JSON
27.	toQueryParams () แยกวิเคราะห์สตริงแบบสอบถามที่เหมือน URI และส่งคืนอ็อบเจ็กต์ที่ประกอบด้วยคู่พารามิเตอร์ / ค่า
28.	ตัด() ตัดสตริงตามความยาวที่กำหนดและต่อท้ายคำต่อท้าย (ระบุว่าเป็นเพียงข้อความที่ตัดตอนมา)
29.	ขีดล่าง () แปลงสตริงอูฐเป็นชุดคำที่คั่นด้วยเครื่องหมายขีดล่าง ("_")
30.	unescapeHTML () แถบแท็กและแปลงรูปแบบเอนทิตีของอักขระ HTML พิเศษให้เป็นรูปแบบปกติ
31.	ตัวกรอง JSON () แถบตัวคั่นความคิดเห็นรอบ ๆ การตอบสนอง Ajax JSON หรือ JavaScript วิธีการรักษาความปลอดภัยนี้เรียกว่าเป็นการภายใน

Prototype ขยายอาร์เรย์ JavaScript ดั้งเดิมทั้งหมดด้วยวิธีการที่มีประสิทธิภาพเพียงไม่กี่วิธี

ทำได้สองวิธี -

มันผสมในโมดูล Enumerable ซึ่งนำวิธีการมากมายมาให้แล้ว
จะเพิ่มวิธีการพิเศษบางอย่างซึ่งมีการบันทึกไว้ในส่วนนี้

ใช้ Iterators

การสนับสนุนที่สำคัญอย่างหนึ่งของ Prototype คือคุณสามารถใช้ java เช่น iterator ใน JavaScript ดูความแตกต่างด้านล่าง -

วิธีเขียนแบบดั้งเดิมก for วน -

for (var index = 0; index < myArray.length; ++index) {
   var item = myArray[index];
   // Your code working on item here...
}

ตอนนี้ถ้าคุณใช้ Prototype คุณสามารถแทนที่โค้ดด้านบนได้ดังนี้ -

myArray.each(function(item) {
   // Your code working on item here...
});

นี่คือรายการฟังก์ชั่นทั้งหมดพร้อมตัวอย่างการจัดการกับ Array

วิธีการต้นแบบอาร์เรย์

NOTE - ตรวจสอบให้แน่ใจว่าคุณมี Prototype.js เวอร์ชัน 1.6

ส.	วิธีการและคำอธิบาย
1.	ชัดเจน() ล้างอาร์เรย์ (ทำให้ว่างเปล่า)
2.	โคลน () ส่งคืนอาร์เรย์ที่ซ้ำกันโดยปล่อยให้อาร์เรย์เดิมไม่เสียหาย
3.	กะทัดรัด () ส่งคืนอาร์เรย์เวอร์ชันใหม่โดยไม่มีค่า null / ไม่ได้กำหนด
4.	แต่ละ() วนซ้ำบนอาร์เรย์โดยเรียงลำดับดัชนีตัวเลขจากน้อยไปมาก
5.	แรก () ส่งคืนรายการแรกในอาร์เรย์หรือไม่ได้กำหนดไว้หากอาร์เรย์ว่างเปล่า
6.	เรียบ() ส่งคืนอาร์เรย์เวอร์ชัน "แบน" (มิติเดียว)
7.	จาก() โคลนอาร์เรย์ที่มีอยู่หรือสร้างอาร์เรย์ใหม่จากคอลเลกชันที่เหมือนอาร์เรย์
8.	indexOf () ส่งคืนตำแหน่งของการเกิดครั้งแรกของอาร์กิวเมนต์ภายในอาร์เรย์
9.	ตรวจสอบ () ส่งคืนการแสดงสตริงที่เน้นการแก้จุดบกพร่องของอาร์เรย์
10.	ล่าสุด() ส่งคืนรายการสุดท้ายในอาร์เรย์หรือไม่ได้กำหนดว่าอาร์เรย์ว่างเปล่า
11.	ลด() ลดอาร์เรย์: อาร์เรย์องค์ประกอบเดียวจะเปลี่ยนเป็นองค์ประกอบเฉพาะในขณะที่อาร์เรย์หลายองค์ประกอบจะถูกส่งกลับโดยไม่มีการแตะต้อง
12.	ย้อนกลับ () ส่งคืนเวอร์ชันย้อนกลับของอาร์เรย์ ตามค่าเริ่มต้นจะย้อนกลับของเดิมโดยตรง ถ้าอินไลน์ถูกตั้งค่าเป็นเท็จให้ใช้โคลนของอาร์เรย์เดิม
13.	ขนาด() ส่งคืนขนาดของอาร์เรย์
14.	toArray () นี่เป็นเพียงการเพิ่มประสิทธิภาพแบบโลคัลของ Mixed-in toArray จาก Enumerable
15.	toJSON () ส่งคืนสตริง JSON
16.	uniq () สร้างอาร์เรย์เวอร์ชันที่ไม่ซ้ำกัน หากไม่พบรายการที่ซ้ำกันอาร์เรย์เดิมจะถูกส่งกลับ
17.	ไม่มี () สร้างอาร์เรย์เวอร์ชันใหม่ที่ไม่มีค่าใด ๆ ที่ระบุ

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

การสร้างแฮช

มีสองวิธีในการสร้างอินสแตนซ์แฮช -

การใช้คำ JavaScript ใหม่
ฟังก์ชั่นการใช้ต้นแบบยูทิลิตี้$ H

ในการสร้างแฮชว่างคุณสามารถเรียกใช้เมธอดตัวสร้างใด ๆ โดยไม่มีข้อโต้แย้งได้เช่นกัน

ต่อไปนี้เป็นตัวอย่างที่แสดงวิธีการสร้างแฮชการตั้งค่าและการรับค่าด้วยวิธีง่ายๆ -

// Creating Hash
var myhash = new Hash();
var yourhash = new Hash( {fruit: 'apple'} );
var hishash = $H( {drink: 'pepsi'} );

// Set values in terms of key and values.
myhash.set('name', 'Bob');

// Get value of key 'name' as follows.
myhash.get('name');
yourhash.get('fruit');
hishash.get('drink');

// Unset a key & value
myhash.unset('name');
yourhash.unset('fruit');
hishash.unset('drink');

Prototype มีวิธีการมากมายในการประเมิน Hash อย่างง่ายดาย บทช่วยสอนนี้จะอธิบายทุกวิธีโดยละเอียดพร้อมตัวอย่างที่เหมาะสม

นี่คือรายการวิธีการทั้งหมดที่เกี่ยวข้องกับ Hash

วิธีแฮชต้นแบบ

NOTE - ตรวจสอบให้แน่ใจว่าอย่างน้อยต้องมีต้นแบบเวอร์ชัน 1.6 js

ส.	วิธีการและคำอธิบาย
1.	โคลน () ส่งคืนโคลนของแฮช
2.	แต่ละ() วนซ้ำคู่ชื่อ / ค่าในแฮช
3.	รับ () ส่งคืนค่าคุณสมบัติของคีย์แฮช
4.	ตรวจสอบ () ส่งกลับการแสดงสตริงที่เน้นการแก้ปัญหาของแฮช
5.	คีย์ () จัดเตรียมอาร์เรย์ของคีย์ (นั่นคือชื่อคุณสมบัติ) สำหรับแฮช
6.	ผสาน() ผสานวัตถุเข้ากับแฮชและส่งกลับผลลัพธ์ของการผสานนั้น
7.	ลบ () ลบคีย์ออกจากแฮชและส่งคืนค่า วิธีนี้เลิกใช้แล้วในเวอร์ชัน 1.6
8.	ชุด () ตั้งค่าคุณสมบัติของคีย์แฮชเป็นค่าและส่งคืนค่า
9.	toJSON () ส่งคืนสตริง JSON
10.	toObject () ส่งคืนอ็อบเจ็กต์วานิลลาโคลน
11.	toQueryString () เปลี่ยนแฮชเป็นการแสดงสตริงการสืบค้นที่เข้ารหัส URL
12.	ยกเลิกการตั้งค่า () ลบคุณสมบัติของคีย์แฮชและส่งคืนค่า
13.	ปรับปรุง () อัพเดตแฮชด้วยคู่คีย์ / ค่าของออบเจ็กต์ แฮชเดิมจะถูกแก้ไข
14.	ค่า () รวบรวมค่าของแฮชและส่งกลับค่าในอาร์เรย์

วัตถุจะถูกใช้โดยต้นแบบเป็น namespace และจะเรียกฟังก์ชั่นที่เกี่ยวข้องกับการใช้วัตถุวัตถุ ซึ่งใช้ในสองวิธีต่อไปนี้ -

หากคุณเป็นนักพัฒนาที่เรียบง่ายแล้วคุณสามารถใช้ฟังก์ชั่นที่มีอยู่เช่นการตรวจสอบหรือโคลน
หากคุณเป็นคนหนึ่งที่มีความประสงค์ในการสร้างวัตถุของตัวเองเหมือนต้นแบบไม่หรือสำรวจวัตถุราวกับว่าพวกเขา hashes จะหันไปขยาย , คีย์และค่า

วิธีการสร้างวัตถุต้นแบบ

NOTE - ตรวจสอบให้แน่ใจว่าอย่างน้อยต้องมีต้นแบบเวอร์ชัน 1.6 js

ส.	วิธีการและคำอธิบาย
1.	โคลน () โคลนวัตถุที่ส่งผ่านโดยใช้สำเนาตื้น (คัดลอกคุณสมบัติของต้นฉบับทั้งหมดไปยังผลลัพธ์)
2.	ขยาย () คัดลอกคุณสมบัติทั้งหมดจากต้นทางไปยังวัตถุปลายทาง
3.	ตรวจสอบ () ส่งคืนการแสดงสตริงที่เน้นการแก้จุดบกพร่องของวัตถุ
4.	isArray () ส่งกลับค่าจริงถ้า obj เป็นอาร์เรย์มิฉะนั้นจะเป็นเท็จ
5.	isElement () ส่งคืนจริงถ้า obj เป็นโหนด DOM ประเภท 1 มิฉะนั้นจะเป็นเท็จ
6.	isFunction () ส่งคืนจริงถ้า obj เป็นฟังก์ชัน type มิฉะนั้นจะเป็นเท็จ
7.	isHash () ส่งคืนจริงถ้า obj เป็นอินสแตนซ์ของคลาส Hash มิฉะนั้นจะเป็นเท็จ
8.	isNumber () ส่งคืนค่าจริงหาก obj เป็นชนิดจำนวนมิฉะนั้นจะเป็นเท็จ
9.	isString () ส่งคืนจริงถ้า obj เป็นสตริงชนิดมิฉะนั้นจะเป็นเท็จ
10.	isUndefined () ส่งคืนจริงหาก obj เป็นประเภทที่ไม่ได้กำหนดเป็นเท็จเป็นอย่างอื่น
11.	คีย์ () ถือว่าออบเจ็กต์ใด ๆ เป็น Hash และดึงรายการชื่อคุณสมบัติ
12.	toHTML () ส่งคืนค่าที่ส่งคืนของเมธอด toHTML ของ obj หากมีอยู่มิฉะนั้นจะรัน obj ผ่าน String.interpret
13.	toJSON () ส่งคืนสตริง JSON
14.	toQueryString () เปลี่ยนออบเจ็กต์เป็นการแสดงสตริงการสืบค้นที่เข้ารหัส URL
15.	ค่า () ถือว่าวัตถุใด ๆ เป็น Hash และดึงรายการค่าคุณสมบัติ

เทมเพลตใช้สำหรับการจัดรูปแบบกลุ่มของวัตถุที่คล้ายกันและสร้างเอาต์พุตที่จัดรูปแบบสำหรับวัตถุเหล่านี้

Prototype มีคลาสTemplateซึ่งมีสองวิธี -

Template()- นี่คือเมธอด constructor ซึ่งใช้เพื่อสร้างออบเจ็กต์เทมเพลตและเรียกเมธอดeval ()เพื่อใช้เทมเพลต
evaluate() - วิธีนี้ใช้เพื่อใช้เทมเพลตเพื่อจัดรูปแบบวัตถุ

มีสามขั้นตอนที่เกี่ยวข้องในการสร้างเอาต์พุตที่จัดรูปแบบ

Create a template- สิ่งนี้เกี่ยวข้องกับการสร้างข้อความที่จัดรูปแบบไว้ล่วงหน้า ข้อความนี้มีเนื้อหาที่จัดรูปแบบพร้อมด้วย#{fieldName}ค่า เหล่านี้#{fieldName}ค่าจะถูกแทนที่ด้วยค่าจริงเมื่อวิธีการประเมิน ()จะถูกเรียกด้วยค่าจริง
Defining actual values- สิ่งนี้เกี่ยวข้องกับการสร้างค่าที่แท้จริงในรูปแบบของคีย์และค่า คีย์เหล่านี้จะถูกแมปในเทมเพลตและจะถูกแทนที่ด้วยค่าที่เกี่ยวข้อง
Mapping Keys and replacing Values- นี่เป็นขั้นตอนสุดท้ายที่จะเรียกeval ()และคีย์ทั้งหมดที่มีอยู่ในออบเจ็กต์ที่จัดรูปแบบจะถูกแทนที่ด้วยค่าที่กำหนด

ตัวอย่าง 1

ขั้นตอนที่ 1

สร้างเทมเพลต

var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');

ขั้นตอนที่ 2

เตรียมชุดค่าของเราซึ่งจะถูกส่งผ่านไปยังออบเจ็กต์ด้านบนเพื่อให้มีเอาต์พุตที่จัดรูปแบบ

var record1 = {title: 'Metrix', author:'Arun Pandey'};
var record2 = {title: 'Junoon', author:'Manusha'};
var record3 = {title: 'Red Moon', author:'Paul, John'};
var record4 = {title: 'Henai', author:'Robert'};
var records = [record1, record2, record3, record4 ];

ขั้นตอนที่ 3

ขั้นตอนสุดท้ายคือการเติมค่าทั้งหมดในเทมเพลตและสร้างผลลัพธ์สุดท้ายดังนี้ -

records.each( function(conv) {
   alert( "Formatted Output : " + myTemplate.evaluate(conv) );
});

ลองรวบรวมทั้งสามขั้นตอนนี้เข้าด้วยกัน -

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function showResult() {
            //  Create template with formatted content and placeholders.
            var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');
   
            // Create hashes with the required values for placeholders
            var record1 = {title: 'Metrix', author:'Arun Pandey'};
            var record2 = {title: 'Junoon', author:'Manusha'};
            var record3 = {title: 'Red Moon', author:'Paul, John'};
            var record4 = {title: 'Henai', author:'Robert'};
            var records = [record1, record2, record3, record4 ];

            // Now apply template to produce desired formatted output
            records.each( function(conv) {
               alert( "Formatted Output : " + myTemplate.evaluate(conv) );
            });
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br />
      <br />
      <input type = "button" value = "Result" onclick = "showResult();"/>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

เอาต์พุต

คลาส Enumerable มีวิธีการที่เป็นประโยชน์มากมายสำหรับการแจงนับ การแจงนับเป็นวัตถุที่ทำหน้าที่รวบรวมค่า

การแจงนับวิธีการส่วนใหญ่ถูกนำมาใช้เพื่อระบุอาร์เรย์และhashes ยังมีวัตถุอื่น ๆ เช่นObjectRangeและวัตถุที่เกี่ยวข้องกับ DOM- หรือ AJAX ต่างๆที่คุณสามารถใช้วิธีการแจงนับได้

พารามิเตอร์บริบท

ทุกวิธีของ Enumerable ที่ใช้ตัววนซ้ำจะใช้วัตถุบริบทเป็นพารามิเตอร์ถัดไป (ทางเลือก) วัตถุบริบทคือสิ่งที่ตัววนซ้ำจะถูกผูกไว้ดังนั้นthis คำหลักที่อยู่ภายในจะชี้ไปที่วัตถุ

var myObject = {};

['foo', 'bar', 'baz'].each(function(name, index) {
   this[name] = index;
}, myObject); // we have specified the context

myObject;

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

เอาต์พุต

{ foo: 0, bar: 1, baz: 2}

ใช้อย่างมีประสิทธิภาพ

เมื่อคุณต้องการเรียกใช้เมธอดเดียวกันกับองค์ประกอบทั้งหมดให้ใช้วิธีการเรียกใช้ ()
เมื่อคุณต้องการดึงคุณสมบัติเดียวกันในองค์ประกอบทั้งหมดให้ใช้วิธีการถอน ()
findall / เลือกวิธีการดึงองค์ประกอบทั้งหมดที่ตรงกับคำกริยาที่กำหนด ในทางกลับกันวิธีการปฏิเสธ ()จะดึงองค์ประกอบทั้งหมดที่ไม่ตรงกับเพรดิเคต ในกรณีเฉพาะที่คุณต้องการทั้งสองชุดคุณสามารถหลีกเลี่ยงการวนซ้ำสองครั้งได้: เพียงแค่ใช้เมธอดpartition ()

นี่คือรายการวิธีการทั้งหมดที่เกี่ยวข้องกับ Enumerable

วิธีการนับต้นแบบ

NOTE - ตรวจสอบให้แน่ใจว่าคุณมีต้นแบบเวอร์ชัน 1.6 เป็นอย่างน้อย js

ส.	วิธีการและคำอธิบาย
1.	ทั้งหมด() พิจารณาว่าองค์ประกอบทั้งหมดเทียบเท่าบูลีนเป็นจริงไม่ว่าโดยตรงหรือผ่านการคำนวณโดยตัววนซ้ำที่ให้มา
2.	ใด ๆ () พิจารณาว่าอย่างน้อยหนึ่งองค์ประกอบเทียบเท่ากับบูลีนเป็นจริงไม่ว่าโดยตรงหรือผ่านการคำนวณโดยตัววนซ้ำที่ให้มา
3.	เก็บ() ส่งคืนผลลัพธ์ของการใช้ตัววนซ้ำกับแต่ละองค์ประกอบ นามแฝงเป็นแผนที่ ()
4.	ตรวจจับ () ค้นหาองค์ประกอบแรกที่ตัววนซ้ำส่งคืนค่าจริง นามแฝงด้วยวิธี find ()
5.	แต่ละ() ช่วยให้คุณวนซ้ำองค์ประกอบทั้งหมดในรูปแบบทั่วไปจากนั้นคืนค่า Enumerable ซึ่งจะช่วยให้สามารถโทรแบบลูกโซ่ได้
6.	แต่ละชิ้น () จัดกลุ่มรายการเป็นชิ้น ๆ ตามขนาดที่กำหนดโดยชิ้นสุดท้ายอาจมีขนาดเล็กกว่า
7.	รายการ() นามแฝงสำหรับเมธอด toArray ทั่วไป
8.	หา() ค้นหาองค์ประกอบแรกที่ตัววนซ้ำส่งคืนค่าจริง นามแฝงสะดวกสำหรับการตรวจจับ ()
9.	ค้นหาทั้งหมด () ส่งคืนองค์ประกอบทั้งหมดที่ตัววนซ้ำส่งคืนจริง นามแฝงเป็นเลือก ()
10.	grep () ส่งคืนองค์ประกอบทั้งหมดที่ตรงกับตัวกรอง หากมีการจัดเตรียมตัววนซ้ำจะใช้เพื่อสร้างค่าที่ส่งคืนสำหรับแต่ละองค์ประกอบที่เลือก
11.	inGroupsOf () จัดกลุ่มรายการเป็นชิ้นขนาดคงที่โดยใช้ค่าเฉพาะเพื่อเติมเต็มชิ้นสุดท้ายหากจำเป็น
12.	รวม () พิจารณาว่าวัตถุที่ระบุอยู่ใน Enumerable หรือไม่โดยอาศัยตัวดำเนินการเปรียบเทียบ == นามแฝงเป็นสมาชิก ()
13.	ฉีด() สร้างมูลค่าผลลัพธ์เพิ่มขึ้นตามผลลัพธ์ที่ต่อเนื่องของตัววนซ้ำ
14.	เรียก () การเพิ่มประสิทธิภาพสำหรับกรณีการใช้งานทั่วไปของแต่ละ () หรือ collect (): การเรียกใช้เมธอดเดียวกันโดยมีอาร์กิวเมนต์ที่เป็นไปได้เหมือนกันสำหรับองค์ประกอบทั้งหมด
15.	แผนที่() ส่งคืนผลลัพธ์ของการใช้ตัววนซ้ำกับแต่ละองค์ประกอบ นามแฝงสะดวกในการรวบรวม ()
16.	สูงสุด () ส่งคืนองค์ประกอบสูงสุด (หรือการคำนวณตามองค์ประกอบ) หรือไม่ได้กำหนดไว้หากการแจงนับว่างเปล่า องค์ประกอบจะถูกเปรียบเทียบโดยตรงหรือโดยใช้ตัววนซ้ำก่อนและเปรียบเทียบค่าที่ส่งคืน
17.	สมาชิก() พิจารณาว่าวัตถุที่ระบุอยู่ใน Enumerable หรือไม่โดยอาศัยตัวดำเนินการเปรียบเทียบ == นามแฝงสะดวกสำหรับ include ()
18.	นาที() ส่งคืนองค์ประกอบขั้นต่ำ (หรือการคำนวณตามองค์ประกอบ) หรือไม่ได้กำหนดหากการแจงนับว่างเปล่า องค์ประกอบจะถูกเปรียบเทียบโดยตรงหรือโดยใช้ตัววนซ้ำก่อนและเปรียบเทียบค่าที่ส่งคืน
19.	พาร์ติชัน () แบ่งองค์ประกอบออกเป็นสองกลุ่ม: กลุ่มที่ถือว่าเป็นจริงและกลุ่มที่ถือว่าเป็นเท็จ
20.	ถอน () การเพิ่มประสิทธิภาพสำหรับกรณีการใช้งานทั่วไปของการรวบรวม (): การดึงคุณสมบัติเดียวกันสำหรับองค์ประกอบทั้งหมด ส่งคืนค่าคุณสมบัติ
21.	ปฏิเสธ() ส่งคืนองค์ประกอบทั้งหมดที่ตัววนซ้ำส่งคืนเป็นเท็จ
22.	เลือก() นามแฝงสำหรับวิธี findAll ()
23.	ขนาด() ส่งคืนขนาดของการแจงนับ
24.	sortBy () ให้มุมมองที่จัดเรียงแบบกำหนดเองขององค์ประกอบตามเกณฑ์ที่คำนวณสำหรับแต่ละองค์ประกอบโดยตัววนซ้ำ
25.	toArray () ส่งกลับการแสดงอาร์เรย์ของการแจงนับ นามแฝงเป็นรายการ ()
26.	ซิป () รูดซิปเข้าด้วยกัน (ลองนึกถึงซิปบนกางเกงขายาว) 2+ ลำดับโดยให้มีสิ่งทอมากมาย ทูเปิลแต่ละตัวมีหนึ่งค่าต่อลำดับดั้งเดิม

การจัดการเหตุการณ์เป็นหนึ่งในความท้าทายที่ยิ่งใหญ่ที่สุดในการบรรลุการเขียนสคริปต์ข้ามเบราว์เซอร์ ทุกเบราว์เซอร์มีแนวทางในการจัดการจังหวะสำคัญที่แตกต่างกัน

Prototype Framework จัดการปัญหาความเข้ากันได้ข้ามเบราว์เซอร์และช่วยให้คุณปลอดจากปัญหาทั้งหมดที่เกี่ยวข้องกับการจัดการเหตุการณ์

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

เนมสเปซของเหตุการณ์ยังมีรายการรหัสคีย์มาตรฐานที่คุณสามารถใช้กับเหตุการณ์ที่เกี่ยวข้องกับแป้นพิมพ์ ค่าคงที่ต่อไปนี้กำหนดไว้ในเนมสเปซ -

ส.	คีย์คงที่และคำอธิบาย
1.	KEY_BACKSPACE แสดงคีย์ช่องว่างด้านหลัง
2.	KEY_TAB แสดงแป้นแท็บ
3.	KEY_RETURN แสดงคีย์ส่งคืน
4.	KEY_ESC แสดงคีย์ esc
5.	KEY_LEFT แสดงคีย์ซ้าย
6.	KEY_UP แสดงคีย์
7.	KEY_RIGHT แสดงคีย์ขวา
8.	KEY_DOWN แสดงคีย์ลง
9.	KEY_DELETE เป็นตัวแทนของคีย์ลบ
10.	KEY_HOME เป็นตัวแทนของกุญแจบ้าน
11.	KEY_END แสดงรหัสสิ้นสุด
12.	KEY_PAGEUP แสดงคีย์เพจขึ้น
13.	KEY_PAGEDOWN แสดงคีย์หน้าลง

วิธีจัดการเหตุการณ์

ก่อนที่เราจะเริ่มให้เราดูตัวอย่างการใช้วิธีเหตุการณ์ ตัวอย่างนี้แสดงวิธีจับองค์ประกอบ DOM ที่เหตุการณ์เกิดขึ้น

ตัวอย่าง

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         // Register event 'click' and associated call back.
         Event.observe(document, 'click', respondToClick);
  
         // Callback function to handle the event.
         function respondToClick(event) {
            var element = event.element();
            alert("Tag Name : " + element.tagName );
         }
      </script>
   </head>

   <body>
      <p id = "note"> Click on any part to see the result.</p>
      <p id = "para">This is paragraph</p>
      <div id = "division">This is divsion.</div>
   </body>
</html>

เอาต์พุต

นี่คือรายการวิธีการทั้งหมดที่เกี่ยวข้องกับ Event. ฟังก์ชั่นที่คุณมักจะใช้มากเป็นสังเกต , องค์ประกอบและหยุด

วิธีการจัดกิจกรรมต้นแบบ

NOTE - ตรวจสอบให้แน่ใจว่าคุณมีต้นแบบเวอร์ชัน 1.6 เป็นอย่างน้อย js

ส.	วิธีการและคำอธิบาย
1.	ธาตุ() ส่งกลับองค์ประกอบ DOM ที่เหตุการณ์เกิดขึ้น
2.	ขยาย () ขยายเหตุการณ์ด้วยวิธีการทั้งหมดที่มีอยู่ใน Event.Methods
3.	findElement () ส่งกลับองค์ประกอบ DOM แรกที่มีชื่อแท็กที่กำหนดขึ้นจากองค์ประกอบที่เกิดเหตุการณ์
4.	isLeftClick () ตรวจสอบว่าเหตุการณ์เกี่ยวกับเมาส์เกี่ยวกับปุ่มนั้นเกี่ยวกับปุ่ม "ซ้าย" (หลักจริง ๆ ) หรือไม่
5.	สังเกต() ลงทะเบียนตัวจัดการเหตุการณ์บนองค์ประกอบ DOM
6.	ตัวชี้ X () ส่งคืนตำแหน่งแนวนอนที่แน่นอนสำหรับเหตุการณ์เมาส์
7.	ตัวชี้ Y () ส่งคืนตำแหน่งแนวตั้งสัมบูรณ์สำหรับเหตุการณ์เมาส์
8.	หยุด() หยุดการแพร่กระจายของเหตุการณ์และป้องกันไม่ให้การดำเนินการเริ่มต้นถูกทริกเกอร์ในที่สุด
9.	หยุดการสังเกต () ยกเลิกการลงทะเบียนตัวจัดการเหตุการณ์
10.	ยกเลิกการโหลดแคช () ยกเลิกการลงทะเบียนตัวจัดการเหตุการณ์ทั้งหมดที่ลงทะเบียนผ่านการสังเกตการณ์ ต่อสายโดยอัตโนมัติสำหรับคุณ ไม่สามารถใช้ได้ตั้งแต่ 1.6

Prototype เป็นวิธีง่ายๆในการจัดการฟอร์ม HTML Prototype's Form คือเนมสเปซและโมดูลสำหรับทุกสิ่งที่เกี่ยวข้องกับฟอร์มที่อัดแน่นไปด้วยการจัดการแบบฟอร์มและการทำให้เป็นอนุกรม

แม้ว่าจะมีวิธีการจัดการกับฟอร์มโดยรวม แต่Formโมดูลย่อยจะเกี่ยวข้องกับตัวควบคุมฟอร์มเฉพาะ

นี่คือรายการวิธีการทั้งหมดที่เกี่ยวข้องกับ Form Element.

วิธีการสร้างแบบฟอร์มต้นแบบ

NOTE - ตรวจสอบให้แน่ใจว่าคุณมีต้นแบบเวอร์ชัน 1.6 เป็นอย่างน้อย js

ส.	วิธีการและคำอธิบาย
1.	ปิดการใช้งาน () ปิดใช้งานแบบฟอร์มทั้งหมด ตัวควบคุมแบบฟอร์มจะมองเห็นได้ แต่ไม่สามารถแก้ไขได้
2.	เปิดใช้งาน () เปิดใช้งานแบบฟอร์มที่ปิดใช้งานทั้งหมดหรือบางส่วน
3.	findFirstElement () ค้นหาตัวควบคุมฟอร์มแรกที่ไม่ซ่อนและไม่ปิดใช้งาน
4.	focusFirstElement () ให้แป้นพิมพ์โฟกัสไปที่องค์ประกอบแรกของแบบฟอร์ม
5.	getElements () ส่งคืนชุดของตัวควบคุมฟอร์มทั้งหมดภายในฟอร์ม
6.	getInputs () ส่งคืนคอลเล็กชันขององค์ประกอบ INPUT ทั้งหมดในแบบฟอร์ม ใช้อาร์กิวเมนต์ประเภทและชื่อที่เป็นทางเลือกเพื่อ จำกัด การค้นหาแอตทริบิวต์เหล่านี้
7.	คำขอ () วิธีที่สะดวกในการทำให้เป็นอนุกรมและส่งแบบฟอร์มผ่าน Ajax ขอ URL ของแอตทริบิวต์การดำเนินการของแบบฟอร์ม พารามิเตอร์ตัวเลือกถูกส่งไปยังอินสแตนซ์ Ajax.Request ซึ่งอนุญาตให้แทนที่เมธอด HTTP และระบุพารามิเตอร์เพิ่มเติม
8.	รีเซ็ต () รีเซ็ตฟอร์มเป็นค่าเริ่มต้น
9.	ทำให้เป็นอนุกรม () จัดลำดับข้อมูลฟอร์มเป็นสตริงที่เหมาะสมกับคำขอ Ajax (ลักษณะการทำงานเริ่มต้น) หรือถ้า getHash ที่เป็นทางเลือกประเมินเป็นจริงแฮชอ็อบเจ็กต์ที่คีย์เป็นชื่อควบคุมฟอร์มและค่าเป็นข้อมูล
10.	serializeElements () จัดลำดับอาร์เรย์ขององค์ประกอบฟอร์มเป็นสตริงที่เหมาะสมกับคำขอ Ajax (ลักษณะการทำงานเริ่มต้น) หรือถ้า getHash ที่เป็นทางเลือกประเมินเป็นจริงแฮชอ็อบเจ็กต์ที่คีย์เป็นชื่อควบคุมฟอร์มและค่าเป็นข้อมูล

รู้เบื้องต้นเกี่ยวกับ JSON

JSON (JavaScript Object Notation) เป็นรูปแบบการแลกเปลี่ยนข้อมูลที่มีน้ำหนักเบา

JSON เป็นเรื่องง่ายสำหรับมนุษย์ในการอ่านและเขียน
JSON เป็นเรื่องง่ายสำหรับเครื่องในการแยกวิเคราะห์และสร้าง
JSON ขึ้นอยู่กับส่วนย่อยของภาษาโปรแกรม JavaScript
JSON ถูกใช้โดย API ทั่วทั้งเว็บและเป็นทางเลือกที่รวดเร็วสำหรับ XML ในคำขอ Ajax
JSON เป็นรูปแบบข้อความที่เป็นอิสระจากภาษาโดยสิ้นเชิง

Prototype 1.5.1 และเวอร์ชันที่ใหม่กว่ามีการเข้ารหัส JSON และรองรับการแยกวิเคราะห์

การเข้ารหัส JSON

Prototype มีวิธีการเข้ารหัสดังต่อไปนี้ -

NOTE - ตรวจสอบให้แน่ใจว่ามี prototype js เวอร์ชัน 1.6 เป็นอย่างน้อย

ส.	วิธีการและคำอธิบาย
1.	Number.toJSON () ส่งคืนสตริง JSON สำหรับ Number ที่กำหนด
2.	สตริง. toJSON () ส่งคืนสตริง JSON สำหรับสตริงที่กำหนด
3.	Array.toJSON () ส่งคืนสตริง JSON สำหรับ Array ที่กำหนด
4.	Hash.toJSON () ส่งคืนสตริง JSON สำหรับ Hash ที่กำหนด
5.	วันที่. toJSON () แปลงวันที่เป็นสตริง JSON (ตามรูปแบบ ISO ที่ใช้โดย JSON)
6.	Object.toJSON () ส่งคืนสตริง JSON สำหรับวัตถุที่กำหนด

หากคุณไม่แน่ใจเกี่ยวกับประเภทของข้อมูลที่คุณต้องเข้ารหัสทางออกที่ดีที่สุดของคุณคือใช้ Object.toJSON ดังนั้น -

var data = {name: 'Violet', occupation: 'character', age: 25 };
Object.toJSON(data);

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

'{"name": "Violet", "occupation": "character", "age": 25}'

นอกจากนี้หากคุณกำลังใช้วัตถุที่กำหนดเองคุณสามารถกำหนดวิธีการ toJSON ของคุณเองซึ่งจะถูกใช้โดยObject.toJSON ตัวอย่างเช่น -

var Person = Class.create();
Person.prototype = {
   initialize: function(name, age) {
      this.name = name;
      this.age = age;
   },  
   toJSON: function() {
      return ('My name is ' + this.name + 
         ' and I am ' + this.age + ' years old.').toJSON();
   }
};
var john = new Person('John', 49);
Object.toJSON(john);

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

'"My name is John and I am 49 years old."'

การแยกวิเคราะห์ JSON

ใน JavaScript โดยทั่วไปการแยกวิเคราะห์ JSON ทำได้โดยการประเมินเนื้อหาของสตริง JSON Prototype แนะนำString.evalJSONเพื่อจัดการกับสิ่งนี้ ตัวอย่างเช่น -

var d='{ "name":"Violet","occupation":"character" }'.evalJSON();
d.name;

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

"Violet"

ใช้ JSON กับ Ajax

การใช้ JSON กับ Ajax นั้นตรงไปตรงมามาก เพียงแค่เรียกใช้String.evalJSONบนคุณสมบัติ responseText ของการขนส่ง -

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON();
   }
});

หากข้อมูลของคุณมาจากแหล่งที่ไม่น่าเชื่อถือโปรดแน่ใจว่าได้ฆ่าเชื้อแล้ว -

new Ajax.Request('/some_url', {
   method:'get',
   requestHeaders: {Accept: 'application/json'},
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON(true);
   }
});

ข้อมูลเบื้องต้นเกี่ยวกับ AJAX

AJAX ย่อมาจาก Aซิงโครนัส JavaScript และ Xมล. AJAX เป็นเทคนิคใหม่ในการสร้างเว็บแอปพลิเคชันที่ดีขึ้นเร็วขึ้นและโต้ตอบได้มากขึ้นด้วยความช่วยเหลือของ XML, HTML, CSS และ Java Script

เพื่อความเข้าใจที่สมบูรณ์เกี่ยวกับ AJAX, โปรดไปผ่านง่าย ๆ ของเราAJAX กวดวิชา

การสนับสนุนต้นแบบสำหรับ AJAX

เฟรมเวิร์กต้นแบบช่วยให้คุณจัดการกับการโทร Ajax ด้วยวิธีที่ง่ายและสนุกซึ่งปลอดภัย (ข้ามเบราว์เซอร์) Prototype ยังจัดการอย่างชาญฉลาดด้วยโค้ด JavaScript ที่ส่งคืนจากเซิร์ฟเวอร์และจัดเตรียมคลาสตัวช่วยสำหรับการสำรวจ

ฟังก์ชันการทำงานที่อาแจ็กซ์ที่มีอยู่ในโลกวัตถุอาแจ็กซ์ อ็อบเจ็กต์นี้มีวิธีการที่จำเป็นทั้งหมดในการจัดการคำขอและการตอบกลับของ AJAX ด้วยวิธีง่ายๆ

คำขอ AJAX

คำขอที่เกิดขึ้นจริงจะทำโดยการสร้างอินสแตนซ์ของAjax.request ()วัตถุ

new Ajax.Request('/some_url', { method:'get' });

พารามิเตอร์แรกคือ URL ของคำขอ อย่างที่สองคือแฮชตัวเลือก ตัวเลือกวิธีการอ้างถึงวิธี HTTP ที่จะใช้ วิธีเริ่มต้นคือ POST

AJAX การตอบกลับการโทรกลับ

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

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var response = transport.responseText || "no response text";
      alert("Success! \n\n" + response);
   },
   onFailure: function() { alert('Something went wrong...') }
});

ที่นี่จะมีการโทรกลับสองครั้งในแฮช -

onSuccess
onFailure

การเรียกสองครั้งข้างต้นจะถูกเรียกตามสถานะของการตอบกลับ พารามิเตอร์แรกที่ส่งผ่านไปยังทั้งสองคืออ็อบเจ็กต์xmlHttpRequestดั้งเดิมซึ่งคุณสามารถใช้คุณสมบัติresponseTextและresponseXMLตามลำดับ

คุณสามารถระบุทั้งการโทรกลับหนึ่งหรือไม่มีก็ได้ขึ้นอยู่กับคุณ การโทรกลับอื่น ๆ ที่มีอยู่ ได้แก่ -

onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException

ทั้งหมดนี้ตรงกับสถานะบางอย่างของการขนส่งxmlHttpRequestยกเว้น onException ซึ่งจะเริ่มทำงานเมื่อมีข้อยกเว้นในขณะที่ส่งการเรียกกลับอื่น ๆ

NOTE- การเรียกกลับ onUninitialized, onLoading, onLoaded และ onInteractive นั้นไม่ได้ใช้งานอย่างสม่ำเสมอในทุกเบราว์เซอร์ โดยทั่วไปควรหลีกเลี่ยงการใช้สิ่งเหล่านี้

วิธีการ AJAX ต้นแบบ

ออบเจ็กต์ Ajaxมีวิธีการที่จำเป็นทั้งหมดในการจัดการคำขอและการตอบกลับของ AJAX ด้วยวิธีง่ายๆ นี่คือรายการวิธีการทั้งหมดที่เกี่ยวข้องกับ AJAX

NOTE - ตรวจสอบให้แน่ใจว่าคุณมีต้นแบบเวอร์ชัน 1.6 เป็นอย่างน้อย js

ส.	วิธีการและคำอธิบาย
1.	ตัวเลือก Ajax นี่ไม่ใช่วิธีการ แต่ให้รายละเอียดตัวเลือกหลักทั้งหมดที่ผู้ร้องขอ AJAX และการติดต่อกลับทั้งหมดใช้ร่วมกัน
2.	Ajax.PeriodicalUpdater () ดำเนินการตามคำขอ AJAX เป็นระยะและอัปเดตเนื้อหาของคอนเทนเนอร์ตามข้อความตอบกลับ
3.	Ajax.Request () เริ่มต้นและประมวลผลคำขอ AJAX
4.	Ajax การตอบสนอง () ที่เก็บของผู้ฟังทั่วโลกที่แจ้งเตือนเกี่ยวกับทุกขั้นตอนของคำขอ AJAX ที่ใช้ Prototype
5.	Ajax.Response () วัตถุส่งผ่านเป็นอาร์กิวเมนต์แรกของการเรียกกลับของ Ajax ทั้งหมด
6.	Ajax.Updater () ดำเนินการตามคำขอ AJAX และอัปเดตเนื้อหาของคอนเทนเนอร์ตามข้อความตอบกลับ

Prototype Ranges แสดงถึงช่วงเวลาของค่า วิธีที่ต้องการในการรับช่วงคือการใช้$R ฟังก์ชันยูทิลิตี้

คุณสามารถสร้างค่าที่หลากหลายโดยใช้ไวยากรณ์ง่ายๆดังนี้ -

$R(1, 10).inspect();

$R('a', 'e').inspect();

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

['1, 2, 3, 4, 5, 6, 7, 8, 9, 10']

['a', 'b', 'c', 'd', 'e']

วิธีการรวม ()

วิธีนี้กำหนดว่าค่าจะรวมอยู่ในช่วงหรือไม่ -

ไวยากรณ์

Range.include(value);

ส่งคืนค่า

หากรวมค่าแล้วจะส่งกลับค่าจริงมิฉะนั้นจะเป็นเท็จ

ตัวอย่าง

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function showResult() {
            alert ( "Test 1 : " + $R(1, 10).include(5));
            // Returns true
   
            alert ( "Test 2 : " + $R('a', 'h').include('x'));
            // Returns flase
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br />
      <br />
      <input type = "button" value = "Result" onclick = "showResult();"/>
   </body>
</html>

เอาต์พุต

หลายครั้งจำเป็นต้องเรียกใช้ฟังก์ชันหลาย ๆ ครั้งหลังจากช่วงเวลาหนึ่ง ตัวอย่างเช่นคุณอาจต้องการรีเฟรชหน้าจอหลังจากเวลาที่กำหนด Prototype มีกลไกง่ายๆในการใช้งานโดยใช้วัตถุPeriodicalExecuter

ข้อได้เปรียบที่ได้รับจากPeriodicalExecuterคือมันป้องกันคุณจากการดำเนินการหลายขนานของฟังก์ชันเรียกกลับ

การสร้าง PeriodicalExecuter

ตัวสร้างรับสองอาร์กิวเมนต์ -

ฟังก์ชันการโทรกลับ
ช่วงเวลา (เป็นวินาที) ระหว่างการดำเนินการ

เมื่อเปิดใช้งาน PeriodicalExecuter จะทริกเกอร์ไปเรื่อย ๆ จนกว่าเพจจะยกเลิกการโหลดหรือ executer จะหยุดโดยใช้เมธอดstop ()

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่จะปรากฏขึ้นในกล่องโต้ตอบหลังจากทุกๆ 5 วินาทีจนกว่าคุณจะหยุดมันโดยการกดปุ่ม "ยกเลิก"

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function startExec() {
            new PeriodicalExecuter(function(pe) {
               if (!confirm('Want me to annoy you again later?'))
               pe.stop();
            }, 5);
         }
      </script>
   </head>

   <body>
      <p>Click start button to start periodic executer:</p>
      <br />
      <br />
      <input type = "button" value = "start" onclick = "startExec();"/>
   </body>
</html>

เอาต์พุต