Eine exemplarische Vorgehensweise zum Erstellen von JavaScript-Dekoratoren und wie die Verwendung von Autoaccessoren dazu beiträgt, Ihr Entwicklererlebnis zu verbessern.
Der Decorators-Vorschlag auf GitHub leistet bereits hervorragende Arbeit bei der Aufschlüsselung der grundlegenden Anwendungsfälle von Decorators. Mein Ziel ist es nicht, diese Beispiele dort nachzubilden, sondern einige weniger bekannte Funktionen und Interaktionen hervorzuheben. Darüber hinaus werde ich im nächsten Artikel dieser Reihe hervorheben, wie man mehrere Dekoratoren für eine einzelne Klasseneigenschaft zusammenstellt oder verkettet.
Jedes Codebeispiel enthält einen Link zu einem interaktiven Babel REPL-Spielplatz, sodass Sie es selbst ausprobieren können, ohne ein Polyfill einrichten oder ein Repo starten zu müssen. Die Option „Auswerten“ oben links (unter „Einstellungen“) sollte in allen meinen Beispielen aktiviert sein, was bedeutet, dass Sie den Code sehen, bearbeiten, die Entwicklungskonsole Ihres Browsers öffnen und dort die Protokolle/Ergebnisse sehen können.
Sie müssen nicht auf den transpilierten Code auf der rechten Seite der Babel REPL achten, es sei denn, Sie möchten sich mit der Polyfüllung für Dekoratoren befassen. Auf der linken Seite von Babel REPL können Sie Code bearbeiten und schreiben, um ihn selbst auszuprobieren.
Zur Betonung: Die Konsole Ihrer Entwicklertools sollte Konsolenprotokolle anzeigen. Wenn dies nicht der Fall ist, stellen Sie sicher, dass oben links die Option „Auswerten“ aktiviert ist.
Eine wichtige Funktion der Decorators-Spezifikation sind automatische Zugriffsfunktionen. Wir beginnen damit, zu lernen, was sie sind und wie die Verwendung von Auto-Accessor das Schreiben von Dekoratoren erleichtert.
Der Decorators-Vorschlag beschreibt hier den Auto-Accessor. Aber letztendlich ist es eine einfache Funktion; Schauen wir uns ein einfaches Arbeitsbeispiel an: Babel REPL.
class MyClass {
accessor myBoolean = false
}
In dieser Klassendefinition steht das Accessor-Schlüsselwort vor dem Eigenschaftsnamen. Dies hat jedoch noch nicht wirklich etwas an der Eigenschaft geändert – als nächstes werden wir sehen, wie nützlich Auto-Accessoren in Kombination mit Dekoratoren sind.
(Beachten Sie, dass Sie static auch mit Auto-Accessoren verwenden können, z. B. dem statischen Accessor myBoolean = false)
Um besser zu verstehen, warum wir einen Auto-Accessor verwenden, erstellen wir einige Dekoratoren.
Wir beginnen damit, Auto-Accessoren mit einem Dekorator zu kombinieren, der eigentlich nicht viel macht, um eine Vorstellung von der Syntax zu bekommen.
Hier ist ein funktionaler Dekorator, der eine interne Variable verwaltet und es Ihnen ermöglicht, diese Variable über die Eigenschaft der Klasse abzurufen und festzulegen: Babel REPL
function simpleDecorator(value, context) {
let internalValue = false
return {
get() {
return internalValue
},
set(val) {
internalValue = val
return internalValue
}
}
}
class MyClass {
@simpleDecorator
accessor myBoolean
}
Dieser Dekorator gibt ein Objekt mit zwei Methoden zurück: get() und set(). Auf diese Weise kann ein Dekorateur für einen Auto-Accessor sowohl den Setter als auch den Getter für eine Eigenschaft an einer einzigen Stelle „dekorieren“ oder umschließen; Wir müssen keinen simpleGetterDecorator und keinen simpleSetterDecorator erstellen. Stattdessen haben wir sie in einer einzigen Definition mit Auto-Accessoren zusammengefasst, was einfacher ist.
Letztendlich sieht das bisher nach einer recht normalen Funktion aus – was sich hervorragend für einen Einstieg eignet!
Um uns auf den Rest des Artikels vorzubereiten, aktualisieren wir unseren Dekorator, sodass er tatsächlich eine Art Validierung durchführt. Wir erstellen einen Dekorator, mit dem Sie nur gerade Zahlen festlegen können und sonst nichts. So würde das aussehen: Babel REPL
function onlyEvenNumbers(value, context) {
let internalNumber = 0
return {
get() {
return internalNumber
},
set(val) {
const num = Number(val)
if(isNaN(num)) {
// don't set the value if it's not a number or coerced to a number
return internalNumber
}
if(num % 2 !== 0) {
// don't allow odd numbers
return internalNumber
}
internalNumber = val
return internalNumber
}
}
}
class MyClass {
@onlyEvenNumbers
accessor myEvenNumber
}
Also fügen wir der set()-Methode Logik hinzu und jetzt durchläuft jeder, der versucht, die Eigenschaft „myEvenNumber“ für unsere Klasse festzulegen, diese Validierungslogik. Schön.
Da wir nun einen netten Dekorator für nur gerade Zahlen haben, lassen Sie ihn sowohl gerade als auch ungerade Zahlen verarbeiten, mit einer Option zum Konfigurieren des gewünschten Zahlentyps!
Da es sich hier um ein ziemlich normal aussehendes JavaScript handelt, ist es glücklicherweise nicht allzu schwer, es so zu konfigurieren, dass es funktioniert. Wir umhüllen den ursprünglichen Dekorator mit einer Funktion, die eine Option aufnimmt, und geben dann den Dekorator zurück. Babel REPL
function evensOrOdds(onlyEvens = true) {
return function decorator(value, context) {
let internalNumber = 0
return {
get() {
return internalNumber
},
set(val) {
const num = Number(val)
if(isNaN(num)) {
// don't set the value if it's not a number
return internalNumber
}
if(num % 2 !== (onlyEvens ? 0 : 1)) {
return internalNumber
}
internalNumber = val
return internalNumber
}
}
}
}
class MyClass {
@evensOrOdds(true)
accessor myEvenNumber
@evensOrOdds(false)
accessor myOddNumber
}
Wir haben unseren Dekorator jetzt so konfiguriert, dass er beliebige Optionen akzeptiert, sodass Benutzer unseres Dekorators sein Verhalten anpassen können. Juhuu.
Ein weiteres Tool, das Ihre Dekorateure nutzen können, ist context.metadata. Dieses Objekt wird an jeden Dekorator übergeben und Sie können es für verschiedene Zwecke verwenden. Sie müssen jedoch vorsichtig sein, da das Metadatenobjekt für alle Aufrufe jedes Dekorators dasselbe ist.
Fahren Sie mit dem nächsten Beitrag der Reihe fort, um zu erfahren, wie Sie Dekoratoren für eine einzelne Immobilie zusammenstellen (oder mehrere anwenden)!
Das obige ist der detaillierte Inhalt vonJavaScript-Dekoratoren und Auto-Accessoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
