Einführung in das Dekorationsmuster von JavaScript-Designmustern_Javascript-Fähigkeiten

Beschreibung des Dekorationsmusters

Erläuterung: Verwenden Sie eine Klasse, um das Funktionsobjekt einer anderen Klasse vorher oder nachher dynamisch zu ändern, und fügen Sie ihr einige zusätzliche Funktionen hinzu. Dies ist die Dekoration der Funktion eines Klassenobjekts, und die dekorierte Klasse hängt mit der dekorierten Klasse zusammen Klassen müssen über dieselben Zugriffsschnittstellenmethoden (Funktionen) verfügen. In dynamischen objektorientierten Klassen ist die Implementierung im Allgemeinen durch die Implementierung derselben dekorativen Klasse eingeschränkt Die Methode der dekorierten Klasse ruft die Methode der entsprechenden dekorierten Klasse auf und ändert sie dann

Szenariobeispiel:

1>. Die Kleidung, die wir im Leben tragen, ist zum Beispiel ein Hemd, eine Anzugjacke, eine Hose, eine Krawatte und jedes weitere getragene Stück ist eine Dekoration für das Vorderteil oder der ganze Körper. ;

2>. Beispielsweise haben wir eine funktionale Methode unter der Klasse, die zum Schreiben von Protokollen oder zur Benutzeranmeldung verwendet werden kann. Möglicherweise ist es erforderlich, die aktuellen Bedienerinformationen vor dem Schreiben des Protokolls oder nach erfolgreicher Anmeldung abzurufen. Schreiben Geben Sie ein Protokoll ein. Der zusätzliche Vorgang vor dem Schreiben des Protokolls dient im Allgemeinen dem Zweck, das Protokoll nach erfolgreicher Anmeldung zu schreiben

Daher wird das Dekoratormuster verwendet, um ein Szenario zu implementieren, in dem die beiden ähnliche Vorgänge haben. Es handelt sich um die Erweiterung des Dekorators auf das dekorierte Funktionsobjekt, und das Wesentliche ist der gleiche Funktionsumfang wie die ursprüngliche Methode

Beispiel-Quellcode

1. Dekorateurklasse

Code kopieren Der Code lautet wie folgt: Funktion Wear() {

 

}

Wear.prototype.Shirt = function() {
//Ein Hemd tragen console.log('Shirt anziehen');

}

2. Dekorateurklasse

Code kopieren Der Code lautet wie folgt: Funktion Dekorateur(tragen) {

This.wear = wear;

}

Decorator.prototype.Shirt = function() {
This.wear.Shirt(); //Nachdem ich ein Hemd getragen hatte, fügte ich eine Krawatte hinzu

}

3. So verwenden Sie

Code kopieren Der Code lautet wie folgt: var wear = new Wear();

var decorator = neuer Decorator(wear);

decorator.Shirt();

Auf diese Weise wird die dynamische erweiterte Dekoration des Funktionsobjekts Wear Shirt realisiert. Sie müssen nicht wissen, wie die ursprüngliche dekorierte Methode ausgeführt wird, und dann wissen, was wir tun Was auch immer die zusätzlichen Funktionen sind;

Weitere Anweisungen

Das Dekoratormuster verkörpert wirklich den objektorientierten Ansatz: Das Prinzip, offen für Erweiterungen und geschlossen für Änderungen zu sein, wird implementiert, ohne die [dekorierte Klasse Wear] zu ändern und die [dekorierte Klasse] Decorator zu erweitern. ;

Eines der Hauptmerkmale des Dekorationsmusters besteht darin, dass der Dekorateur auf das dekorierte Objekt verweist, um eine unveränderte Dekoration des dekorierten Objekts zu erreichen

Simulation: Erst Hemd anziehen, dann Krawatte, dann Anzug: Die dekorierte Person oben bleibt unverändert:

2. Dekorateurklasse:

Code kopieren

Der Code lautet wie folgt: Funktion Dekorateur(tragen) { This.wear = wear; }

Decorator.prototype.Shirt = function() {

This.wear.Shirt(); //Trage hier nur ein Hemd;
}

3. Erstellen Sie eine Krawattenklasse und eine Anzugklasse, die die Decorator-Unterklasse erben

Code kopieren

Der Code lautet wie folgt:

Funktion Decorator_Tie(Decorator) {
This.decorator = decorator;
} 
Decorator_Tie.prototype.Shirt = function() {
This.decorator.Shirt(); //Zieh das Hemd an
console.log('Zieh deine Krawatte wieder an');
}

Funktion Decorator_Western (Dekorateur) {
This.decorator = decorator;
}
Decorator_Western.prototype.Shirt = function() {
This.decorator.Shirt();
console.log('Zieh den Anzug wieder an');
}

Verwendung:

Code kopieren Der Code lautet wie folgt:

//Zieh zuerst dein Hemd an
var wear = new Wear();
var decorator = neuer Decorator(wear);
//decorator.Shirt();
//Zieh deine Krawatte wieder an
var tie = new Decorator_Tie(decorator);
//tie.Shirt();
//Zieh den Anzug wieder an
var western = new Decorator_Western(tie);
western.Shirt();

Dies ist ein Simulationsbeispiel für das Tragen von Kleidung und Dekoration