Ein Anfängeranleitung für Lenker

Heutzutage besteht der Großteil des Webs aus dynamischen Anwendungen, in denen sich die Daten häufig ändern. Infolgedessen müssen die Daten, die im Browser wiedergegeben wurden, kontinuierlich aktualisiert. Hier kommen JavaScript -Templating -Motoren zur Rettung und werden so nützlich. Sie vereinfachen den Prozess der manuellen Aktualisierung der Ansicht und verbessern gleichzeitig die Struktur der Anwendung, indem sie Entwicklern ermöglichen, die Geschäftslogik vom Rest des Codes zu trennen. Einige der bekanntesten JavaScript-Templating-Motoren sind Schnurrbart, Unterstrich, EJS und Lenker. In diesem Artikel werden wir unsere Aufmerksamkeit auf Lenker richten, indem wir seine Hauptmerkmale diskutieren.

Key Takeaways

• Lenker ist eine logiklose Templating-Engine, die den Schnurrbart erweitert. Er fügt minimale Logik durch Helfer hinzu, wodurch sie ideal zur Trennung der HTML-Struktur von der Geschäftslogik und zur Verbesserung der Wartbarkeit der Anwendungen.
• Vorlagenerstellung im Lenker beinhaltet die Verwendung von doppelten lockigen Klammern `{{}}` für Variablen, die vorkompiliert werden können, um die Leistung zu verbessern und die clientseitige Verarbeitung zu verringern.
• Lenker unterstützt benutzerdefinierte Helfer, sodass Entwickler komplexe Logik innerhalb der Vorlagen implementieren und Flexibilität über die einfache Datenbindung hinaus bieten.
• Teilvorlagen im Lenker erleichtern die Wiederverwendbarkeit von Code in verschiedenen Teilen einer Anwendung, optimieren den Entwicklungsprozess und die Aufrechterhaltung der Konsistenz.
• Vorkompilierung von Lenkervorlagen kann die Leistung von Webanwendungen erheblich verbessern, indem der Laufzeitaufwand auf der Client -Seite minimiert wird.

Lenker: Was es ist und warum man es verwenden

Lenker ist eine logiklose Templating-Engine, die Ihre HTML-Seite dynamisch erzeugt. Es handelt sich um eine Erweiterung des Schnurrbartes mit einigen zusätzlichen Funktionen. Schnurrbart ist vollständig logisch ohne, aber im Lenker fügt dank der Verwendung einiger Helfer (z. B. mit, sofern nicht jeweils) minimale Logik hinzu, die wir in diesem Artikel weiter diskutieren werden. Tatsächlich können wir sagen, dass Lenker ein Superset von Schnurrbart ist.

Lenker können wie jede andere JavaScript -Datei in den Browser geladen werden:

<span><span><span><script</span> src<span>="/path/to/handlebars.min.js"</span>></span><span><span></script</span>></span></span>

Wenn Sie fragen, warum Sie diesen Vorlagenmotor und nicht einen anderen anwenden sollten, sollten Sie sich seine Profis ansehen. Hier ist eine kurze Liste:

• Sie hält Ihre HTML-Seite sauber und trennt die logischlosen Vorlagen von der Geschäftslogik in Ihren JavaScript-Dateien, wodurch die Struktur der Anwendung (und auch der Wartbarkeit und Skalierbarkeit)
verbessert wird.
vereinfacht die Aufgabe, die Daten in der Ansicht
• manuell zu aktualisieren
Es wird in beliebten Frameworks und Plattformen wie Ember.js, Meteor.js, Derby.js und Ghost

verwendet

Ich hoffe, dass diese kurze Zusammenfassung Ihnen bei der Entscheidung hilft, ob es sich lohnt, Lenker zu verwenden oder nicht.

Wie funktioniert es?

Wie im obigen Diagramm gezeigt, können die Way -Lenkerwerke wie folgt zusammengefasst werden:

1. Lenker nimmt eine Vorlage mit den Variablen und kompiliert sie in eine Funktion
2. Diese Funktion wird dann ausgeführt, indem ein JSON -Objekt als Argument bestanden wird. Dieses JSON -Objekt ist als Kontext bekannt und enthält die Werte der Variablen, die in der Vorlage
verwendet werden
3. Bei ihrer Ausführung gibt die Funktion das erforderliche HTML zurück, nachdem die Variablen der Vorlage durch ihre entsprechenden Werte
ersetzt werden können

Beginnen wir mit einer Demo, die alle oben genannten Schritte im Detail erläutert.

Vorlagen

Vorlagen können beide in der HTML -Datei oder separat geschrieben werden. Im ersten Fall werden sie im Attribut "type =" text/x-Handlebs-Template "und einer ID im <script> -Tag mit" text/x-Handleber-Template "angezeigt. Die Variablen sind in doppelten lockigen Klammern {{}} geschrieben und werden als Ausdrücke bezeichnet. Hier ist ein Beispiel: <p> <p> <pre ><span ><span ><span ><script src<span >="/path/to/handlebars.min.js"><span ><span ></script> Mit diesem Vorschlag können wir sehen, was wir verwenden müssen. In Ihrer JavaScript -Datei müssen wir zunächst die Vorlage aus dem HTML -Dokument abrufen. Im folgenden Beispiel verwenden wir die ID der Vorlage für diesen Zweck. Nachdem die Vorlage abgerufen wurde, können wir sie mit der Methode von landbars.comPile () kompilieren, die eine Funktion zurückgibt. Diese Funktion wird dann ausgeführt, indem der Kontext als Argument übergeben wird. Wenn die Ausführung abgeschlossen ist, gibt die Funktion das gewünschte HTML mit allen durch ihre entsprechenden Werte ersetzten Variablen zurück. Zu diesem Zeitpunkt können wir die HTML in unsere Webseite injizieren.

diese Beschreibung in Code verwandeln, führt zum folgenden Snippet:

 Eine Live -Demo dieses Code finden Sie in dieser Codepen -Demo 
 
 syntaxes 
 Jetzt ist es Zeit, ein bisschen tiefer in Lenker einzutauchen. Wir werden einige wichtige Begriffe und Syntaxe durchlaufen, die den Kern von Lenker bilden. 
 Ausdrücke 
 Wir haben bereits Ausdrücke im obigen Abschnitt gesehen. Die in den Vorlagen verwendeten Variablen sind von doppelten lockigen Zahnspangen umgeben {{}} und werden als Ausdrücke bezeichnet: 
  
// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
// Insert the HTML code into the page$(document.body).append(html);
 html entkommen 
 Lenker können dem vom Ausdruck zurückgegebenen Wert entkommen. Zum Beispiel wird das Zeichen   
My name is {{name}}
 wird mit der unten angegebenen Kontextvariablen verwendet: 
  
I am learning {{language}}. It is {{{adjective}}}.
 Das resultierende HTML ist: 
  
var context = {"language" : "
Handlebars
","adjective": "
awesome
"}
 Eine Live -Demo, die diese Funktion zeigt, findet sich in dieser Codepen -Demo 
 Kommentare 
 Wir können auch Kommentare in Lenkervorlagen schreiben. Die Syntax für Lenkerkommentare lautet {{! TypeyOrCommenthere}}. Jeder Kommentar, der}} oder ein anderes Symbol mit einer besonderen Bedeutung im Lenker hat, sollte jedoch in der Form {{!-TypeyOrCommenthere-}} geschrieben werden. Lenker Kommentare sind in der HTML nicht sichtbar, aber wenn Sie sie anzeigen möchten, können Sie den Standard-HTML-Kommentar verwenden: . 
 Wenn wir alle diese Konzepte auf die von uns verwendete Vorlage anwenden, können wir den unten gezeigten Code erstellen: 
  

 Wenn wir die vorherige Vorlage mit der unten angegebenen Kontextvariablen verwenden: 
  

 Die HTML -Ausgabe ist: 
  
// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
// Insert the HTML code into the page$(document.body).append(html);
, was dazu führt, dass der Browser den Inhalt im Standard -HTML -Kommentar nicht zeigt. Eine Demo dieses Beispiels finden Sie hier. 
 blockiert 
 In Lenker sind Blöcke Ausdrücke mit einer Blocköffnung ({{#}}) und schließen ({{/}}). Wir werden dieses Thema später eingehend untersuchen, während wir uns auf Helfer konzentrieren. Schauen Sie sich vorerst an, wie ein If -Block geschrieben wird: 
  
My name is {{name}}
 Pfade 

 Lenker unterstützt sowohl den normalen als auch den verschachtelten Pfad und ermöglicht es, die unter dem aktuellen Kontext verschachtelten Eigenschaften nachzuschlagen. Lenker unterstützt auch das Segment ../ Pfad. Dieses Segment verweist auf den Umfang der übergeordneten Vorlagen und nicht auf eine Ebene im Kontext. 
 Um dieses Thema besser zu verstehen, werden wir das folgende Beispiel verwenden, in dem wir jeden Helfer verwenden (später detailliert detailliert). Wie zu erwarten, iteriert der letztere über die Gegenstände eines Arrays. 
 In diesem Beispiel werden wir die folgende Vorlage verwenden: 
  
I am learning {{language}}. It is {{{adjective}}}.
 durch Bereitstellung dieser Kontextvariablen: 
  
var context = {"language" : "
Handlebars
","adjective": "
awesome
"}
 wir erhalten die unten angegebene Ausgabe: 
  
I am learning 
Handlebars
. It is 
awesome
 Wie die anderen kleinen Ausschnitte, die wir bisher erstellt haben, ist dieses Beispiel auf CodePen  verfügbar
 Helfer 
 Obwohl Lenker um eine logiklose Vorlagen-Engine handelt, kann sie einfache Logik mithilfe von Helfern ausführen. Ein Lenkerhelfer ist eine einfache Kennung, die von Parametern (durch einen Raum getrennt) folgen kann, wie unten gezeigt: 
  
I am learning {{language}}. It is {{!--adjective--}}
 Jeder Parameter ist ein Lenkerausdruck. Auf diese Helfer kann aus jedem Kontext in einer Vorlage zugegriffen werden. 
 Die Begriffe „Block“, „Helfer“ und „Blockhelfer“ werden manchmal austauschbar verwendet, da die meisten der integrierten Helfer Blöcke sind, obwohl es Funktionshelfer gibt, die sich von Blockhelfern etwas unterscheiden. Wir werden sie diskutieren, während wir benutzerdefinierte Helfer abdecken. 
 Einige eingebaute Helfer sind, wenn jeweils, es sei denn und mit. Lassen Sie uns mehr erfahren. 
 Jedes Helfer 
 Der jede Helfer wird verwendet, um über ein Array zu iterieren. Die Syntax des Helfer ist {{#each arrayName}} yourcontent {{/jeder}}. Wir können uns auf die einzelnen Array -Elemente beziehen, indem wir das Schlüsselwort in diesem Block verwenden. Der Index des Arrays -Elements kann mit {{@index}} gerendert werden. Das folgende Beispiel zeigt die Verwendung der einzelnen Helfer. 
 Wenn wir die folgende Vorlage verwenden: 
  

 in Verbindung mit dieser Kontextvariable: 
  

 Dann ist die Ausgabe: 
  
// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
// Insert the HTML code into the page$(document.body).append(html);
 Eine lebende Demo dieses Beispiels kann auf Codepen gefunden werden. 
 Wenn Helfer 
 Die IF -Helfer ähnelt einer IF -Anweisung. Wenn die Bedingung zu einem  wahrheitsgemäßen  -Wertzwert bewertet wird, rendert der Lenker den Block. Wir können auch einen Vorlagenabschnitt angeben, der als "else -Abschnitt" bekannt ist, indem wir {{else}} verwenden. Der Helfer, es sei denn, Helfer ist die Umkehrung des IF -Helfers. Es rendert den Block, wenn die Bedingung einen  falsy  Wert bewertet. 
 Um zu zeigen, wie der Helfer funktioniert, betrachten wir die folgende Vorlage: 
  
My name is {{name}}
 Wenn wir die folgende Kontextvariable angeben: 
  
I am learning {{language}}. It is {{{adjective}}}.
 wir erhalten das unten angegebene Ergebnis: 
  
var context = {"language" : "
Handlebars
","adjective": "
awesome
"}
 Dies geschieht, weil ein leeres Array ein  falsy  Wert ist. 
 Für den Fall, dass Sie mit Helfern spielen möchten, können Sie sich die Live -Demo ansehen, die ich auf Codepen erstellt habe. 
 benutzerdefinierte Helfer 
 Sie können Ihre eigenen Helfer erstellen, um komplexe Logik mithilfe des Lenker -Systems auszuführen. Es gibt zwei Arten von Helfern: Funktionshelfer und Blockhelfer. Die erste Definition ist für einen einzelnen Ausdruck gedacht, während letzteres für Blockausdrücke verwendet wird. Die Argumente, die der Rückruffunktion vorgelegt sind, sind die Parameter, die nach dem Namen des Helfers geschrieben wurden, die durch einen Raum getrennt sind. Die Helfer werden mit Lenker erstellt. RegisterHelper () Methode: 
  
I am learning 
Handlebars
. It is 
awesome
 benutzerdefinierte Funktion Helfer 
 Die Syntax für einen Funktionshelfer ist {{Helpername Parameter1 Parameter2 ...}}. Um besser zu verstehen, wie Sie mit der Implementierung fortfahren können, erstellen wir einen Funktionshelfer namens StudyStatus, der eine Zeichenfolge zurückgibt, die "bestanden" wird, wenn pidentyear <2015 "nicht bestanden" wird, wenn Passingyear> = 2015: 
  
I am learning {{language}}. It is {{!--adjective--}}
 In unserem Beispiel ist der Parameter nur eins. Wenn wir jedoch weitere Parameter an die Rückruffunktion des Helfer übergeben möchten, können wir sie nach dem ersten Parameter, der durch einen Speicherplatz getrennt ist, in die Vorlage schreiben. 
 entwickeln wir ein Beispiel mit dieser Vorlage: 
  
var context = {"language" : "Handlebars","adjective": "awesome"}
 und mit der folgenden Kontextvariablen: 
 
I am learning Handlebars. It is
 In diesem Fall ist die Ausgabe: 
  
{{#if boolean}}Some Content here{{/if}}
 Eine lebende Demo dieses Beispiels ist hier verfügbar. 
 benutzerdefinierte Blockhelfer 
 benutzerdefinierte Blockhelfer werden genauso verwendet wie Funktionshelper, aber die Syntax ist etwas anders. Die Syntax von Blockhelfern lautet: 
 

 Wenn wir einen benutzerdefinierten Blockhelfer registrieren, fügt Lenker automatisch ein Optionsobjekt als letzter Parameter zur Rückruffunktion hinzu. Dieses Optionsobjekt hat eine FN () -Methode, mit der wir den Kontext des Objekts vorübergehend ändern können, um auf eine bestimmte Eigenschaft zuzugreifen. Ändern wir das Beispiel des vorherigen Abschnitts mit einem Blockhelfer namens StudyStatus, jedoch mit derselben Kontextvariablen: 
  

 Wenn dieser Code in Verbindung mit der unten definierten Vorlage verwendet wird 
  
// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
// Insert the HTML code into the page$(document.body).append(html);
 wir erhalten das folgende Ergebnis: 
  
My name is {{name}}
 Und hier ist die Codepen -Demo. 
 Teilvorlagen 
 Lenker -Teil sind Vorlagen, die zwischen verschiedenen Vorlagen geteilt werden können. Sie werden als {{> partiellName}} geschrieben. Bevor wir sie in der HTML verwenden, müssen wir das Teil mithilfe von Lenkermethoden registrieren. Das folgende Beispiel hilft Ihnen dabei, zu verstehen
 
 
I am learning {{language}}. It is {{{adjective}}}. Bei Verwendung mit der unten definierten Vorlage 

 
 
var context = {"language" : "
Handlebars
","adjective": "
awesome
"} Es wird das folgende Ergebnis geben: 

 
 
I am learning 
Handlebars
. It is 
awesome
 Eine Live -Demo dieses Code finden Sie in dieser Codepen -Demo. 

 Vorkompilierung 

 Wie wir gesehen haben, ist das erste, was Lenker tut, die Vorlage in eine Funktion zusammenzufassen. Dies ist einer der teuersten Vorgänge, die für den Kunden durchgeführt werden können. Wir können die Leistung der Anwendung verbessern, wenn wir Vorlagenkripten vorkompilieren und dann die kompilierte Version an den Client senden. In diesem Fall ist die einzige Aufgabe, die am Client ausgeführt werden muss, die Ausführung dieser Funktion. Da die vorkompilierte Datei ein Skript ist, können wir das Skript in HTML als normale Datei laden. Mal sehen, wie all dieses Zeug gemacht werden kann. 

 Erstens müssen Sie Lenker weltweit installieren, indem Sie NPM -Lenker installieren -g verwenden. Bitte stellen Sie sicher, dass verschiedene Vorlagen in separaten Dateien mit unterschiedlichen Dateinamen und mit den .handleBars -Erweiterungen (z. B. Demo.handleBars) geschrieben werden. In diesen Dateien besteht keine Verwendung des <script> -Tages. <p>. 
<p>  <pre ><span ><!-- I am learning {{language}} -->I am learning {{language}}. It is {{!--adjective--}}
<p> Speichern Sie nun alle Vorlagendateien in einem einzelnen Ordner mit dem Namen Vorlagen. Sie können jeden Ordnernamen verwenden, den Sie wünschen, aber wenn Sie dies tun, vergessen Sie bitte nicht, den folgenden Befehl entsprechend zu ändern. Öffnen Sie also das Terminal und führen Sie den Befehl aus: 
<p>  <pre ><span >var context = {"language" : "Handlebars","adjective": "awesome"}
<p> Dieser Befehl generiert eine Datei mit dem Namen templatescompiled.js, die alle kompilierten Vorlagen enthält. Der Compiler fügt die Vorlagen in Lenker ein. Wenn die Eingabedatei Demo.Handlebars ist, wird sie am adbars.templates.demo  eingefügt.
<p> Jetzt müssen wir TemplatesCompiled.js in die HTML -Datei als normales Skript aufnehmen. Es ist wichtig zu beachten, dass wir die gesamte Lenkerbibliothek nicht laden müssen, da der Compiler selbst nicht mehr benötigt wird. Wir können stattdessen den kleineren „Laufzeit“ -Build verwenden: 
<p> <pre ><span ><span ><span ><script src<span >="/path/to/handlebars.min.js"><span ><span ></script>
 Jetzt können wir die vorhandene Vorlage verwenden, die ursprünglich in Demo.handlebars mit dem folgenden Code vorhanden war: 
  

 Die endgültige Ausgabe lautet wie folgt: 
  
// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
// Insert the HTML code into the page$(document.body).append(html);
 Diese Methode erhöht die Leistung der Anwendung erheblich und die Ladezeit der Seite nimmt auch ab, wenn wir den Laufzeitaufbau von Lenker verwenden, der leichter ist als die gesamte Bibliothek. 
 Der Code dieser gesamten Vorkompilierung ist auf Github verfügbar. 
 Schlussfolgerungen 
 In diesem Artikel haben wir die grundlegenden Konzepte von Lenker erläutert. Wir haben auch seine häufig verwendeten Funktionen und Syntaxe untersucht. Ich hoffe, Sie haben dieses Tutorial genossen und Sie werden die enthaltenen Demos verwenden, um ein gutes Verständnis für dieses Thema zu haben. Ich freue mich darauf, Ihre Kommentare zu lesen. 
 Wenn Sie die Bibliothek nicht herunterladen möchten, aber dennoch versuchen möchten, können Sie sie online unter http://tryhandleBarsjs.com/.  spielen. 


 FAQs über Lenker 



 Wofür werden Lenker verwendet. Es ermöglicht die Erstellung wiederverwendbarer Vorlagen mit Platzhaltern (Lenker) für die Dateninsertion. Diese Bibliothek erleichtert die Bindung des Zwei-Wege-Datenbindung und ermöglicht Vorlagen, automatisch zu aktualisieren, wenn Daten ändert. Entwickler verwenden üblicherweise Lenker für die clientseitige Rendering, die bedingte Logik und die Dateneration. Es fördert die Trennung von Bedenken zwischen HTML-Struktur und Daten und macht es zu einem wertvollen Instrument zum Erstellen interaktiver und datengesteuerter Webanwendungen gleich > Lenker werden typischerweise in Verbindung mit HTML und nicht als Ersatz verwendet. Es bietet mehrere Vorteile in Kombination mit HTML, einschließlich dynamischer Datenbindung, Wiederverwendbarkeit des Codes, einer eindeutigen Trennung von Bedenken zwischen Präsentation und Daten, clientseitigem Rendering, Konsistenz der Inhaltsgenerierung, verbesserter Sicherheit durch Codetrennung und Unterstützung für die Lokalisierung. Diese Vorteile machen den Lenker gemeinsam zu einem wertvollen Tool zum Erstellen dynamischer und wartbarer Webanwendungen und stützen sich weiterhin auf HTML, um die Grundstruktur von Webseiten zu definieren. , Lenker sind nicht veraltet und bleibt eine lebensfähige und weit verbreitete JavaScript -Templating -Bibliothek in der Webentwicklung. 
 Was ist eine Lenkervorlage? Lenker ist eine JavaScript -Vorlagenbibliothek, mit der Sie diese Vorlagen erstellen können, um HTML -Inhalte basierend auf Daten zu generieren. Diese Lenker sind in doppelten lockigen Klammern {{}} eingeschlossen. Zum Beispiel:  
 
 Hallo, {{Name}}! . ““ Wenn Sie diese Vorlage mit bestimmten Daten wie {Name: "John"} rendern, ersetzt Lenker {{Name}} durch den entsprechenden Datenwert: 
 
 
 Hallo, John!  
 
 Lenkervorlagen sind besonders nützlich, um einen konsistenten und wartbaren HTML -Inhalt zu erstellen, da sie die Präsentation (HTML -Struktur) von den Daten trennen und die Aktualisierung und Wiederverwendung erleichtern. Vorlagen in Ihrer Webanwendung. Lenker bietet fortschrittlichere Funktionen und eignet sich für komplexe Vorlagenanforderungen und -projekte, bei denen ein größeres Ökosystem und ein größeres Unterstützung für die Gemeinschaft wichtig sind. Der Schnurrbart hingegen ist einfacher und folgt einer „logikfreien“ Philosophie, was es zu einer guten Wahl für Projekte macht, die Einfachheit und Portabilität in mehreren Programmiersprachen priorisieren. 
Das obige ist der detaillierte Inhalt vonEin Anfängeranleitung für Lenker. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!