Knockout.js คืออะไร?
Knockout เป็นไลบรารี JavaScript ที่ยอดเยี่ยมที่ช่วยให้คุณสร้างส่วนต่อประสานผู้ใช้ข้อความที่หลากหลายพร้อมฟังก์ชั่นการแสดงผลและการแก้ไขที่ดีโดยใช้แบบจำลองข้อมูลพื้นฐานที่สะอาดและเป็นระเบียบ เมื่อใดก็ตามที่เนื้อหา UI ในพื้นที่ของคุณจะต้องได้รับการปรับปรุงโดยอัตโนมัติ (ตัวอย่างเช่นขึ้นอยู่กับการเปลี่ยนแปลงพฤติกรรมของผู้ใช้หรือการเปลี่ยนแปลงแหล่งข้อมูลภายนอก) KO สามารถนำไปใช้กับคุณได้อย่างง่ายดายและง่ายต่อการดูแลรักษา
1. แผนภาพความสัมพันธ์หมวดหมู่หลัก
ii. ความรับผิดชอบในชั้นเรียน
2.1. สังเกตได้ (คลาสการตรวจสอบปกติคลาส)
การใช้งานภายในของที่สังเกตได้ (อื่น ๆ คือฟังก์ชั่น):
1. คนแรกประกาศ FN ที่ชื่อว่าสังเกตได้ (อาจกล่าวได้ว่าเป็นชั้นเรียน)
2. เพิ่มคุณสมบัติล่าสุดของ KO ที่ไม่ซ้ำกันเพื่อจัดเก็บค่าที่ส่งผ่านโดยพารามิเตอร์
3. หากรองรับแอตทริบิวต์ __proto__ ดั้งเดิมให้ใช้ HasownProperty เพื่อตรวจสอบว่าแอตทริบิวต์มีอยู่เพื่อสืบทอดและตัดสินรหัส __proto__ (ในคลาส UTILS)
var canSetPrototype = ({__proto__: []} อาร์เรย์อินสแตนซ์);
4. วิธีการเริ่มต้นของแอตทริบิวต์ FN ของ KO.SubsCribeBable เริ่มต้นการสังเกตได้ (ส่วนใหญ่จะเพิ่มการสมัครสมาชิกและเผยแพร่แอตทริบิวต์ที่เกี่ยวข้อง)
5. สังเกตได้จากนั้นสืบทอดคุณลักษณะและวิธีการที่เกี่ยวข้องกับการสังเกตการณ์ที่สังเกตได้
// กำหนดต้นแบบสำหรับ ObservablesVar ObservableFn = {'EqualityComparer': ValueSarePrimItiveAndequal, Peek: function () {ส่งคืนนี้ }, valuehasmutated: function () {this ['notifysubscribers'] (นี้ [NobedableLatestValue]); }, valuewillmutate: function () {นี้ ['Notifysubscribers'] (นี่คือ [NobedableLatestValue], 'beforeChange'); -6. ส่งคืนการใช้งานวิธีที่สังเกตได้ (หากตั้งค่าพารามิเตอร์ขาเข้าและหากไม่มีพารามิเตอร์ก็จะได้รับ)
7. คลาสนี้ยังมี hasprototype (เพื่อตรวจสอบว่าอินสแตนซ์ที่ระบุมีคุณสมบัตินี้), isobservable (เพื่อตรวจสอบว่าอินสแตนซ์ที่ระบุเป็นวัตถุการตรวจสอบหรือไม่), iswriteableobservable (เพื่อตรวจสอบว่าเป็นวัตถุการตรวจสอบที่เขียนได้)
2.2. Observablearray (คลาสการตรวจสอบอาร์เรย์) คลาส)
1. ก่อนดำเนินการวิธี KO.observable เพื่อให้วัตถุเป็นคลาสที่สามารถตรวจสอบได้ (ชื่อผลลัพธ์);
2. จากนั้นขยายวัตถุ FN ใน KO.Observablearray (KO.observablearray ของ FN เขียนวิธีการดำเนินการที่เกี่ยวข้องกับอาร์เรย์ใหม่เช่นลบ, กด ฯลฯ )
3. ขยายวิธีการผ่านการขยาย (trackarraychanages ดูรายละเอียด 2.5)
4. ส่งคืนวัตถุผลลัพธ์เพิ่มเติม
ko.observablearray = function (initialValues) {initialValues = initialValues || []; ถ้า (typeof initialValues! = 'Object' ||! ('ความยาว' ในค่าเริ่มต้น)) โยนข้อผิดพลาดใหม่ ("อาร์กิวเมนต์ที่ผ่านไปเมื่อเริ่มต้นอาร์เรย์ที่สังเกตได้จะต้องเป็นอาร์เรย์หรือ null หรือไม่ได้กำหนด"); ko.observablearray ['fn']); return result.extend ({'trackarraychanges': true});};2.3. สมัครสมาชิก (สมัครสมาชิกคลาสวัตถุ)
1. โมดูลการทำงานสำหรับการสมัครและการเผยแพร่เป็นคลาสพื้นฐานที่จำเป็นสำหรับการสังเกตและการสังเกตการณ์
2. มีวิธีการย่อยที่นี่ซึ่งใช้ในการสมัครสมาชิกเพื่อตรวจสอบการเปลี่ยนแปลงวัตถุ เพื่อการพัฒนาคุณสามารถใช้จุดสืบทอดนี้เพื่อป้อน
สมัครสมาชิก: ฟังก์ชั่น (การโทรกลับ, callbacktarget, เหตุการณ์) {var self = this; event = event || defaultEvent; var boundCallback = callbacktarget? callback.bind (callbacktarget): callback; var subscription = new ko.subscription (ตัวเอง, boundCallback, ฟังก์ชั่น () {ko.utils.arrayremoveitem (self._subscriptions [เหตุการณ์], การสมัครสมาชิก); ถ้า self.aftersubscriptionRemove) self (self.beforesubscriptionadd) self.beforesubscriptionadd (เหตุการณ์); ถ้า (! self._subscriptions [เหตุการณ์]) self._subscriptions [เหตุการณ์] = []; self._subscriptions [เหตุการณ์] .push (การสมัครสมาชิก);3.extend: วิธีนี้ใช้เพื่อเพิ่มคลาสส่วนขยายที่เพิ่มโดยวิธีการขยาย (เช่น Observablearray.changeTracking คลาสส่วนขยาย)
4. วิธีการขยายส่วนขยายจะถูกดำเนินการทันทีหลังจากลงทะเบียนวัตถุการตรวจสอบ พารามิเตอร์ที่ส่งผ่านคือเป้าหมาย (วัตถุปัจจุบัน) และตัวเลือก (พารามิเตอร์ส่งผ่านเมื่อมีการเรียกส่วนขยาย)
5. Extend เป็นวิธีการติดตั้งส่วนขยายและจะเรียกใช้รหัสในส่วนขยายทันที
2.4. ขยาย (คลาสการตรวจสอบเพิ่มเติมคลาส)
1. คอลเลกชันส่วนขยายเริ่มต้นของ KO
2. ให้วิธีการใช้งาน
ฟังก์ชั่น applixtenders (requestedextenders) {var target = this; ถ้า (requestedextenders) {ko.utils.objectforeach (requestedextenders, ฟังก์ชั่น (คีย์, ค่า) {var extenderhandler = ko.extenders [key]; if (typeof extendedhandler ==2.5. Absoterablearray.changetracking (การใช้งานเฉพาะของวัตถุตรวจสอบเพิ่มเติม)
1. ส่วนขยายนี้ส่วนใหญ่ใช้การตรวจสอบการเปลี่ยนแปลงอาร์เรย์จากนั้นคำนวณความแตกต่างในอาร์เรย์และทริกเกอร์เหตุการณ์การสมัครสมาชิกที่เกี่ยวข้อง
2.CACHEDIFFFORKNOWNOWERATION: การดำเนินการแคชในอาร์เรย์เพื่อเปรียบเทียบความแตกต่าง
3. beforesubscriptionAdd และ AftersubscriptionRemove การสมัครสมาชิกที่เกี่ยวข้อง (ยังไม่เข้าใจอย่างสมบูรณ์)
ข้างต้นเป็นการวิเคราะห์เชิงลึกของการวิเคราะห์ซอร์สโค้ดที่น่าพิศวงที่แนะนำโดยตัวแก้ไขให้คุณ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!