Mit der Entwicklung des Webs sind Front-End-Anwendungen immer komplexer geworden, und auch Back-End-basierte JavaScript (Node.js) entstanden. Zu diesem Zeitpunkt wurde JavaScript mit größeren Erwartungen gestellt. Gleichzeitig sind auch JavaScript -MVC -Ideen populär geworden. Als wichtigster Teil der Daten- und Schnittstellentrennung hat die JavaScript -Vorlage -Engine von Entwicklern immer mehr Aufmerksamkeit auf sich gezogen. Im vergangenen Jahr hat es in der Open -Source -Community aufgebraucht. Sie sind auf großen Websites wie Twitter, Taobao, Sina Weibo, Tencent QQ Space und Tencent Weibo zu sehen.
In diesem Artikel wird der einfachste Beispielcode verwendet, um die Prinzipien der vorhandenen JavaScript -Vorlage -Engine zu beschreiben, einschließlich der Implementierungsprinzipien der Merkmale der neuen Generation von JavaScript -Template Engine -Arttemplate. Willkommen, sie gemeinsam zu besprechen.
ArtTemplate -Einführung
ArtTemplate ist eine neue Generation von JavaScript -Template -Engine. Es verwendet Vorkompilierung, um einen qualitativen Leistungssprung zu machen, und nutzt die Funktionen der JavaScript-Engine voll und ganz, wodurch ihre Leistung sowohl im Front-End als auch im Back-End extrem hervorragend macht. Beim Rendering-Effizienz-Test unter Chrom ist das 25- und 32-fache des bekannten Schnurrbarts und der Micro-TMPL des Motors.
Neben den Leistungsvorteilen sind auch Debugging -Funktionen erwähnenswert. Der Vorlagen -Debugger kann die Vorlagenerklärung genau finden, die das Rendern von Fehlern auslöst, den Schmerz des unbeabsichtigten Debuggens während des Schreibens von Vorlagen lösen, die Entwicklung effizient machen und den gesamten Anwendungsabsturz aufgrund von Fehlern in einer einzelnen Vorlage vermeiden.
ArtTemplate Dies ist alles in 1,7 kB (GZIP) implementiert!
Grundlagen der JavaScript -Vorlage Engine
Obwohl jede Engine unterschiedliche Implementierungsmethoden von Template Syntax, Syntax -Parsen, variabler Zuordnung und String -Spleißen aufweist, besteht das wichtigste Rendering -Prinzip darin, JavaScript -Zeichenfolgen dynamisch auszuführen.
In Bezug auf die dynamische Ausführung von JavaScript -Zeichenfolgen verwendet dieser Artikel einen Vorlagencode als Beispiel:
Dies ist eine sehr einfache Vorlage, bei der "" Closetag (logische Anweisung geschlossen) ist. Wenn OpenTAG von "=" folgt, wird der Inhalt der Variablen ausgegeben.
HTML -Anweisungen und variable Ausgangsanweisungen werden direkt ausgegeben, und die analysierten Zeichenfolgen sind ähnlich:
Nach Abschluss der Syntaxanalyse wird die Rendering -Methode im Allgemeinen zurückgegeben:
Rendering -Test:
In der obigen Render-Methode verwendet die Template-Variable-Zuordnung die mit Anweisung mit Anweisung und String-Spleiß
Aus der Prinzip -Implementierung ist ersichtlich, dass zwei Probleme in der traditionellen JavaScript -Vorlage -Engine übrig bleiben:
1. Leistung: Beim Rendern der Template -Engine stützt sich der Funktionskonstruktor, um ihn zu implementieren. Wie eval, setTimeout und setInterval bietet die Funktion eine Methode zum Zugriff auf die JavaScript -Parsing -Engine mit Text, aber die Leistung der Ausführung von JavaScript auf diese Weise ist sehr niedrig.
2. Debugging: Da es sich um eine dynamische Ausführungszeichenfolge handelt, kann der Debugger, wenn der Debugger auf einen Fehler trifft, die Fehlerquelle nicht fangen, was dazu führt, dass das Debugging des Vorlagenfehlers extrem schmerzhaft wird. In einer Engine, die keine Fehlertoleranz durchführt, steigen die Wartungskosten, wenn lokale Vorlagen sogar die gesamte Anwendung aufgrund von Datenausnahmen zum Absturz bringen können, dramatisch an, wenn die Anzahl der Vorlagen zunimmt.
künstig das Geheimnis effizienter
1. Vorgefertigt
Nachdem die oben genannte Vorlagen-Engine-Implementierungsprinzipe die Vorlagenvariable zugewiesen wird, erfordert jedes Rendering eine dynamische Kompilierung von JavaScript-Zeichenfolgen, um die variable Zuordnung vollständig zu machen. Der Kompilierungs- und Zuordnungsprozess von ArtTemplate wird jedoch vor dem Rendering abgeschlossen, der als "Vorkompilierung" bezeichnet wird. Der Arttemplate -Vorlagen -Compiler extrahiert alle Vorlagenvariablen nach einigen einfachen Regeln und deklariert sie an der Spitze der Rendering -Funktion. Diese Funktion ähnelt:
Diese automatisch generierte Funktion ist wie eine handgeschriebene JavaScript-Funktion. Mit der gleichen Anzahl von Hinrichtungen wurden sowohl die CPU als auch die Speicherverwendung erheblich reduziert und die Leistung ist fast an der Grenze.
Es ist erwähnenswert, dass viele Merkmale von ArtTemplate auf vorkompilierten Implementierungen wie Sandboxspezifikationen und benutzerdefinierte Syntax basieren.
2. Schnellere String -Additionsmethode
Viele Menschen denken fälschlicherweise, dass die Array -Push -Methode Strings schneller als += spleißt. Sie sollten wissen, dass dies nur im IE6-8-Browser ist. Tatsächliche Messungen zeigen, dass moderne Browser += die Array -Push -Methode verwenden, während in der V8 -Motor die Verwendung der += Methode 4,7 -mal schneller ist als das Array -Spleißen. Daher verwendet ArtTemplate zwei verschiedene String -Spleißmethoden gemäß den Eigenschaften der JavaScript -Engine.
ArtTemplate -Debug -Modus -Prinzip
Die Front-End-Vorlagemotor ist nicht wie die Back-End-Vorlagemotor. Es ist eine dynamische Parsen, daher kann der Debugger die falsche Zeilennummer nicht lokalisieren. ArtTemplate ermöglicht es dem Vorlagen -Debugger geschickt, die Vorlagenanweisung genau zu finden, die Renderfehler beispielsweise auswirft:
ArtTemplate unterstützt zwei Arten von Fehlererfassung, einen Rendering -Fehler (Renderfehler) und Kompilierfehler (Syntaxfehler).
1. Rendering -Fehler
Rendering -Fehler werden im Allgemeinen durch Vorlagendatenfehler oder variable Fehler verursacht. Beim Rendern gehen sie in den Debug -Modus ein, um die Vorlage neu zu kompilieren, ohne die Effizienz der normalen Vorlage zur Ausführung von Vorlagen zu beeinflussen. Der Vorlagenkompiler zeichnet die Zeilennummern auf, basierend auf dem Vorlagenzeilenumbruch, und die kompilierte Funktion ist ähnlich:
Wenn während des Ausführungsprozesses ein Fehler auftritt, wird die Zeilennummer, die der Ausnahmeregelungsvorlage entspricht, sofort geworfen, und der Vorlage -Debugger überprüft dann die entsprechenden Anweisungen, die der Vorlage entsprechend der Zeilennummer entsprechen und sie auf die Konsole ausdrucken.
2. Kompilierungsfehler
Kompilierungsfehler sind im Allgemeinen Template -Syntaxfehler wie unqualifiziertes Nisten, unbekannte Syntax usw. Da ArtTemplate keine vollständige lexikalische Analyse durchführt, ist es unmöglich, den Ort der Fehlerquelle zu bestimmen und nur die Fehlerinformationen und den Quellcode für den ursprünglichen Text auszugeben, um die Entwickler zu beurteilen.