einführen
Dekorateure bieten flexiblere Alternativen als Vererbung. Dekorateure verwenden Objekte, mit denen dieselbe Schnittstelle einwickelt wird, wodurch Sie nicht nur Verhalten zu Methoden hinzufügen, sondern auch die Methoden auf Originalobjektaufrufe (z. B. den Konstruktor des Dekorateurs) festlegen.
Dekorateure werden verwendet, um neue Funktionen in Form von überlasteten Methoden hinzuzufügen. Dieser Modus kann sein eigenes Verhalten vor oder nach dem Dekorateur hinzufügen, um einen bestimmten Zweck zu erzielen.
Text
Was sind die Vorteile des Dekorationsmodus? Wie bereits erwähnt, ist der Dekorateur eine Alternative zum Erreichen der Vererbung. Wenn das Skript ausgeführt wird, wirkt sich das Hinzufügen von Verhalten zur Unterklasse auf alle Instanzen der Originalklasse aus, der Dekorateur jedoch nicht. Stattdessen kann es verschiedenen Objekten neues Verhalten hinzufügen. Der folgende Code sieht aus wie:
Die Codekopie lautet wie folgt:
// Klasse (Funktion), die Dekoration benötigt (Funktion)
Funktion macbook () {
this.cost = function () {
Rückkehr 1000;
};
}
Funktionsspeicher (MacBook) {
this.cost = function () {
return macbook.cost () + 75;
};
}
Funktion BluRayDrive (MacBook) {
this.cost = function () {
return macbook.cost () + 300;
};
}
Funktionsversicherung (MacBook) {
this.cost = function () {
return macbook.cost () + 250;
};
}
// Verwendung
var mymacbook = new Insurance (neuer BluRayDrive (neuer Speicher (neuer MacBook ()));
console.log (myMacbook.cost ());
Unten ist ein weiteres Beispiel. Wenn wir PerformTask auf dem Dekorateurobjekt aufrufen, hat es nicht nur ein Verhalten von Dekorateuren, sondern auch die PerformTask -Funktion des unteren Objekts.
Die Codekopie lautet wie folgt:
Funktion ConcreteClass () {
this.performtask = function () {
this.pretask ();
console.log ('etwas tun');
this.posttask ();
};
}
Funktion AbstractDecorator (dekoriert) {
this.performtask = function () {
dekoriert.performTask ();
};
}
Funktion ConcretedCoratorClass (dekoriert) {
this.base = AbstractDecorator;
diese.base (dekoriert);
dekoriert.pretask = function () {
console.log ('Vorbereitung ..');
};
dekoriert.posttask = function () {
console.log ('nach der Calling ..');
};
}
var concrete = new ConcreteClass ();
var decorator1 = neuer konkretedCoratorClass (Beton);
var Decorator2 = Neue ConcretEDeCoratorClass (Decorator1);
Decorator2.performTask ();
Nehmen wir ein weiteres gründliches Beispiel:
Die Codekopie lautet wie folgt:
var tree = {};
tree.decorate = function () {
console.log ('achten Sie darauf, dass der Baum/' t fällt ');
};
tree.getDecorator = function (deco) {
Baum [Deco] .Prototype = this;
Neuen Baum zurückgeben [Deco];
};
Tree.redballs = function () {
this.decorate = function () {
this.redballs.prototype.decorate (); // Schritt 7: Führen Sie zuerst die Prototype aus (das ist Engel) Dekoration Methode
console.log ('Anziehen ein paar rote Bälle'); // Schritt 8 Ausgabe rot
// Verwenden Sie diese 2 Schritte als Dekorationsmethode von Redballs
}
};
tree.blueballs = function () {
this.decorate = function () {
this.blueballs.prototype.decorate (); // Schritt 1: Führen Sie zunächst die Dekoration des Prototyps aus, dh tree.decorate ()
console.log ('blaue Bälle hinzufügen'); // Schritt 2 Ausgabe Blau
// Verwenden Sie diese 2 Schritte, wenn die Blueballs -Methode dekorieren
}
};
Tree.Angel = function () {
this.decorate = function () {
this.angel.prototype.decorate (); // Schritt 4: Führen Sie zuerst die Prototype aus (das ist BlueBalls) Dekoration Methode
console.log ('ein Engel an der Spitze'); // Schritt 5 Ausgabe Engel
// Verwenden Sie diese 2 Schritte als Dekorationsmethode von Angels Dekoration
}
};
tree = tree.getDecorator ('blueballs'); // Schritt 3: Weisen Sie das Blueballs -Objekt dem Baum zu, und der getDecorator im übergeordneten Prototyp ist noch verfügbar
tree = tree.getDecorator ('Angel'); // Schritt 6: Weisen Sie das Engelsobjekt dem Baum zu. Zu diesem Zeitpunkt ist der getDecorator im übergeordneten Prototyp des übergeordneten Prototyps noch verfügbar
tree = tree.getDecorator ('Redballs'); // Schritt 9: Weisen Sie das Redballs -Objekt dem Baum zu
Tree.decorate (); // Schritt 10: Führen Sie die Dekorationsmethode des Redballs -Objekts aus
Zusammenfassen
Das Dekorateurmuster ist eine Möglichkeit, vorhandenen Funktionen dynamisch mehr Funktionen hinzuzufügen. Jede zu dekorierte Funktion wird in eine separate Funktion platziert und verwenden dann diese Funktion, um das zu dekorierte vorhandene Funktionsobjekt zu wickeln. Wenn ein spezielles Verhalten ausgeführt werden muss, kann der aufrufende Code die Dekorationsfunktion selektiv und nacheinander verwenden, um das Objekt nach Bedarf einzuwickeln. Der Vorteil ist, dass es die Kernverantwortung der Klasse (Funktion) von der dekorativen Funktion unterscheidet.