ในระหว่างกระบวนการพัฒนาปกติของเราเราจะพบกับสถานการณ์นี้อย่างแน่นอน: เราประมวลผลวัตถุง่าย ๆ และวัตถุที่ซับซ้อนซึ่งประกอบด้วยวัตถุง่าย ๆ ในเวลาเดียวกัน วัตถุที่เรียบง่ายและวัตถุที่ซับซ้อนเหล่านี้จะถูกรวมเข้ากับโครงสร้างต้นไม้และลูกค้าจะต้องรักษาความสอดคล้องเมื่อประมวลผล ตัวอย่างเช่นสำหรับคำสั่งซื้อผลิตภัณฑ์ในเว็บไซต์อีคอมเมิร์ซแต่ละคำสั่งซื้อผลิตภัณฑ์แต่ละรายการอาจมีชุดค่าผสมลำดับย่อยหลายชุดเช่นโฟลเดอร์ในระบบปฏิบัติการแต่ละโฟลเดอร์มีโฟลเดอร์ย่อยหรือไฟล์หลายไฟล์ เมื่อเราคัดลอกลบพวกเขา ฯลฯ ไม่ว่าจะเป็นโฟลเดอร์หรือไฟล์มันก็เหมือนกันสำหรับผู้ให้บริการเรา ในสถานการณ์นี้เหมาะมากที่จะใช้โหมดการรวมกันเพื่อให้ได้มัน
ความรู้พื้นฐาน
โหมดการรวมกัน: การรวมวัตถุเข้ากับโครงสร้างต้นไม้เพื่อแสดงลำดับชั้น "พทั้งหมดทั้งหมด" โหมดการรวมกันช่วยให้ผู้ใช้มีความสอดคล้องในการใช้วัตถุแต่ละชิ้นและวัตถุรวม
มีอักขระหลักสามตัวในโหมดการรวมกัน:
(1) ส่วนประกอบนามธรรม (ส่วนประกอบ): คลาสนามธรรมที่กำหนดส่วนต่อประสานสาธารณะของวัตถุที่เข้าร่วมในชุดค่าผสมเป็นหลัก
(2) วัตถุย่อย (ใบไม้): วัตถุพื้นฐานที่สุดที่สร้างวัตถุรวมกัน
(3) คอมโพสิต: วัตถุที่ซับซ้อนรวมกันโดยวัตถุเด็ก
กุญแจสำคัญในการทำความเข้าใจรูปแบบการรวมกันคือการเข้าใจความสอดคล้องของรูปแบบการรวมกันสำหรับวัตถุแต่ละชิ้นและวัตถุรวม มาพูดคุยเกี่ยวกับการใช้รูปแบบการรวมกันเพื่อให้ความเข้าใจของเราลึกซึ้งยิ่งขึ้น
โหมดการรวมกันได้รับการปรับแต่งเพื่อสร้าง UI แบบไดนามิกบนหน้า คุณสามารถใช้คำสั่งเดียวเท่านั้น = เพื่อเริ่มต้นการดำเนินการที่ซับซ้อนหรือเรียกซ้ำสำหรับวัตถุจำนวนมาก โหมดการรวมกันมีสองจุด:
(1) อนุญาตให้คุณปฏิบัติต่อกลุ่มวัตถุเป็นวัตถุเฉพาะ วัตถุคอมโพสิตใช้การดำเนินการเดียวกับวัตถุย่อยที่ทำให้มัน การดำเนินการบางอย่างในวัตถุรวมจะทำให้วัตถุย่อยทั้งหมดภายใต้วัตถุนั้นดำเนินการเดียวกัน ดังนั้นคุณไม่เพียง แต่สามารถแทนที่วัตถุเดียวลงในชุดวัตถุได้อย่างราบรื่น แต่ยังเหมือนกัน วัตถุอิสระเหล่านี้เรียกว่าคู่กันอย่างหลวม ๆ
(2) รูปแบบการรวมกันจะรวมชุดของวัตถุย่อยเข้ากับโครงสร้างต้นไม้และอนุญาตให้ข้ามต้นไม้ทั้งหมด สิ่งนี้จะซ่อนการใช้งานภายในและช่วยให้คุณสามารถจัดระเบียบวัตถุย่อยได้ แต่อย่างใด รหัสใด ๆ สำหรับวัตถุนี้ (วัตถุรวม) จะไม่ขึ้นอยู่กับการใช้งานของวัตถุย่อยภายใน
การใช้โหมดการรวมกัน
(1) โหมดการรวมกันที่ง่ายที่สุด
โครงสร้าง DOM ของเอกสาร HTML เป็นโครงสร้างต้นไม้ตามธรรมชาติ องค์ประกอบพื้นฐานที่สุดกลายเป็นต้นไม้ DOM และในที่สุดก็สร้างเอกสาร DOM เหมาะมากสำหรับโหมดการรวมกัน
เรามักจะใช้ไลบรารีคลาส jQuery ที่มีการใช้รูปแบบการรวมกันบ่อยขึ้นตัวอย่างเช่นรหัสต่อไปนี้มักจะถูกนำไปใช้:
$ (". ทดสอบ"). addclass ("notest") ลบ ("ทดสอบ");รหัสง่าย ๆ นี้คือการรับองค์ประกอบที่คลาสมีการทดสอบแล้วประมวลผลด้วย addClass และ RemoveClass ไม่ว่าจะเป็น $ (". test") เป็นองค์ประกอบหนึ่งหรือหลายองค์ประกอบมันถูกเรียกในที่สุดผ่านการรวม addClass และอินเทอร์เฟซ RemoveClass
มาจำลองการใช้งาน AddClass สั้น ๆ :
var addClass = function (eles, className) {ถ้า (eles instanceof nodelist) {สำหรับ (var i = 0, length = eles.length; i <length; i ++) {eles [i] .nodeType === 1 && (eles [i] .classname += (' }} อื่นถ้า (Eles Instanceof Node) {eles.nodeType === 1 && (eles.className + = ('' + className + '')); } else {โยน "Eles ไม่ใช่โหนด HTML"; }} addClass (document.getElementById ("div3"), "ทดสอบ"); addClass (document.QuerySelectorall (". div"), "ทดสอบ");รหัสนี้จะจำลองการใช้งานของ AddClass (ความเข้ากันได้และความเป็นสากลไม่ได้รับการพิจารณาในช่วงเวลานั้น) และเป็นเรื่องง่ายที่จะตัดสินประเภทโหนดก่อนจากนั้นเพิ่มชื่อคลาสตามประเภทที่แตกต่างกัน สำหรับ Nodelist หรือ Node การโทรไคลเอนต์ใช้ส่วนต่อประสาน AddClass ด้วยวิธีเดียวกัน นี่เป็นแนวคิดพื้นฐานที่สุดของโหมดการรวมกันการใช้ส่วนและทั้งหมดที่สอดคล้องกัน
(2) ตัวอย่างทั่วไป
เรากล่าวถึงตัวอย่างทั่วไป: คำสั่งซื้อผลิตภัณฑ์มีคำสั่งย่อยผลิตภัณฑ์หลายรายการและคำสั่งย่อยผลิตภัณฑ์หลายรายการเป็นลำดับผลิตภัณฑ์ที่ซับซ้อน เนื่องจากลักษณะของภาษา JavaScript เราทำให้บทบาททั้งสามของรูปแบบการรวมกันเป็น 2 บทบาท:
(1) Subobject: ในตัวอย่างนี้ subobject เป็นคำสั่งย่อยผลิตภัณฑ์
(2) วัตถุรวม: นี่คือลำดับทั้งหมดของผลิตภัณฑ์
สมมติว่าเราพัฒนาเว็บไซต์ผลิตภัณฑ์การท่องเที่ยวที่มีสองผลิตภัณฑ์ย่อย: ตั๋วอากาศและโรงแรม เรากำหนดวัตถุย่อยดังนี้:
Function FlightOrder () {} FlightOrder.prototyp.create = function () {console.log ("ลำดับการบินที่สร้างขึ้น");} ฟังก์ชั่น hotelerger () {} hotelerger.prototype.create = function () {console.log ("คำสั่งซื้อโรงแรม");};};};};};};รหัสด้านบนกำหนดสองคลาส: ชั้นเรียนสั่งซื้อตั๋วและชั้นเรียนสั่งซื้อโรงแรม แต่ละชั้นเรียนมีวิธีการสร้างคำสั่งซื้อของตัวเอง
ต่อไปเราสร้างคลาสคำสั่งซื้อทั้งหมด:
function totalorders () {this.orderList = [];} totalorders.prototype.addorder = function (order) {this.orderList.push (order);} totalorders.prototype.create = function (order) {สำหรับ (var i = 0, ความยาว = this.orderlist.list.list.list.list.list. -วัตถุนี้มีสมาชิกหลักสามคน: รายการคำสั่งซื้อวิธีการเพิ่มคำสั่งซื้อและวิธีการสร้างคำสั่งซื้อ
เมื่อใช้ไคลเอนต์ต่อไปนี้มีดังนี้:
var flight = new FlightOrder (); flight.create (); คำสั่งซื้อ VAR = ใหม่ทั้งหมด (); order.addorder (ใหม่ FlightOrder ()); order.addorder (ใหม่ HotelOrder ()); order.create ();
การโทรของลูกค้าแสดงสองวิธีหนึ่งคือการสร้างคำสั่งซื้อตั๋วอากาศและอีกวิธีหนึ่งคือการสร้างคำสั่งซื้อหลายคำสั่ง แต่ในที่สุดพวกเขาก็ถูกสร้างขึ้นผ่านวิธีการสร้าง นี่เป็นสถานการณ์แอปพลิเคชันทั่วไปของโหมดการรวมกัน
สรุป
รูปแบบการรวมกันไม่ยากที่จะเข้าใจ ส่วนใหญ่จะแก้ปัญหาความสอดคล้องของวัตถุเดียวและวัตถุรวมในวิธีที่พวกเขาใช้ นี่เป็นสิ่งที่ยอดเยี่ยมสำหรับการใช้รูปแบบ combinatorial หากวัตถุมีลำดับชั้นที่ชัดเจนและต้องการใช้อย่างสม่ำเสมอ ในการพัฒนาเว็บลำดับชั้นนี้เป็นเรื่องธรรมดามากและเหมาะมากสำหรับการใช้รูปแบบการรวมกัน โดยเฉพาะอย่างยิ่งสำหรับ JS คุณไม่จำเป็นต้องยึดติดกับรูปแบบภาษาที่มุ่งเน้นวัตถุแบบดั้งเดิมและใช้ลักษณะของภาษา JS อย่างยืดหยุ่นเพื่อให้ได้ความสม่ำเสมอในส่วนและการใช้งานโดยรวม
(1) สถานการณ์โดยใช้โหมดการรวมกัน
ใช้โหมดการรวมกันเมื่อพบสองสถานการณ์ต่อไปนี้
A. การรวบรวมวัตถุที่มีโครงสร้างลำดับชั้นบางอย่าง (ไม่สามารถกำหนดโครงสร้างเฉพาะในระหว่างกระบวนการพัฒนาได้)
B. ต้องการดำเนินการกับวัตถุเหล่านี้หรือบางส่วน
(2) ข้อเสียของโหมดการรวมกัน
เนื่องจากการดำเนินการใด ๆ ของวัตถุรวมจะเรียกการดำเนินการเดียวกันกับวัตถุย่อยทั้งหมดจึงมีปัญหาด้านประสิทธิภาพเมื่อโครงสร้างรวมมีขนาดใหญ่ นอกจากนี้เมื่อใช้โหมดรวมเพื่อห่อหุ้ม HTML คุณต้องเลือกแท็กที่เหมาะสม ตัวอย่างเช่นตารางไม่สามารถใช้ในโหมดการรวมกันและโหนดใบไม้ไม่ชัดเจน