Eigene Direktiven

Eigene Direktiven

0:00 Ein kurzes Modul über ein schmales Werkzeug. Sie kennen die eingebauten Direktiven längst — für Bedingungen, Schleifen, Bindungen. Heute geht es darum, eigene zu schreiben. Ich sage Ihnen gleich vorweg: Sie werden das selten brauchen, und das ist auch gut so. Aber es gibt eine klar umrissene Sorte von Aufgaben, für die eine Direktive das passende Mittel ist — und wenn Sie diese Sorte erkennen, treffen Sie eine bessere Entscheidung als jemand, der das Werkzeug gar nicht kennt.

Einsatzmöglichkeiten von Direktiven

0:28 Fangen wir mit der Abgrenzung an, denn die ist hier wichtiger als die Technik. Sie haben in diesem Seminar drei Werkzeuge für Wiederverwendung kennengelernt: Komponenten, Composables und CSS. Eine Direktive ist das vierte, und es hat einen sehr engen Zuschnitt. Ich zeige Ihnen eine Prüfreihenfolge, mit der Sie in zehn Sekunden entscheiden können, welches der vier passt.

0:49 Diese Reihenfolge ist der eigentliche Wert dieses Kapitels — sie verhindert die meisten überflüssigen Direktiven, bevor sie entstehen. Der Zuschnitt lässt sich in einem Satz sagen: Eine Direktive ist für Logik, die direkten Zugriff auf ein DOM-Element braucht. Sie erzeugt kein Markup — das wäre eine Komponente. Sie liefert keine Daten — das wäre ein Composable. Sie arbeitet an einem Element, das bereits da ist.

1:15 Denken Sie an einen Aufkleber, den Sie auf ein fertiges Gerät kleben: Er verändert nicht, was das Gerät ist, sondern gibt ihm eine zusätzliche Eigenschaft. Vier Zeilen, und die Fußzeile ist der eigentliche Inhalt: Das ist auch die Prüfreihenfolge. Fragen Sie sich der Reihe nach: Erzeuge ich Markup? Dann eine Komponente.

1:37 Teile ich Zustandslogik? Dann ein Composable. Geht es nur ums Aussehen? Dann eine CSS-Klasse. Und erst wenn nichts davon passt, weil Sie wirklich am Element selbst arbeiten müssen, kommt die Direktive. Diese Reihenfolge ist kein Dogma, aber sie führt zuverlässig zur einfachsten Lösung. Der zweite Punkt ist der, der mich am meisten überzeugt: Die Wirkung ist im Template nicht erkennbar.

2:02 Sie sehen einen Namen am Element, und was dahinter passiert, steht in einer anderen Datei. Bei einer Komponente ist das ähnlich — aber dort erwarten Sie es, weil die Komponente sichtbar etwas erzeugt. Eine Direktive verändert unsichtbar Verhalten. Der letzte Punkt ist die praktische Konsequenz: Für fast jedes Anliegen gibt es ein leichter verständliches Mittel.

2:24 Vier Beispiele für den engen Bereich, in dem eine Direktive wirklich passt. Was sie gemeinsam haben, steht in der Fußzeile: Sie brauchen das Element selbst. Ein Element zu fokussieren, einen Klick außerhalb zu erkennen, das Erscheinen im Blickfeld zu melden — das alles geht nur, wenn Sie das echte DOM-Element in der Hand haben.

2:42 Der letzte Punkt ist übrigens ein schönes Beispiel dafür, wie elegant eine Direktive sein kann: Ein Wort am Element, und das Nachladen beim Scrollen funktioniert. Die ersten beiden Punkte sind die Umkehrung der Abgrenzung und ein guter Selbsttest: Wenn Ihre Direktive Daten liefert, ist es in Wahrheit ein Composable. Wenn sie Markup erzeugt, eine Komponente.

3:04 Der dritte Punkt ist eine Einschränkung, die man kennen muss: Direktiven auf Komponenten wirken nur auf deren Wurzelelement — und bei mehreren Wurzelelementen gar nicht. Dann bekommen Sie eine Warnung, und die Direktive tut nichts. Das ist eine der Stellen, an denen die Mehrfachwurzel aus Modul 2 sich rächt.

Erstellung eigener Direktiven

3:22 Jetzt zum Handwerk, und das ist erfreulich wenig. Eine Direktive ist ein Objekt mit ein paar Funktionen, und die Registrierung in der Schreibweise, die wir verwenden, besteht aus einer Namenskonvention. Ich zeige Ihnen die Langform, die Kurzform und den Ablauf — inklusive des Schritts, den man auf keinen Fall weglassen sollte.

