Niemand fragt, warum Funktionen benötigt werden, da dies eine offensichtliche und nützliche Sache bei der Programmierung ist. Mit Funktionen können Sie Ihren Code wiederverwenden und Ihre Anwendungsarchitektur verbessern.
Warum nicht dieselbe Funktion in Komponentenvorlagen verwenden? Viele Frameworks ermöglichen heutzutage die Verwendung von Komponenten in anderen Komponenten. Dies ist jedoch eher ein Anschluss eines Moduls als nur eine Funktion. Schließlich kann eine Komponente zusätzlich zu einer Vorlage einen eigenen JavaScript-Code und eigene Stile haben und ist sehr isoliert (was gut ist).
In diesem Fall verfügt Malina.js sozusagen über "Funktionen" für die "Fragment" -Vorlagen . Sie ermöglichen die Wiederverwendung verschiedener Fragmente der Vorlage. Sie sind viel leichter als Komponenten, müssen nicht in eine separate Datei verschoben werden (was bei Komponenten häufig erforderlich ist) und verfügen über einige Merkmale, die gewöhnliche Funktionen haben, zum Beispiel Rekursion und Schließungen, weil das Fragment als Ergebnis zu einer gewöhnlichen Funktion kompiliert wird.
1. Wiederverwendung eines Fragments einer Vorlage
Wenn Sie an einer Komponentenvorlage arbeiten, insbesondere wenn es sich um ein Formular, Eingabeelemente, Bedienfelder usw. handelt, können doppelte Blöcke vorhanden sein, die wiederverwendet werden können. Unten sehen Sie einen Teil der Vorlage von js-framework-Benchmark , in der es eine Reihe identischer Schaltflächen gibt:
Mit "fragment" könnte dies folgendermaßen aussehen:
Hier wird ein Fragment
buttonmit zwei Argumenten deklariert id, nameund ein "click" -Ereignis von der Schaltfläche gesendet @click. Diese Reihe von Schaltflächen kann mithilfe einer Direktive erstellt werden for/each, ein Fragment kann jedoch nicht nur in einer Zeile verwendet werden.
2. Verschlüsse
weil Ein Fragment wird zu einer Funktion kompiliert. Dies bedeutet, dass es fast überall deklariert werden kann, sogar innerhalb einer Schleife
for/each, sodass Closures verwendet werden können. Im folgenden Beispiel enthält das Snippet boxein Argument text, eine geschlossene Variable coloraus der Schleife und einen Verweis auf eine Funktion clickaus dem Stammverzeichnis der Komponente, die beim Klicken aufgerufen wird:@click={click(text, color)}
3. Rekursion
"Fragment" kann sich selbst aufrufen, was die Rekursion und das Erstellen von Bäumen ermöglicht. Außerdem kann sich "Fragment" am unteren Rand der Komponente befinden, weil In JavaScript ist eine Funktion im gesamten (aktuellen) Bereich verfügbar, auch wenn sie am Ende deklariert ist.
Unten sehen Sie ein Beispiel für ein Snippet
draw, das sich selbst aufruft und einen Baum erstellt:
Fazit
Ein "Fragment" ist ein leichtes "Stück" einer Vorlage, das innerhalb einer Komponente wiederverwendet werden kann. Es hilft, die Komponente kompakter und strukturierter zu gestalten.
Alle Beispiele können im Online-REPL-Editor ausprobiert werden , Beispiele im Kern .
Vielen Dank für Ihre Aufmerksamkeit.