คำนิยาม
การรวมกันตามชื่อหมายถึงการสร้างเอนทิตีเดียวที่มีวัตถุที่มีส่วนประกอบหลายอย่าง เอนทิตีเดี่ยวนี้จะทำหน้าที่เป็นจุดเชื่อมต่อสำหรับส่วนประกอบเหล่านี้ทั้งหมดและในขณะที่การดำเนินการนี้ง่ายขึ้นอย่างมากมันก็สามารถหลอกลวงได้ค่อนข้างเนื่องจากไม่มีวิธีโดยนัยที่จะระบุอย่างชัดเจนว่ามีส่วนร่วมจำนวนเท่าใด
เป้าหมายของโหมดการรวมกันคือการแยกโปรแกรมลูกค้าจากสถาปัตยกรรมภายในขององค์ประกอบที่ซับซ้อนเพื่อให้โปรแกรมลูกค้าปฏิบัติต่อองค์ประกอบเด็กทั้งหมดอย่างเท่าเทียมกัน
โหนดเด็กแต่ละคนสามารถมีการดำรงอยู่ที่ซับซ้อน สำหรับโหนดพาเรนต์ไม่จำเป็นต้องทราบความซับซ้อนของโหนดเด็กหรือใช้ความซับซ้อนของโหนดเด็ก มันต้องให้ความสนใจกับวิธีการเฉพาะของโหนดเด็กเท่านั้นเพื่อให้สามารถใช้โหนดเด็กได้ ลดความสัมพันธ์ระหว่างพระบิดากับพระบุตร
เช่นเดียวกับโหนดเด็ก การเปิดรับอินเทอร์เฟซที่มากเกินไปบางครั้งก็เป็นการละเมิดและยังช่วยลดการพึ่งพาปัจจัยภายนอก
ตัวอย่าง
เราควรใช้การผสมผสานภาพลวงตา ในภาพต่อไปนี้คุณสามารถเห็นวัตถุสองประเภทที่แตกต่างกัน: คอนเทนเนอร์และไลบรารีเป็นชุดค่าผสมและรูปภาพเป็นใบมีด การรวมกันสามารถพาเด็ก ๆ ได้ แต่โดยทั่วไปจะไม่ทำพฤติกรรมมากขึ้น ใบมีดมีพฤติกรรมส่วนใหญ่ แต่ไม่สามารถพกพาเด็กได้อย่างน้อยก็ไม่ได้อยู่ในตัวอย่างการรวมกันแบบดั้งเดิม
ตัวอย่างนี้สร้างไลบรารีรูปภาพเป็นตัวอย่างรูปแบบการรวมกัน มีเพียงสามระดับ: อัลบั้มห้องสมุดและรูปภาพ อัลบั้มและห้องสมุดจะถูกรวมเข้าด้วยกันและภาพคือใบมีดดังที่แสดงในภาพด้านบน นี่เป็นโครงสร้างที่ชัดเจนมากกว่าการรวมกันที่ต้องการ แต่สำหรับตัวอย่างนี้มันสมเหตุสมผลที่จะ จำกัด ระดับเหล่านี้ให้เป็นเพียงชุดค่าผสมหรือใบมีดเท่านั้น การรวมกันมาตรฐานไม่ได้ จำกัด ระดับโครงสร้างที่สามารถมีใบมีดและไม่ จำกัด จำนวนใบมีด
ในการเริ่มต้นคุณควรสร้าง "คลาส" GalleryComposite สำหรับอัลบั้มและห้องสมุดของคุณก่อน โปรดทราบว่าฉันใช้ jQuery เพื่อดำเนินการ DOM เพื่อลดความซับซ้อนของกระบวนการ
var galleryComposite = function (หัวเรื่อง, id) {this.children = []; this.element = $ ('<div id = "' + id + '"> </div>') .append ('<h2>' + หัวเรื่อง + '</h2>');} galleryComposite.prototype = {เพิ่ม: ฟังก์ชั่น (เด็ก) {this.children.push (เด็ก); this.element.append (child.getElement ()); }, ลบ: ฟังก์ชั่น (เด็ก) {สำหรับ (var node, i = 0; node = this.getChild (i); i ++) {ถ้า (node == child) {this.children.splice (i, 1); this.element.detach (child.getElement ()); กลับมาจริง; } if (node.remove (เด็ก)) {return true; }} return false; }, getChild: function (i) {return this.children [i]; }, ซ่อน: function () {สำหรับ (var node, i = 0; node = this.getChild (i); i ++) {node.hide (); } this.element.hide (0); }, show: function () {สำหรับ (var node, i = 0; node = this.getChild (i); i ++) {node.show (); } this.element.show (0); }, GetElement: function () {return this.element; -สถานที่นี้ค่อนข้างยุ่งยากฉันช่วยให้ฉันอธิบายเพิ่มเติมได้หรือไม่? เราสร้างชุดค่าผสมนี้โดยใช้ทั้งวิธีการเพิ่ม, ลบและ getChild getChild ตัวอย่างนี้ไม่ได้ใช้ Remove และ GetChild จริง ๆ แต่มีประโยชน์มากสำหรับการสร้างชุดค่าผสมแบบไดนามิก วิธีการซ่อนแสดงและการรับเลือกใช้เพื่อจัดการกับ DOM ชุดค่าผสมนี้มีวัตถุประสงค์เพื่อนำเสนอต่อผู้ใช้ในหน้าเพื่อเป็นตัวแทนของห้องสมุด ชุดค่าผสมนี้สามารถควบคุมองค์ประกอบห้องสมุดเหล่านี้ผ่านการซ่อนและแสดง หากคุณเรียกซ่อนในอัลบั้มอัลบั้มทั้งหมดจะหายไปหรือคุณสามารถเรียกมันได้กับภาพเดียวเพื่อให้ภาพนั้นหายไปเท่านั้น
ตอนนี้สร้างคลาส GalleryImage โปรดทราบว่าใช้วิธีเดียวกับ Gallerycomposite กล่าวอีกนัยหนึ่งพวกเขาใช้อินเทอร์เฟซเดียวกันยกเว้นว่าภาพเป็นใบมีดดังนั้นจึงไม่มีการดำเนินการใด ๆ กับวิธีการที่เกี่ยวข้องกับเด็กราวกับว่ามันไม่มีลูก การรวมกันจะต้องทำงานด้วยอินเทอร์เฟซเดียวกันเพราะองค์ประกอบการรวมกันไม่ทราบว่าเป็นองค์ประกอบรวมหรือใบมีดอื่นที่มันถูกเพิ่มเข้ามาด้วยตัวเองดังนั้นหากคุณพยายามเรียกวิธีการเหล่านี้กับลูก ๆ ของมันคุณต้องทำงานได้ดีโดยไม่มีข้อผิดพลาดใด ๆ
var galleryImage = function (src, id) {this.children = []; this.element = $ ('<img />') .attr ('id', id) .attr ('src', src);} galleryImage.prototype = {// เนื่องจากสิ่งนี้เป็นใบมันไม่ได้ใช้วิธีการเหล่านี้ //) }, ซ่อน: function () {this.element.hide (0); }, show: function () {this.element.show (0); }, GetElement: function () {return this.element; -เนื่องจากคุณได้สร้างต้นแบบวัตถุตอนนี้คุณสามารถใช้งานได้แล้ว จากด้านล่างคุณสามารถดูรหัสสำหรับการสร้างไลบรารีภาพจริง ๆ
var container = new GalleryComposite ('', 'Allgalleries'); Var Gallery1 = ใหม่ GalleryComposite ('Gallery 1', 'Galleries1'); Var Gallery2 = ใหม่ GalleryComposite ('Gallery 2', 'Gallery2'); var image1 = ใหม่ GalleryImage ('Image2.jpg', 'img2'); var image3 = new GalleryImage ('image3.jpg', 'img3'); var image4 = ใหม่ GalleryImage ('image4.jpg' 'IMG4'); Gallery1.add (Image1); Gallery1.add (Image2); Gallery2.add (Image3); Gallery2.add (Image4); container.add (Gallery1); container.add (Gallery2); // Up.container.getElement (). ภาคผนวก ('ร่างกาย'); container.show ();ประโยชน์ของโหมดการรวมกัน:
การดำเนินการอย่างง่ายสามารถให้ผลลัพธ์ที่ซับซ้อน คุณจะต้องดำเนินการกับวัตถุระดับบนสุดและปล่อยให้วัตถุเด็กแต่ละคนผ่านการดำเนินการนี้ด้วยตนเอง สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับการดำเนินการเหล่านั้นที่ทำซ้ำ
ในโหมดการรวมกันการมีเพศสัมพันธ์ระหว่างวัตถุแต่ละชิ้นนั้นหลวมมาก ตราบใดที่พวกเขาใช้อินเทอร์เฟซเดียวกันก็เป็นเพียงความช่วยเหลือเพียงเล็กน้อยในการเปลี่ยนตำแหน่งหรือแลกเปลี่ยน มันส่งเสริมการใช้รหัสซ้ำและยังเอื้อต่อการสร้างรหัสใหม่
เมื่อใดก็ตามที่การดำเนินการดำเนินการบนวัตถุรวมระดับบนสุดมันเป็นการค้นหาอย่างลึกซึ้งครั้งแรกของโครงสร้างทั้งหมดเพื่อค้นหาโหนดและโปรแกรมเมอร์ที่สร้างวัตถุรวมนั้นไม่รู้รายละเอียดเหล่านี้ มันง่ายมากที่จะเพิ่มลบและค้นหาโหนดในลำดับชั้นนี้
ข้อเสียของโหมดรวม:
ความสะดวกในการใช้วัตถุรวมอาจปกปิดค่าใช้จ่ายของการดำเนินการทุกครั้งที่รองรับ เนื่องจากการดำเนินการใด ๆ ที่เรียกโดยวัตถุรวมจะถูกส่งผ่านไปยังวัตถุย่อยทั้งหมด หากลำดับชั้นนี้มีขนาดใหญ่ประสิทธิภาพของระบบจะได้รับผลกระทบ การทำงานปกติของโหมดการรวมกันต้องการรูปแบบของอินเทอร์เฟซ
เมื่อรวมวัตถุและคลาสโหนดถูกใช้เป็นเครื่องมือห่อสำหรับองค์ประกอบ HTML วัตถุรวมจะต้องสอดคล้องกับกฎการใช้งาน HTML ตัวอย่างเช่นตารางยากที่จะแปลงเป็นวัตถุรวม
การตรวจสอบอินเตอร์เฟสที่เข้มงวดยิ่งน่าเชื่อถือมากขึ้นคลาสวัตถุรวมจะเป็น