3:40 Das ist derselbe Schritt, den man am häufigsten vergisst, und er wird uns im übernächsten Kapitel noch ausführlich beschäftigen. Zwei Dinge stecken hier drin. Erstens der Aufbau: ein Objekt mit Hook-Funktionen, die jeweils das Element und ein Bindungsobjekt bekommen. Zweitens die Registrierung, und die ist charmant gelöst: Sie deklarieren eine Variable, deren Name mit einem kleinen v beginnt und danach groß weitergeht.

4:06 Der Compiler erkennt das Muster und macht daraus die Direktive im Template. Kein Import, keine Anmeldung — dieselbe Bequemlichkeit wie bei importierten Komponenten. Sieben Zeilen für eine vollständige, nützliche Direktive. Sie setzt beim Einhängen den Fokus in das Element — etwas, das man in fast jeder Anwendung irgendwo braucht, etwa im Suchfeld eines Dialogs.

4:28 Beachten Sie die Fußzeile: Die Variable in der einen Schreibweise wird im Template zur anderen. Das ist dieselbe Umrechnung, die Vue auch bei Eingaben und Ereignissen macht, und Sie müssen nichts dafür tun. Nur den Anfangsbuchstaben müssen Sie richtig setzen. Wenn Ihre Direktive beim Einhängen und beim Aktualisieren dasselbe tun soll, dürfen Sie statt des Objekts einfach eine Funktion schreiben.

4:52 Vue verwendet sie dann für beide Zeitpunkte. Das ist der häufigste Fall bei einfachen Direktiven, die einen Wert auf ein Element abbilden — etwa eine Farbe oder eine Sichtbarkeit. Wenn Sie dagegen etwas anmelden, das später wieder abgemeldet werden muss, brauchen Sie die Objektform mit ihren getrennten Zeitpunkten. Fünf Schritte, und Schritt eins ist der wichtigste — deshalb steht er auch in der Fußzeile: Prüfen, ob eine Komponente oder ein Composable passt.

5:18 Die meisten Direktiven, die man schreiben möchte, sollten keine sein. Schritt fünf ist der, den man am ehesten vergisst und der die meisten Probleme verursacht: das Aufräumen. Dazu kommen wir in Kapitel vier ausführlich, aber merken Sie es sich schon jetzt als festen Bestandteil des Ablaufs, nicht als Kür. Der erste Punkt ist der häufigste Anfängerfehler: Ohne den richtigen Namensanfang erkennt der Compiler die Variable nicht als Direktive.

5:44 Sie bekommen dann eine Warnung über eine unbekannte Direktive — immerhin eine deutliche Meldung. Der dritte Punkt ist für alle, die in älterem Code unterwegs sind: In der Options-Schreibweise gibt es einen eigenen Block dafür, und dort steht der Name ohne das Präfix. Zwei Konventionen für dieselbe Sache, das ist unschön, aber historisch gewachsen.

Übergabe von Parametern an Direktiven

6:04 Eine Direktive wäre wenig wert, wenn sie immer dasselbe täte. Deshalb kann sie Angaben entgegennehmen, und zwar in drei Formen: einen Wert, ein Argument und Modifikatoren. Das ist genau die Struktur, die Sie von den eingebauten Direktiven kennen — denken Sie an die Ereignisbehandlung aus Modul 3 mit ihrem Ereignisnamen und ihren Zusätzen.

6:25 Diese Ähnlichkeit ist Absicht: Eine gut gebaute eigene Direktive soll sich im Template anfühlen wie eine eingebaute. Drei Arten von Angaben, und alle drei landen im selben Objekt, das jeder Hook als zweites Argument bekommt. Der Wert steht nach dem Gleichheitszeichen, das Argument nach einem Doppelpunkt, die Modifikatoren nach Punkten.

6:45 Diese Struktur ist bewusst dieselbe wie bei den eingebauten Direktiven — dadurch fühlt sich eine gute eigene Direktive im Template an wie eine eingebaute. Das ist ein unterschätztes Qualitätsmerkmal. Oben die Verwendung, unten was davon im Hook ankommt. Achten Sie auf die Anführungszeichen um den Farbwert — das ist die Falle, die in der Fußzeile steht.

