تعريف
الجمع ، كما يوحي الاسم ، يشير إلى إنشاء كيان واحد مع كائن يحتوي على مكونات متعددة. سيكون هذا الكيان الفردي بمثابة نقطة وصول لجميع هذه المكونات ، وعلى الرغم من أن هذا يبسط العمليات إلى حد كبير ، إلا أنه يمكن أن يكون خادعًا تمامًا ، حيث لا توجد طريقة ضمنية للإشارة بوضوح إلى عدد المكونات التي تحتوي عليها المجموعة.
الهدف من وضع المركب هو فصل برنامج العميل من البنية الداخلية للعناصر المعقدة ، بحيث يعامل برنامج العميل جميع عناصر الأطفال على قدم المساواة.
كل عقدة طفل يمكن أن تجعل وجود معقد. بالنسبة للعقدة الأصل ، ليس من الضروري معرفة تعقيد العقدة الطفل أو تنفيذ تعقيد العقدة الطفل. يحتاج فقط إلى الانتباه إلى الأساليب المحددة للعقدة الطفل ، بحيث يمكن استخدام عقدة الطفل. يبسط العلاقة بين الأب والابن.
وينطبق الشيء نفسه على العقد الفرعية. التعرض المفرط في الواجهة هو في بعض الأحيان إساءة ، كما أنه يقلل من الاعتماد على العوامل الخارجية.
مثال
من الأفضل أن نستخدم مزيجًا من الوهم. في الصورة التالية ، يمكنك رؤية نوعين مختلفين من الكائنات: الحاويات والمكتبات هي مجموعات والصور هي شفرات. يمكن أن تحمل المجموعات الأطفال ، ولكن عمومًا لا تؤدي المزيد من السلوكيات. تحتوي الشفرة على الغالبية العظمى من السلوكيات ، لكنها لا تستطيع حمل الأطفال ، على الأقل ليس في أمثلة تركيبة تقليدية.
هذا المثال ينشئ مكتبة صور كمثال نمط تركيبة. لا يوجد سوى ثلاثة مستويات: الألبوم والمكتبة والصورة. سيتم الجمع بين الألبوم والمكتبة ، والصورة هي النصل ، كما هو موضح في الصورة أعلاه. هذا بنية أكثر وضوحًا مما يتطلبه المجموعة نفسها ، ولكن بالنسبة لهذا المثال ، فمن المنطقي الحد من هذه المستويات على المجموعات أو الشفرات فقط. لا تحد المجموعة القياسية من المستويات الهيكلية التي يمكن أن تحتوي على شفرات ، ولا تحد من عدد الشفرات.
للبدء ، يجب عليك أولاً إنشاء "فئة" معرض Composite لألبوماتك ومكتباتك. لاحظ أنني أستخدم jQuery لأداء عمليات DOM لتبسيط العملية.
var galleryComposite = function (ending ، id) {this.children = [] ؛ this.element = $ ('<div id = "' + id + '"> </viv>') .Append ('<h2>' + heading + '</h2>') ؛} gallerycomposite.prototype = {add: function (child) {this.children.push (child) ؛ this.element.append (child.getElement ()) ؛ } ، إزالة: function (child) {for (var node ، i = 0 ؛ node = this.getChild (i) ؛ i ++) {if (node == child) {this.children.splice (i ، 1) ؛ this.element.detach (child.getElement ()) ؛ العودة صحيح. } if (node.remove (child)) {return true ؛ }} إرجاع خطأ ؛ } ، getChild: function (i) {return this.children [i] ؛ } ، hide: function () {for (var node ، i = 0 ؛ node = this.getChild (i) ؛ i ++) {node.hide () ؛ } this.element.hide (0) ؛ } ، show: function () {for (var node ، i = 0 ؛ node = this.getChild (i) ؛ i ++) {node.show () ؛ } this.element.show (0) ؛ } ، getElement: function () {return this.element ؛ }}هذا الموقع صعب بعض الشيء ، هل يمكنني السماح لي أن أشرح المزيد؟ نقوم ببناء هذا المزيج باستخدام كل من أساليب الإضافة وإزالة وإلغاء GetChild. لا يستخدم هذا المثال فعليًا إزالة و getChild ، لكنها مفيدة جدًا لإنشاء مجموعات ديناميكية. تُستخدم أساليب إخفاء وإظهار و getElement لمعالجة DOM. يهدف هذا المزيج إلى تقديمه للمستخدمين على صفحة كتمثيل للمكتبة. يمكن لهذا المزيج التحكم في عناصر المكتبة هذه من خلال الاختباء والعرض. إذا اتصلت بـ Hide في الألبوم ، فسيختفي الألبوم بأكمله ، أو يمكنك أيضًا الاتصال به على صورة واحدة بحيث تختفي تلك الصورة فقط.
الآن ، إنشاء فئة معرض. لاحظ أنه يستخدم بالضبط نفس الطريقة مثل 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 = new GalleryComposite ('Gallery 1' ، 'Paralleries1') ؛ var gallery2 = new GalleryComposite ('Gallery 2' ، 'Gallery2') ؛ var image1 = new Gallery. = New GalleryImage ('image3.jpg' ، 'img3') ؛ var image4 = new GalleryImage ('image4.jpg' ، 'img4') ؛ gallery1.add (image1) ؛ gallery1.add (image2) ؛ gallery2.add (image3) ؛ ad (image4) ؛ coather.add (gallery1) body ، // وإلا فلن تظهر أبدًا.فوائد وضع المركب:
يمكن أن تنتج العمليات البسيطة أيضًا نتائج معقدة. تحتاج فقط إلى إجراء عمليات على كائن المستوى الأعلى والسماح لكل كائن طفل بتمرير هذه العملية من تلقاء نفسها. هذا مفيد بشكل خاص لتلك العمليات المتكررة.
في وضع المركب ، يكون الاقتران بين الكائنات الفردية فضفاضة للغاية. طالما أنها تنفذ نفس الواجهة ، فهي مجرد مساعدة صغيرة لتغيير مواقفهم أو تبديلها. يعزز إعادة استخدام الكود ويؤدي أيضًا إلى إعادة بناء الكود.
كلما تم تنفيذ عملية على كائن مشترك من المستوى الأعلى ، يكون في الواقع بحثًا عميقًا للهيكل بأكمله للعثور على العقد ، والمبرمج الذي أنشأ الكائن المشترك يجهل هذه التفاصيل. من السهل جدًا إضافتها وحذفها وإيجاد العقد في هذا التسلسل الهرمي.
عيوب الوضع المركب:
قد تخفي سهولة استخدام كائن مشترك تكلفة كل عملية يدعمها. نظرًا لأن أي عملية تسمى كائن مشترك سيتم نقلها إلى جميع كائناتها الفرعية. إذا كان هذا التسلسل الهرمي كبيرًا ، فسيتأثر أداء النظام. تتطلب التشغيل العادي لوضع المركب بعض أشكال الواجهة.
عند الجمع بين الكائنات وفئات العقدة يتم استخدامها كأدوات لف لعناصر HTML ، يجب أن تتوافق الكائنات المدمجة مع قواعد استخدام HTML. على سبيل المثال ، يصعب تحويل الجدول إلى كائن مشترك.
كلما كان فحص الواجهة أكثر صرامة ، سيكون فئة الكائن المشتركة أكثر موثوقية.