einführen
Composite kombiniert Objekte zu einer Baumstruktur, um eine "Teil-Total" -Hierarchie darzustellen. Der Kombinationsmodus macht Benutzer, die mit der Verwendung einzelner Objekte und kombinierten Objekte übereinstimmen.
Zu den häufigen Szenarien gehören der Kontrollmechanismus in ASP.NET (dh die Kontrolle kann untergeordnete Kontrolle enthalten, die rekursiv bedienen, untergeordnet und untergeordnet werden kann), und in ähnlicher Weise gibt es einen DOM -Mechanismus. Ein DOM -Knoten kann untergeordnete Knoten enthalten. Egal, ob es sich um einen übergeordneten Knoten oder ein untergeordneter Knoten handelt, er hat die gemeinsamen Funktionen des Hinzufügens, Löschens und Durchlaufens von untergeordneten Knoten. Daher ist der Schlüssel zum Kombinationsmuster eine abstrakte Klasse, die sowohl untergeordnete Elemente als auch Elternelemente darstellen kann.
Text
Zum Beispiel gibt es ein Restaurant, das eine Vielzahl von Gerichten bietet. Jede Tabelle verfügt über ein Menü. Auf der Speisekarte sind die Gerichte aufgelistet, in denen es im Restaurant geht, einschließlich Frühstücksgebäck, Mittagessen, Abendessen usw. Jede Mahlzeit hat eine Vielzahl von Menüpunkten. Unter der Annahme, dass sowohl die Menüelemente als auch das gesamte Menü gedruckt werden sollten, können Sub-Elemente hinzugefügt werden, wie z. B. neue Gerichte zum Mittagessen hinzugefügt werden können, und Zucker kann für Menüpunkte wie Kaffee hinzugefügt werden.
In diesem Fall können wir die Kombination verwenden, um diese Inhalte als Hierarchien darzustellen. Lassen Sie uns unsere Implementierungsschritte einzeln aufschlüsseln.
Der erste Schritt besteht darin, unsere Funktion "Abstract Class" -Funktion zu implementieren: Menucomponent:
Die Codekopie lautet wie folgt:
var Menucomponent = function () {
};
Menucomponent.Prototype.getName = function () {
Neuen Fehler werfen ("Diese Methode muss neu geschrieben werden!");
};
Menucomponent.Prototyp.getDescription = function () {
Neuen Fehler werfen ("Diese Methode muss neu geschrieben werden!");
};
Menucomponent.Prototyp.getPrice = function () {
Neuen Fehler werfen ("Diese Methode muss neu geschrieben werden!");
};
Menucomponent.Prototype.isvegetarian = function () {
Neuen Fehler werfen ("Diese Methode muss neu geschrieben werden!");
};
Menucomponent.Prototype.print = function () {
Neuen Fehler werfen ("Diese Methode muss neu geschrieben werden!");
};
Menucomponent.Prototyp.add = function () {
Neuen Fehler werfen ("Diese Methode muss neu geschrieben werden!");
};
Menucomponent.Prototype.remove = function () {
Neuen Fehler werfen ("Diese Methode muss neu geschrieben werden!");
};
Menucomponent.Prototype.getchild = function () {
Neuen Fehler werfen ("Diese Methode muss neu geschrieben werden!");
};
Diese Funktion enthält zwei Arten von Methoden, eine darin, Informationen wie Preis, Namen usw. zu erhalten, und die andere ist eine allgemeine Betriebsmethode, z. B. das Druck, das Hinzufügen, das Löschen und die Erlangung von Untermenü.
Der zweite Schritt besteht darin, grundlegende Gerichte zu erstellen:
Die Codekopie lautet wie folgt:
varmenuitem = function (sname, sDescription, bvegegarian, nprice) {
Menucomponent.Apply (dies);
this.sname = sname;
this.sdescription = sDescription;
this.bvegegarian = bvegegarian;
this.nprice = nprice;
};
Menuitem.Prototyp = new Menucomponent ();
Menuitem.Prototype.getName = function () {
Gibt diesen. Sname zurück;
};
Menuitem.Prototyp.getDescription = function () {
kehre dies zurück.
};
Menuitem.Prototyp.getPrice = function () {
kehre dieses. nprice;
};
Menuitem.Prototype.isvegetarian = function () {
kehre diesen.bvegegarianer zurück;
};
Menuitem.Prototyp.print = function () {
console.log (this.getName () + ":" + this.getDescription () + "," + this.getPrice () + "Euro");
};
Wie aus dem Code hervorgeht, haben wir nur 4 Methoden zum Erhalten von Informationen und Druckmethoden neu prototypisiert und die anderen 3 Betriebsmethoden nicht überlastet, da die Basisgerichte keine Möglichkeiten zum Hinzufügen, Löschen und Erhalt von Unterschriften enthalten.
Schritt 3: Erstellen Sie die Gerichte:
Die Codekopie lautet wie folgt:
var mseu = function (sname, sDescription) {
Menucomponent.Apply (dies);
this.amenucomponents = [];
this.sname = sname;
this.sdescription = sDescription;
this.creatIterator = function () {
Neuen Fehler werfen ("Diese Methode muss überschrieben werden!");
};
};
Menü.Prototyp = new Menucomponent ();
Menü.Prototype.add = Funktion (Omenucomponent) {
// Ersatz hinzufügen
this.amenucomponents.push (Omenucomponent);
};
Menü.Prototype.remove = Funktion (Omenucomponent) {
// Ersatz löschen
var mansuitems = [];
var nMenuitem = 0;
var nlenMenuitems = this.amenucomponents.length;
var oitem = null;
für (; nMenuitem <nlenmenuitems;) {
oitem = this.amenucomponents [nMenuitem];
if (oitem! == omenucomponent) {
mansuitems.push (oitem);
}
nMenuitem = nMenuitem + 1;
}
this.amenucomponents = mansuitems;
};
Menü.Prototype.getchild = function (nindex) {
// den angegebenen Ersatz erhalten
kehre dies zurück.
};
Menü.Prototyp.getname = function () {
Gibt diesen. Sname zurück;
};
Menü.Prototyp.getDescription = function () {
kehre dies zurück.
};
Menü.Prototype.print = function () {
// Aktuelle Gerichte und alle Sub-Dishes drucken
console.log (this.getName () + ":" + this.getDescription ());
console.log ("----------------------------------------");
var nMenucomponent = 0;
var nlenMenucomponents = this.aMenucomponents.length;
var omenucomponent = null;
für (; nMenucomponent <nlenmenucomponents;) {
Omenukomponent = this.Amenucomponents [nMenucomponent];
Omenucomponent.print ();
nMenucomponent = nMenucomponent + 1;
}
};
Beachten Sie, dass zusätzlich zur Implementierung der Methoden zum Hinzufügen, Löschen und Erhalt der Druckmethoden zuerst die aktuellen Gerichtinformationen drucken und dann das Drucken aller sub-DISH-Informationen geschoben werden.
Schritt 4: Erstellen Sie das angegebene Gericht:
Wir können mehrere echte Gerichte wie Abendessen, Kaffee, Gebäck usw. erstellen. Sie alle verwenden das Menü als Prototyp, und der Code lautet wie folgt:
Die Codekopie lautet wie folgt:
var dinnermenu = function () {
Menü.Apply (this);
};
DinnerMenu.Prototype = neues Menü ();
var cafemenu = function () {
Menü.Apply (this);
};
Cafemenu.prototype = neues Menü ();
var pancakehousemenu = function () {
Menü.Apply (this);
};
Pancakehousemenu.Prototype = neues Menü ();
Schritt 5: Erstellen Sie den oberen Menü Container - Menübuch:
Die Codekopie lautet wie folgt:
var matress = Funktion (Amenus) {
this.aMenus = Amenus;
};
Mattress.Prototype.printmenu = function () {
this.aMenus.print ();
};
Diese Funktion nimmt ein Menüarray als Parameter ein, und der Wert bietet die PrintMenu -Methode zum Drucken aller Menüinhalte.
Schritt 6, Anrufmethode:
Die Codekopie lautet wie folgt:
var opancakehousemenu = neues Menü ("Pancake House -Menü", "Frühstück");
var odinnermenu = neues Menü ("Abendmenü", "Mittagessen");
var ocoffeemenu = neues Menü ("Cafe -Menü", "Abendessen");
var oallmenus = neues Menü ("Alle Menüs", "alle Menüs kombiniert");
oallmenus.add (opancakehousemenu);
oallmenus.add (odinnermenu);
Odinnermenu.add (New Menuitem ("Pasta", "Spaghetti mit Marinara -Sauce und ein Stück Sauerteigbrot", Richtig, 3,89));
odinnnermenu.add (ocoffeemenu);
ocoffeemenu.add (neuer Menuitem ("Express", "Kaffee from Machine", falsch, 0,99));
var omattress = neue Matratze (oallmenus);
console.log ("-----------------------------------------");
Omattress.printmenu ();
console.log ("-----------------------------------------");
Schauen sich Schüler, die mit ASP.NET Control Development vertraut sind, vertraut aus?
Zusammenfassen
Das Nutzungsszenario des Kombinationsmodus ist sehr klar:
Wenn Sie den Teil des Objekts darstellen möchten - die Gesamthierarchie;
Sie möchten, dass der Benutzer den Unterschied zwischen einem kombinierten Objekt und einem einzelnen Objekt ignoriert, und der Benutzer verwendet alle Objekte in der kombinierten Struktur einheitlich (Methoden).
Darüber hinaus wird dieses Muster häufig bei Dekoratoren verwendet. Sie haben normalerweise eine gemeinsame übergeordnete Klasse (dh Prototyp), sodass die Dekoration Komponentenschnittstellen mit add, entfernen und getChild -Operationen unterstützen muss.