7:06 Der Wert wird als Ausdruck ausgewertet, genau wie bei jeder Bindung aus Modul 3. Ohne Anführungszeichen würde Vue also nach einer Variable mit diesem Namen suchen und nichts finden. Das ist konsequent und trotzdem einer der häufigsten Tippfehler bei eigenen Direktiven. Sechs Felder, und Sie werden im Alltag die ersten vier brauchen. Interessant ist das zweite: der vorherige Wert.

7:29 Damit können Sie beim Aktualisieren prüfen, ob sich überhaupt etwas geändert hat, und unnötige Arbeit sparen. Das fünfte Feld ist selten nötig und gelegentlich sehr nützlich — es gibt Ihnen die Komponente, in der die Direktive steht. Die Fußzeile nennt einen praktischen Ausweg, wenn Sie mehrere Angaben brauchen: ein Objektliteral als Wert.

7:50 Der zweite Punkt ist eine Einschränkung, die man kennen muss: Der vorherige Wert steht nur in den Aktualisierungs-Hooks zur Verfügung. Beim Einhängen gibt es schlicht keinen. Der letzte Punkt ist eine Gestaltungsfrage, die ich Ihnen ans Herz lege: Zu viele Modifikatoren machen die Direktive schwerer lesbar als eine Eingabe an einer Komponente.

8:09 Wenn Sie merken, dass Sie vier Zusätze brauchen, um zu beschreiben, was passieren soll — dann war es vielleicht doch eine Komponente.

Lifecycle Hooks für Direktiven

8:17 Jetzt der Teil, der über Funktionieren und Nicht-Funktionieren entscheidet: die Zeitpunkte. Eine Direktive kennt sieben davon, und die gute Nachricht ist, dass Sie im Alltag zwei brauchen. Die schlechte ist, dass der zweite häufig vergessen wird — und der Fehler, der daraus entsteht, meldet sich erst nach längerer Nutzung.

8:36 Genau diesen Fall sehen wir uns an, samt einer Aufgabe, in der Sie das Leck einmal mit eigenen Augen sehen. Sieben Zeitpunkte entlang des Lebens des Elements, und die Praxis reduziert das auf zwei: einrichten beim Einhängen, aufräumen vor dem Abbau. Dazu kommt der Aktualisierungszeitpunkt, wenn der übergebene Wert sich ändern kann.

8:56 Die Parallele zu Modul 5 ist offensichtlich, und sie ist beabsichtigt — Vue verwendet dieselben Begriffe für dieselben Momente. Was Sie über den Komponentenlebenszyklus wissen, gilt hier sinngemäß weiter — Sie lernen also nichts Neues, sondern wenden Bekanntes auf eine andere Ebene an. Sieben Zeilen, und die Fußzeile entlastet: Alle sind optional. Sie schreiben nur die, die Sie brauchen.

9:19 Interessant ist die erste Zeile — der Zeitpunkt vor dem Setzen der Attribute. Den braucht man selten, aber wenn, dann richtig: Es ist der einzige Moment, in dem Sie ein Attribut setzen können, bevor der Browser das Element sieht. Für den Alltag sind die dritte und die vorletzte Zeile Ihre beiden Arbeitspferde. Das ist das vollständige Muster, und es zeigt eine Besonderheit: Die Direktive legt ihren Handler am Element ab.

9:45 Das sieht ungewöhnlich aus und ist der übliche Weg — eine Direktive hat nämlich keinen eigenen Zustand. Sie ist ein Objekt, das für alle Elemente gilt, an denen sie hängt. Wenn Sie sich etwas je Element merken müssen, ist das Element selbst der Ort dafür. Beim Abbau holen Sie es von dort wieder und melden den Handler ab.

10:04 Der erste Punkt ist der Kern: Der Listener hängt am Dokument, nicht am Element. Beim Abbau des Elements verschwindet er also nicht von selbst — der Browser räumt nur auf, was am Element selbst hing. Der dritte Punkt beschreibt die Folge: Bei jeder Neuerzeugung kommt einer dazu. Und der letzte nennt das Symptom, das man kennen sollte: Der Fehler zeigt sich nicht sofort, sondern nach längerer Nutzung als Trägheit.

10:29 Das ist eine der unangenehmsten Fehlerarten überhaupt. Diese Aufgabe hat einen Nachweis, den ich sehr mag, weil er objektiv ist: Zählen Sie die registrierten Listener in den Entwicklerwerkzeugen. Schalten Sie das Element mehrfach ein und aus. Wenn die Zahl steigt, fehlt das Aufräumen. Wenn sie gleich bleibt, ist alles richtig.

