Pemahaman mendalam tentang siri JavaScript (29): Penjelasan terperinci tentang corak penghias corak reka bentuk_kemahiran javascript

Pengenalan

Penghias menyediakan alternatif yang lebih fleksibel kepada warisan. Penghias digunakan untuk membungkus objek dengan antara muka yang sama Mereka bukan sahaja membenarkan anda menambah tingkah laku pada kaedah, tetapi juga menetapkan kaedah untuk dipanggil oleh objek asal (seperti pembina penghias).

Penghias digunakan untuk menambah fungsi baharu dalam bentuk kaedah terlebih beban Mod ini boleh menambah tingkah laku anda sendiri sebelum atau selepas penghias untuk mencapai tujuan tertentu.

Teks

Jadi apakah faedah corak penghias? Seperti yang dinyatakan sebelum ini, penghias adalah alternatif kepada warisan. Apabila skrip dijalankan, menambah tingkah laku pada subkelas akan menjejaskan semua kejadian kelas asal, tetapi penghias tidak akan. Sebaliknya, ia boleh menambah gelagat baharu pada objek berbeza secara individu. Seperti yang ditunjukkan dalam kod berikut:

Salin kod Kod adalah seperti berikut:

//Kelas (fungsi) yang perlu dihias
fungsi Macbook() {
This.cost = function () {
Pulangan 1000;
};
}

fungsi Memori(macbook) {
This.cost = function () {
         pulangkan macbook.cost() 75;
};
}

fungsi BlurayDrive(macbook) {
This.cost = function () {
         pulangkan macbook.cost() 300;
};
}

fungsi Insurans(macbook) {
This.cost = function () {
         pulangkan macbook.cost() 250;
};
}

// Penggunaan
var myMacbook = Insurans baharu(BlurayDrive baharu(Memori baharu(Macbook baharu())));
console.log(myMacbook.cost());

Berikut ialah contoh lain Apabila kita memanggil performTask pada objek penghias, ia bukan sahaja mempunyai beberapa gelagat penghias, tetapi juga memanggil fungsi performTask bagi objek asas.

Salin kod Kod adalah seperti berikut:

fungsi ConcreteClass() {
This.performTask = fungsi () {
This.preTask();
console.log('melakukan sesuatu');
This.postTask();
};
}

fungsi AbstractDecorator(berhias) {
This.performTask = fungsi () {
          decorated.performTask();
};
}

fungsi ConcreteDecoratorClass(berhias) {
This.base = AbstractDecorator;
This.base(dihiasi);

dihiasi.preTask = fungsi () {
console.log('pra-panggilan..');
};

dihiasi.postTask = fungsi () {
console.log('pasca-panggilan..');
};

}

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

Satu lagi contoh menyeluruh:

Salin kod Kod adalah seperti berikut:

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.