[Dekorateur in Angular] – Einführung in Dekorateure

        Decorators sind aufgrund ihrer weit verbreiteten Verwendung in Angular populär geworden. In Angular sind aufgrund der Verwendung von TypeScript Decorators verfügbar.

        Aber in JavaScript sind Decorators derzeit noch ein Vorschlag der Stufe 2, was bedeutet, dass Decorators Teil zukünftiger Updates der Sprache sein werden.

        Dieser Artikel konzentriert sich darauf, was Decorators sind und wie sie verwendet werden, um Code klarer und leichter verständlich zu machen.

1. Was ist ein Dekorateur?

        In seiner einfachsten Verwendungsform ist ein Dekorierer eine Möglichkeit, ein Stück Code um ein anderes zu wickeln, Code buchstäblich zu "dekorieren". Sie haben vielleicht schon einmal von diesem Ansatz gehört, dem Konzept zusammengesetzter Funktionen oder Funktionen höherer Ordnung.

        Diese Art der Dekoration ist bereits in Standard-JavaScript möglich, verwenden Sie einfach eine Methode, um eine andere Methode zu umschließen:

// 目标方法
function sayHello(name) {
  console.log('Hello, ' + name);
}
//作为装饰的方法
function loggingDecorator(wrappedMethod) {
  return function () {
    console.log(`call function ${wrappedMethod.name} start`);
    const result = wrappedMethod.apply(this, arguments);
    console.log(`call function ${wrappedMethod.name} end`);
    return result;
  }
}
//包裹后的方法
const wrappedHello = loggingDecorator(sayHello);
//装饰后的方法调用
wrappedHello("HanMeiMei");

        Dieses Beispiel erstellt eine neue Methode wrapHello , die von der Methode loggingDecorator(sayHello) zurückgegeben wird , die denselben Vorgang ausführt wie die Methode sayHello() . Der Unterschied besteht darin, dass wrapHello vor und nach dem Zielmethodenaufruf mehr Protokolldruckaktionen hat. Führen Sie den Code aus, die Ausgabe sieht wie folgt aus:

         Die gleiche Dekorationsmethode kann auch verwendet werden, um andere Zielmethoden zu "dekorieren":

function sayHi(name){
    console.log('Hi, ' + name);
}
const wrappedHi = loggingDecorator(sayHi);
wrappedHi("HanMeiMei");

        Operationsergebnis:

 2. Verwendung von Dekorateuren

Decorators verwenden eine spezielle Syntax in JavaScript, d. h. ihnen wird das @ -Symbol         vorangestellt und vor dem zu dekorierenden Code platziert.

        Da die aktuelle Browser- oder Node-Version keine Decorators unterstützt, kann das Debuggen nicht direkt im Browser durchgeführt werden. Die in diesem Artikel gezeigten Decorators sind alle debuggt und werden in der Angular-Umgebung ausgeführt.

        Das folgende Beispiel demonstriert die Verwendung von Decorators für einfache Klassen:

function changePrice<T extends { new(...args: any[]): {} }>(constructor: T) {
    return class extends constructor {
        price = 666;
    };
}
 
@changePrice
export class Grape {
    price: number = 0;
    constructor(price: number) {
        this.price = price;
        console.log(`constructor price : ${this.price}`);
    }
}
 
//组件中调用代码
let grape = new Grape(4);
console.log(grape);

        Die Decorator-Methode wird oberhalb der Definition der Klasse Grape angewendet, indem @ plus der Decorator-Name verwendet wird.Im obigen Beispiel erweitert die Decorator-Methode changePrice die Konstruktionsmethode der Zielklasse und setzt den Wert des Preisfelds auf 666. Der Decorator Methode Was zurückgegeben wird, ist ein neuer Konstruktor. Das Ausführen des Codes gibt Folgendes aus:

Es ist ersichtlich , dass der erweiterte Konstruktor, der vom Dekorator changePrice zurückgegeben wird, durch new Grape(4)          in der Komponente aufgerufen wird, wo price auf 666 gesetzt ist . Es ist gleichbedeutend mit Anrufen 

this.price = price;
console.log(`constructor price : ${this.price}`);

        Rufen Sie dann erneut  this.price = 666; auf .

        Dies ist das Ende der kurzen Einführung über Dekorateure, und die spezifischen Dekorateure werden später vorgestellt.