10:48 Das ist eine der wenigen Stellen in der Frontend-Entwicklung, an denen man ein Leck wirklich sehen kann — und die Erfahrung, das einmal beobachtet zu haben, schärft den Blick dauerhaft. Der zweite Punkt ist eine Feinheit der Zeitpunkte: Für Listener am Element ist der Zeitpunkt vor dem Abbau der richtige, nicht der danach.

11:07 Danach ist das Element unter Umständen schon aus dem Dokument entfernt. Der dritte Punkt ist ein klassischer JavaScript-Fehler, der hier besonders oft passiert: Ein anonym übergebener Handler lässt sich nicht wieder entfernen, weil Sie beim Abmelden dieselbe Funktionsreferenz brauchen. Genau deshalb legt man ihn am Element ab.

Globale Registrierung von Direktiven

11:25 Zum Abschluss ein kurzes Kapitel, das Ihnen bekannt vorkommen wird: die globale Anmeldung. Es gelten dieselben Abwägungen wie bei den Komponenten aus Modul 2 — Bequemlichkeit gegen Nachvollziehbarkeit. Und am Ende möchte ich noch einmal auf die Frage zurückkommen, wie oft man eigene Direktiven überhaupt schreiben sollte.

11:44 Denn das ist die eigentliche Botschaft dieses Moduls, und sie lautet: seltener, als man beim Lesen dieses Kapitels denkt. Die Anmeldung an der Anwendungsinstanz, und danach steht die Direktive überall zur Verfügung. Der letzte Satz nennt die Einordnung: Es gelten dieselben Abwägungen wie bei global registrierten Komponenten.

12:03 Also kein Tree Shaking, keine sichtbare Herkunft, kein Sprungziel im Editor. Für die zwei bis drei Direktiven, die wirklich in jeder zweiten Datei vorkommen, ist es trotzdem der richtige Weg — für alles andere die lokale Variante. Fünf Zeilen, und die Fußzeile enthält die Falle: Beim Anmelden entfällt das Präfix. Sie schreiben den nackten Namen, und im Template heißt die Direktive trotzdem mit Präfix.

12:27 Wer aus Gewohnheit den Variablennamen einträgt, bekommt eine Direktive mit doppeltem Präfix im Template — und die funktioniert natürlich nicht. Ansonsten gilt hier dieselbe Regel wie überall: vor dem Einhängen der Anwendung, sonst greift die Anmeldung nicht. Vier Zeilen, und sie sind fast identisch mit der Tabelle aus Modul 2 — das ist kein Zufall, es ist dieselbe Abwägung.

12:50 Die Fußzeile nennt die Faustregel: Global lohnt für die zwei bis drei, die wirklich überall vorkommen. In der Praxis ist das meistens die Fokus-Direktive und vielleicht eine für Berechtigungen. Alles Weitere bleibt lokal, und dann steht im Import, woher es kommt. Der dritte Punkt ist einer, den man erst bemerkt, wenn es zu spät ist: Beim Serverrendern laufen die DOM-Hooks gar nicht.

13:13 Eine Direktive, die dort etwas Wesentliches tut, funktioniert in einer serverseitig gerenderten Anwendung nicht — und das merken Sie erst beim Umstieg. Der zweite Punkt ist im Alltag häufiger: Zwei Direktiven am selben Element können sich gegenseitig stören, etwa wenn beide dieselbe Eigenschaft setzen. Die Reihenfolge ist dabei nicht garantiert.

13:33 Der zweite Punkt ist die Falle von Folie 28 noch einmal, und ich wiederhole sie, weil sie wirklich jeden einmal erwischt. Der dritte Punkt ist derselbe Nachteil, den wir bei global registrierten Komponenten hatten: Ihr Editor kann kein Sprungziel anbieten. Und der letzte Punkt ist eine Vorsichtsmaßnahme, die sich immer lohnt: Wenn Ihre Direktive auf das Dokument oder das Fenster zugreift, sichern Sie das ab — sonst bricht sie in jeder Umgebung ohne Browser.

Direktiven mit Augenmaß

14:00 Fassen wir zusammen. Direktiven sind für Verhalten, das ein Element braucht — und für sonst nichts. Der Alltag kommt mit zwei Zeitpunkten aus: einrichten und aufräumen. Wert, Argument und Modifikatoren stehen im Bindungsobjekt. Und die wichtigste Botschaft dieses Moduls ist eine Zurückhaltung: In den meisten Fällen ist eine Komponente oder ein Composable die bessere Antwort.

14:23 Im letzten Modul bringen wir die Anwendung dorthin, wo sie hingehört — auf einen Server.