Was ist eine Javascript-Template-Engine?

Die JavaScript-Vorlagen-Engine ist eine Methode zum Trennen der HTML-Struktur von den darin enthaltenen Inhalten. Sie wird erstellt, um die Benutzeroberfläche von Geschäftsdaten zu trennen. Die Vorlagen-Engine wird zum Rendern dynamischer Seiten verwendet. , etwas, das zur Vereinfachung von String-Verkettungsvorgängen verwendet werden kann.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Was ist eine Javascript-Template-Engine?

Eine Template-Engine (bezieht sich hier speziell auf eine Template-Engine, die für die Webentwicklung verwendet wird) wird erstellt, um die Benutzeroberfläche von Geschäftsdaten (Inhalten) zu trennen Verwendung auf Websites Die Template-Engine generiert ein Standard-HTML-Dokument.

Die Vorlagen-Engine wurde entwickelt, um String-Splicing-Vorgänge beim Rendern dynamischer Seiten zu vereinfachen.

JavaScript-Vorlagen sind eine Möglichkeit, die Struktur von HTML vom darin enthaltenen Inhalt zu trennen. Vorlagensysteme führen häufig eine neue Syntax ein, sind jedoch normalerweise sehr einfach zu verwenden, insbesondere wenn wir zuvor anderswo ein Vorlagensystem verwendet haben (z. B. Twig in PHP). Interessant ist, dass die Token-Ersetzung typischerweise durch doppelte geschweifte Klammern ( {{ ... }} ) dargestellt wird, von denen Moustache und Handlers abgeleitet sind (Tipp: Drehen Sie es zur Seite, um die Ähnlichkeit zu sehen).

Zum Beispiel müssen wir eine Liste auf der Seite rendern:

<li>111</li>
<li>222</li>
<li>333</li>

Die Daten in der Liste sind ein dynamisch erhaltenes Array data=['111','222','333']. Dann schreiben wir es direkt in den Code, wir müssen die Daten in einer Schleife durchlaufen und dann die Daten jedes Li zusammenfügen. Studierende, die es gewohnt sind, Seiten zu schreiben, möchten die Codelogik direkt in ein HTML schreiben. Solange die Datenquelle geändert wird, können unterschiedliche Seitencodes ausgegeben werden. Wir können zum Beispiel so schreiben:

for(var i = 0; i < this.list.length; i++){
  <li>this.list[i]</li>
}

Wenn die Daten von this.list geändert werden, können unterschiedliche Ergebnisse erzielt werden. Bei einem solchen Code ist es jedoch unmöglich zu unterscheiden, wo sich der Logikcode und wo der HTML-Code selbst befindet. Deshalb haben wir einige Tags hinzugefügt. Hier verwenden wir <% %>, um den Logikcode zu verpacken.

<%for(var i = 0; i < this.list.length; i++){%>
  <li><%=this.list[i]%></li>
<%}%>

Wir können diesen Code zum Skript-Tag hinzufügen, den Typ in Text/HTML oder andere Formate ändern und den Textinhalt bei Bedarf über den Dom abrufen. Wenn js diesen Code verstehen kann, kann es den Inhalt der Vorlage aktualisieren, indem es die Datenquelle ändert. Durch regelmäßiges Matching können wir alle logischen Codes erfassen und anschließend analysieren. Hier habe ich einen Trick gemacht und js verwendet, um den Code mit der neuen Funktion auszuführen. Ich habe die anderen Teile als den Logikcode in einen String eingefügt. Nach der Ausführung wurde das endgültige String-Ergebnis ausgegeben: var etj = function (str, data) {.

var reg = /^<%.*?%>/,
    reg2 = /^(.*?)<%/,
    str2 = &#39;var str = "";&#39;,
    str = str.replace(/[\r\t\n]/g, " ");
while (str.length) {
    if (match = reg.exec(str)) {
        if (/^<%=/.exec(str)) {
            str = str.replace(match[0], &#39;&#39;);
            str2 += (&#39;str +&#39; + match[0].replace(/<%|%>/g, &#39;&#39;));
            str2 += &#39;;&#39;;
        } else {
            str = str.replace(match[0], &#39;&#39;);
            str2 += match[0].replace(/<%|%>/g, &#39;&#39;);
            str2 += &#39;;&#39;;
        }
    } else {
        match = reg2.exec(str)[1];
        str = str.replace(match[0], &#39;&#39;);
        str2 += &#39;str +="&#39;;
        str2 += match[0];
        str2 += &#39;";&#39;;
    }
}
str2 += &#39;return str;&#39;
var f = new Function(str2);
return f.call(data);

} Dies ist eine von mir selbst geschriebene Spielzeug-Engine, die immer noch Fehler aufweist. Lassen Sie uns zuerst eine Demo machen (die Logik ist schließlich einfach). Hier verwenden wir einfache reguläre Regeln, um die Vorlage in einen reinen JS-Code umzuwandeln. Nach dem Import der Datenquelle ist das Ausführungsergebnis der gewünschte HTML-Code. Wir müssen nur Folgendes ausführen:

etj(str, {'list': [1, 2, 3]});

Auf diese Weise muss die HTML-Logik nicht in den JS-Code eingebettet werden.

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend】

Das obige ist der detaillierte Inhalt vonWas ist eine Javascript-Template-Engine?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!