การวิเคราะห์เชิงลึกของการสมัครการวิเคราะห์ซอร์สโค้ดที่น่าพิศวง

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!