Während unseres normalen Entwicklungsprozesses werden wir auf jeden Fall dieser Situation begegnen: Wir verarbeiten einfache Objekte und komplexe Objekte, die aus einfachen Objekten gleichzeitig bestehen. Diese einfachen Objekte und komplexen Objekte werden zu einer Baumstruktur kombiniert, und der Kunde muss bei der Verarbeitung Konsistenz aufrechterhalten. Beispielsweise kann für Produktbestellungen in E-Commerce-Websites jede Produktreihenfolge mehrere Unterbelegungskombinationen aufweisen, z. B. Ordner im Betriebssystem, jeder Ordner verfügt über mehrere Unterordner oder Dateien. Wenn wir kopieren, löschen usw., ob es sich um einen Ordner oder eine Datei handelt, ist dies für US -Betreiber gleich. In diesem Szenario ist es sehr geeignet, den Kombinationsmodus zu verwenden, um ihn zu erreichen.
Grundwissen
Kombinationsmodus: Kombinieren von Objekten zu einer Baumstruktur, um eine "Teil-Total" -Hierarchie darzustellen. Mit dem Kombinationsmodus können Benutzer bei der Verwendung einzelner Objekte und kombinierten Objekte konsistent haben.
Der Kombinationsmodus gibt drei Hauptzeichen:
(1) abstrakte Komponente (Komponente): Eine abstrakte Klasse, die hauptsächlich die öffentliche Schnittstelle der an der Kombination beteiligten Objekte definiert
(2) Sub-Object (Blatt): das grundlegendste Objekt, das ein kombiniertes Objekt bildet
(3) Verbundwerkstoff: Komplexe Objekte, kombiniert von untergeordneten Objekten
Der Schlüssel zum Verständnis des Kombinationsmusters besteht darin, die Konsistenz des Kombinationsmusters für einzelne Objekte und kombinierte Objekte zu verstehen. Lassen Sie uns über die Implementierung von Kombinationsmustern sprechen, um unser Verständnis zu vertiefen.
Der Kombinationsmodus ist auf die dynamische Erstellung von Benutzeroberflächen auf der Seite zugeschnitten. Sie können nur einen lebenswidrigen Befehl verwenden, um einige komplexe oder rekursive Operationen für viele Objekte zu initialisieren. Der Kombinationsmodus liefert zwei Punkte:
(1) Erlauben Sie Ihnen, eine Gruppe von Objekten als spezifische Objekte zu behandeln. Ein zusammengesetztes Objekt implementiert den gleichen Operation wie die Sub-Objekte, die es herstellen. Durch die Durchführung einer bestimmten Operation auf einem kombinierten Objekt werden alle Unterobjekte unter diesem Objekt dieselbe Operation durchführen. Daher können Sie nicht nur ein einzelnes Objekt nahtlos in einen Satz von Objekten ersetzen, sondern auch dasselbe. Diese unabhängigen Objekte sind sogenannte lose gekoppelt.
(2) Das Kombinationsmuster kombiniert den Satz von Sub-Objekten in eine Baumstruktur und ermöglicht das Durchqueren des gesamten Baumes. Dadurch wird die interne Implementierung verbergt und ermöglicht es Ihnen, die Sub-Objekte in irgendeiner Weise zu organisieren. Jeder Code für dieses Objekt (kombiniertes Objekt) hängt nicht von der Implementierung der internen Unterobjekte ab.
Implementierung des Kombinationsmodus
(1) Der einfachste Kombinationsmodus
Die Dom -Struktur von HTML -Dokumenten ist eine natürliche Baumstruktur. Die grundlegendsten Elemente werden Dombäume und bilden schließlich DOM -Dokumente. Es ist sehr für den Kombinationsmodus geeignet.
Wir verwenden häufig die JQuery -Klassenbibliothek, in der das Kombinationsmuster häufiger angewendet wird, beispielsweise der folgende Code häufig implementiert:
$ (". Test"). AddClass ("Notest"). Remove ("Test");Dieser einfache Code soll das Element, das die Klasse enthält, den Test erhalten und es dann mit AddClass und Removeclass verarbeiten. Unabhängig davon, ob $ (". Test") ein Element oder mehrere Elemente ist, wird es letztendlich durch die einheitlichen Schnittstellen von AddClass- und Removeclass -Schnittstellen aufgerufen.
Lassen Sie uns kurz die Implementierung von AddClass simulieren:
var addClass = function (Eles, className) {if (elesinstanceof nodelist) {for (var i = 0, length = eles.Length; i <length; i ++) {Eles [i] .nodetype === 1 && (teen [i] .classname += (' +classname +')); }} else if (elesinstanceof node) {eles.nodetype === 1 && (eles.className + = ('' + className + '')); } else {throw "Eles ist kein HTML -Knoten"; }} addClass (document.getElementById ("div3"), "test");Dieser Code simuliert lediglich die Implementierung von AddClass (Kompatibilität und Universalität werden vorerst nicht berücksichtigt), und es ist einfach, den Knotentyp zuerst zu beurteilen und dann den Klassennamen nach verschiedenen Typen hinzuzufügen. Für Nodelist oder Knoten verwenden Client -Aufrufe die AddClass -Schnittstelle auf die gleiche Weise. Dies ist die grundlegendste Idee des Kombinationsmodus, der die Verwendung von Teil und die gesamte konsistent macht.
(2) Typische Beispiele
Wir haben ein typisches Beispiel erwähnt: Eine Produktreihenfolge enthält mehrere Produkt-Subbestellungen, und mehrere Produkt-Subbestellungen bilden eine komplexe Produktreihenfolge. Aufgrund der Merkmale der JavaScript -Sprache vereinfachen wir die drei Rollen des Kombinationsmusters in zwei Rollen:
(1) SubObject: In diesem Beispiel ist das SubObject ein Produkt -Unterordnung
(2) Kombinationsobjekt: Dies ist die Gesamtreihenfolge des Produkts
Angenommen, wir entwickeln eine Tourismusprodukt-Website, die zwei Unterprodukte enthält: Flugtickets und Hotels. Wir definieren die Sub-Objekte wie folgt:
Function FlightOrder () {} flugOrder.prototyp.create = function () {console.log ("Flugreihenfolge erstellt");} Funktion Hotelorder () {} HotelOrder.Prototype.create = function () {console.log ("Hotelsorder erstellt");};};};};Der oben genannte Code definiert zwei Klassen: Air -Ticket -Bestell- und Hotelbestellkurs. Jede Klasse hat eine eigene Bestellungsmethode.
Als nächstes erstellen wir eine Gesamtbestellklasse:
Funktion TotalOrders () {this.OrderList = [];} TotalOrders.Prototype.Addorder = Funktion (order) {this.orderList.push (order);} TotalOrders.Prototyp.Create = Funktion (order) {für (var i = 0, länge }}Dieses Objekt verfügt über drei Hauptmitglieder: eine Bestellliste, eine Methode zum Hinzufügen einer Bestellung und eine Methode zum Erstellen einer Bestellung.
Bei der Verwendung des Clients lautet Folgendes wie folgt:
var flug = new flightorder (); flug.create (); var ordnes = new TotalOrders (); Bestellungen.Addorder (New FlightOrder ()); Bestellungen.Addorder (New HotelOrder ()); Bestellungen.Create ();
Client -Anrufe zeigen zwei Möglichkeiten, eine besteht darin, Flugticketbestellungen zu erstellen, und der andere besteht darin, mehrere Bestellungen zu erstellen, aber sie werden schließlich über die Erstellenmethode erstellt. Dies ist ein sehr typisches Anwendungsszenario des Kombinationsmodus.
Zusammenfassen
Das Kombinationsmuster ist nicht schwer zu verstehen. Es löst hauptsächlich das Konsistenzproblem einzelner Objekte und kombinierten Objekte in der Art und Weise, wie sie verwendet werden. Dies eignet sich hervorragend für die Verwendung kombinatorischer Muster, wenn Objekte offensichtliche Hierarchien haben und sie gleichmäßig verwenden möchten. In der Webentwicklung ist diese Hierarchie sehr häufig und für die Verwendung von Kombinationsmustern sehr geeignet. Insbesondere für JS müssen Sie sich nicht an die traditionelle objektorientierte Sprachform halten und die Eigenschaften der JS-Sprache flexibel verwenden, um Teil und Gesamtnutzung zu erreichen.
(1) Szenarien mit dem Kombinationsmodus
Verwenden Sie den Kombinationsmodus, wenn Sie auf die folgenden beiden Situationen stoßen
A. Eine Sammlung von Objekten, die eine bestimmte hierarchische Struktur enthalten (die spezifische Struktur kann während des Entwicklungsprozesses nicht bestimmt werden)
B. möchten einige Operationen für diese Objekte oder einige von ihnen ausführen
(2) Nachteile des Kombinationsmodus
Da jeder Betrieb eines kombinierten Objekts bei allen Unterobjekten denselben Betrieb aufruft, wird es Leistungsprobleme geben, wenn die kombinierte Struktur groß ist. Wenn Sie den Kombinationsmodus verwenden, um HTML zu verkapulieren, müssen Sie auch das entsprechende Tag auswählen. Beispielsweise kann die Tabelle im Kombinationsmodus nicht verwendet werden, und die Blattknoten sind nicht offensichtlich.