Vertiefendes Verständnis der JavaScript-Reihe (29): Detaillierte Erläuterung des Dekorationsmusters von Designmustern_Javascript-Fähigkeiten

Einführung

Dekorateure bieten eine flexiblere Alternative zur Vererbung. Dekoratoren werden verwendet, um Objekte mit derselben Schnittstelle zu umschließen. Sie ermöglichen nicht nur das Hinzufügen von Verhalten zu Methoden, sondern auch das Festlegen von Methoden, die vom Originalobjekt (z. B. dem Konstruktor des Dekorators) aufgerufen werden sollen.

Dekoratoren werden verwendet, um neue Funktionen in Form überladener Methoden hinzuzufügen. In diesem Modus können Sie Ihr eigenes Verhalten vor oder nach dem Dekorator hinzufügen, um einen bestimmten Zweck zu erreichen.

Text

Was sind also die Vorteile des Dekoratormusters? Wie bereits erwähnt, sind Dekorateure eine Alternative zur Vererbung. Wenn das Skript ausgeführt wird, wirkt sich das Hinzufügen von Verhalten zur Unterklasse auf alle Instanzen der ursprünglichen Klasse aus, Dekoratoren jedoch nicht. Stattdessen kann es verschiedenen Objekten einzeln neue Verhaltensweisen hinzufügen. Wie im folgenden Code gezeigt:

Code kopieren Der Code lautet wie folgt:

//Klasse (Funktion), die dekoriert werden muss
Funktion Macbook() {
This.cost = function () {
Geben Sie 1000 zurück;
};
}

Funktion Speicher (Macbook) {
This.cost = function () {
         return macbook.cost() 75;
};
}

Funktion BlurayDrive (Macbook) {
This.cost = function () {
         return macbook.cost() 300;
};
}

Funktion Versicherung (MacBook) {
This.cost = function () {
         return macbook.cost() 250;
};
}

// Verwendung
var myMacbook = new Insurance(new BlurayDrive(new Memory(new Macbook()))));
console.log(myMacbook.cost());

Das Folgende ist ein weiteres Beispiel. Wenn wir performTask für das Dekoratorobjekt aufrufen, weist es nicht nur einige Dekoratorverhalten auf, sondern ruft auch die performTask-Funktion des zugrunde liegenden Objekts auf.

Code kopieren Der Code 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 ConcreteDecoratorClass(dekoriert) {
This.base = AbstractDecorator;
This.base(dekoriert);

dekoriert.preTask = function () {
console.log('pre-calling..');
};

dekoriert.postTask = function () {
console.log('post-calling..');
};

}

var Concrete = new ConcreteClass();
var decorator1 = new ConcreteDecoratorClass(concrete);
var decorator2 = new ConcreteDecoratorClass(decorator1);
decorator2.performTask();

Ein weiteres ausführliches Beispiel:

Code kopieren Der Code lautet wie folgt:

var tree = {};
tree.decorate = function () {
console.log('Stellen Sie sicher, dass der Baum nicht fällt');
};

tree.getDecorator = Funktion (Deko) {
Tree[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 Dekorationsmethode des Prototyps aus (das ist Angel)
console.log('Zieh ein paar rote Bälle an'); // Schritt 8 Dann Ausgabe rot
// Verwenden Sie diese 2 Schritte als Dekorationsmethode für RedBalls
}
};

tree.BlueBalls = function () {
This.decorate = function () {
This.BlueBalls.prototype.decorate(); // Schritt 1: Führen Sie zuerst die Dekorationsmethode des Prototyps aus, also tree.decorate()
console.log('Blaue Kugeln hinzufügen'); // Schritt 2 Dann blau ausgeben
// Verwenden Sie diese 2 Schritte als Dekorationsmethode für BlueBalls
}
};

tree.Angel = function () {
This.decorate = function () {
This.Angel.prototype.decorate(); // Schritt 4: Führen Sie zuerst die Dekorationsmethode des Prototyps aus (das ist BlueBalls)
console.log('An angel on the top'); // Schritt 5 Dann Engel ausgeben
// Verwenden Sie diese 2 Schritte als Angels Dekorationsmethode
}
};

tree = tree.getDecorator('BlueBalls'); // Schritt 3: Zuweisen des BlueBalls-Objekts zum Baum. Zu diesem Zeitpunkt ist getDecorator im übergeordneten Prototyp noch verfügbar
tree = tree.getDecorator('Angel'); // Schritt 6: Weisen Sie das Angel-Objekt dem Baum zu. Zu diesem Zeitpunkt ist getDecorator im übergeordneten Prototyp 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

Zusammenfassung

Das Dekoratormuster ist eine Möglichkeit, jede zu dekorierende Funktion dynamisch in eine separate Funktion einzufügen und diese Funktion dann zu verwenden, um das vorhandene zu dekorierende Funktionsobjekt zu umschließen Zur Ausführung kann der aufrufende Code selektiv und nacheinander Dekorationsfunktionen verwenden, um Objekte nach Bedarf zu umhüllen. Der Vorteil besteht darin, dass die Kernaufgaben der Klasse (Funktion) und der Dekorationsfunktion getrennt sind.