เขียนกรอบงาน jQuery ตั้งแต่เริ่มต้น

ด้วยการพัฒนาของยุคสมัย กรอบงานที่ยอดเยี่ยมมากขึ้นเรื่อยๆ ได้ปรากฏขึ้นในค่าย JavaScript ซึ่งทำให้งานการพัฒนาของเราง่ายขึ้นอย่างมาก เมื่อเราใช้กรอบงานเหล่านี้ เราควรคิดถึงต้นกำเนิดและคิดถึงวิธีการสร้างกรอบงานเหล่านี้ด้วยหรือไม่ หากคุณไม่พอใจกับการใช้ API สำเร็จรูปบางตัว แต่มีความเข้าใจอย่างลึกซึ้งเกี่ยวกับกลไกการใช้งานภายใน (ตามความเห็นของใครบางคน API เป็นสิ่งที่เสื่อมค่าเร็วที่สุด) วิธีที่ดีที่สุดคือการอ่านซอร์สโค้ดของพวกเขา ที่คุณสามารถอ่านมันได้

ฉันได้ศึกษาซอร์สโค้ดของ jQuery ในช่วงสองวันที่ผ่านมา และฉันจะแบ่งปันความรู้ผิวเผินบางส่วนของฉัน โปรดแก้ไขให้ฉันด้วยหากฉันไม่เหมาะสม เอาล่ะ มาดูวิธีการทำงานของ jQuery กันดีกว่า ฉันคิดว่าคุณมีความรู้พื้นฐานเกี่ยวกับ JavaScript อยู่แล้ว หากพื้นฐานยังไม่เพียงพอ ฉันขอแนะนำให้คุณอ่านหนังสือ "JavaScript Advanced Programming" และ "ทำความเข้าใจ JavaScript" สองเล่ม บทความนี้ไม่เหมาะสำหรับเพื่อนที่ไม่เข้าใจแนวคิด เช่น คลาส วัตถุ ฟังก์ชัน ต้นแบบ ฯลฯ ใน js

เริ่มจากจุดเริ่มต้นกันก่อน:

ขั้นแรกให้สร้างอ็อบเจ็กต์ให้กับผู้ใช้ โดยสมมติว่าเฟรมเวิร์กของเราชื่อ Shaka (ชื่อของฉัน ;) )
var Shaka = function(){}; ที่นี่เราสร้างฟังก์ชันว่างๆ ที่ไม่มีอะไรเลย จริงๆ แล้วฟังก์ชันนี้คือ Constructor ของเรา เพื่อให้อ็อบเจ็กต์ที่เราสร้างขึ้นสามารถเรียกวิธีการที่กำหนดไว้ในต้นแบบได้ เราจำเป็นต้องเพิ่มวิธีการบางอย่างให้กับ Shaka โดยใช้ต้นแบบ (คิดว่า Shaka เป็นคลาส) ดังนั้นเราจึงกำหนด:

Shaka.fn = Shaka.ต้นแบบ = {};

Shaka.fn ในที่นี้เทียบเท่ากับนามแฝงของ Shaka.prototype สำหรับการใช้งานในอนาคต โดยชี้ไปที่ข้อมูลอ้างอิงเดียวกัน

ตกลง มาเพิ่มเมธอด sayHello และเพิ่มพารามิเตอร์ให้กับ Shaka เพื่อให้รูปลักษณ์พื้นฐานที่สุดของเฟรมเวิร์กนี้ปรากฏอยู่แล้ว ถ้ามันยังมีชีวิตอยู่ ตอนนี้มันมีอายุ 1 ปีแล้ว ดูโค้ด:

เรียกใช้กล่องรหัส
<script type="text/javascript"> var Shaka = function(age){ this.age = age; }; Shaka.fn = Shaka.prototype = { sayHello: function() { alert('ฉันเป็นเด็กน้อย อายุของฉันคือ ' + this.age + ' ปี'); var babyShaka = new Shaka(1);
[Ctrl+A เลือกเคล็ดลับทั้งหมด: คุณสามารถแก้ไขบางส่วนของโค้ดก่อนแล้วจึงกด Run]

โอเค อย่าเพิ่งตื่นเต้นไป เราสังเกตเห็นว่ามีความแตกต่างบางประการในการใช้ Framework นี้และ jQuery ตัวอย่างเช่น ใน jq เราสามารถเขียนได้ดังนี้:

jQuery('#myid').someMethod();

สิ่งนี้เสร็จสิ้นได้อย่างไร กล่าวคือ ตัวสร้าง jQuery() ส่งคืนอินสแตนซ์อ็อบเจ็กต์ jQuery เพื่อให้เราสามารถเรียกใช้เมธอดของมันได้ ดังนั้นตัวสร้างของ Shaka ควรส่งคืนอินสแตนซ์ และควรมีลักษณะดังนี้ มีลักษณะดังนี้:

var Shaka = function(){ return // ส่งคืนอินสแตนซ์ของ Shaka };

แล้วเราจะรับอินสแตนซ์ของ Shaka ได้อย่างไร เรามาทบทวนกันก่อนเมื่อใช้ต้นแบบเพื่อจำลองคลาส var someObj = new MyClass(); ในเวลานี้ เราสร้างออบเจ็กต์ใหม่ someObje และใช้ออบเจ็กต์ใหม่เป็นตัวชี้นี้ ฟังก์ชัน MyClass ซึ่งเป็นตัวสร้างของคลาส จากนั้น someObj ได้รับวิธีการที่กำหนดไว้ใน MyClass.prototype ตัวชี้นี้ในวิธีการเหล่านี้อ้างถึงอินสแตนซ์ของวัตถุปัจจุบัน