Eine exemplarische Vorgehensweise zum Erstellen von JavaScript-Dekoratoren und wie die Verwendung von Auto-Accessoren dazu beiträgt, Ihr Entwicklererlebnis zu verbessern.

Inhaltsverzeichnis

• Kontext und Spezifikation
• Vorwort
• Auto-Accessoren
• Dekorateure erstellen
  • Ein einfacher Dekorateur
  • Validierung mit Dekorateuren
  • Dekorationsoptionen
• Metadaten

Kontext und Spezifikation

Der Decorators Proposal 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.

Vorwort

Jedes Codebeispiel wird mit einem Link zu einem interaktiven Babel REPL-Spielplatz geliefert, 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 Dekorateure befassen. Auf der linken Seite der 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.

Auto-Accessoren

Ein wichtiges Merkmal 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 Vorschlag des Decorators 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)

Dekorateure erstellen

Um besser zu verstehen, warum wir einen Auto-Accessor verwenden, erstellen wir einige Dekoratoren.

Ein einfacher Dekorateur

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 den Einstieg eignet!

Validierung mit Dekorateuren

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. Hübsch.

Dekorationsoptionen

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, welche Art von Zahl wir wollen!

Glücklicherweise ist es nicht allzu schwierig, es so zu konfigurieren, dass es auf diese Weise funktioniert, da es sich um ein ziemlich normal aussehendes JavaScript handelt, das wir hier schreiben. 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. Yay.

Metadaten

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.

Lernen Sie weiter

Fahren Sie mit dem nächsten Beitrag der Reihe fort, um zu erfahren, wie Sie Dekoratoren für eine einzelne Eigenschaft zusammenstellen (oder mehrere anwenden)!