Detaillierte Erläuterung der Implementierungsprinzipien leistungsstarker JavaScript-Vorlagen-Engine_Javascript-Fähigkeiten

Mit der Entwicklung des Webs sind Front-End-Anwendungen immer komplexer geworden, und auch Back-End-basiertes Javascript (Node.js) ist entstanden. Derzeit werden größere Erwartungen an Javascript gestellt Gleichzeitig erfreuen sich auch Javascript-MVC-Ideen zunehmender Beliebtheit. Als wichtigster Teil der Trennung von Daten und Schnittstelle hat die Javascript-Template-Engine im vergangenen Jahr in der Open-Source-Community immer mehr Aufmerksamkeit erregt. Sie wurde in Twitter, Taobao und Sina eingesetzt Weibo, Tencent QQ Zone und Tencent Weibo sind auf großen Websites wie Bo zu sehen.

In diesem Artikel werden die Prinzipien der vorhandenen Javascript-Vorlagen-Engine anhand des einfachsten Beispielcodes beschrieben, einschließlich der Funktionsimplementierungsprinzipien der neuen Generation der Javascript-Vorlagen-Engine artTemplate. Willkommen zur gemeinsamen Diskussion.

artTemplate-Einführung

artTemplate ist eine Javascript-Template-Engine der neuen Generation. Sie nutzt die Vorkompilierung, um einen qualitativen Leistungssprung zu erzielen, und nutzt die Eigenschaften der Javascript-Engine vollständig aus, um sowohl im Front-End als auch im Back-End eine äußerst hervorragende Leistung zu erzielen . Im Rendering-Effizienztest unter Chrome ist es 25- bzw. 32-mal so hoch wie bei den bekannten Engines Moustache und Micro Tmpl.

Neben den Leistungsvorteilen sind auch die Debugging-Fähigkeiten erwähnenswert. Der Vorlagen-Debugger kann die Vorlagenanweisung, die den Rendering-Fehler verursacht hat, genau lokalisieren. Dadurch wird das Problem behoben, dass beim Schreiben von Vorlagen kein Debugging möglich ist, die Entwicklung wird effizienter und verhindert, dass die gesamte Anwendung aufgrund eines einzelnen Vorlagenfehlers abstürzt.

artTemplate All dies in 1,7 KB (gzip)!

Grundprinzipien der Javascript-Template-Engine

Obwohl jede Engine über unterschiedliche Implementierungsmethoden von Vorlagensyntax, Syntaxanalyse, Variablenzuweisung und String-Splicing verfügt, ist das wichtigste Rendering-Prinzip immer noch die dynamische Ausführung von Javascript-Strings.

In Bezug auf die dynamische Ausführung von Javascript-Strings verwendet dieser Artikel einen Vorlagencode als Beispiel:

Dies ist eine sehr einfache Methode zum Schreiben von Vorlagen, bei der „“ closeTag (logisches Anweisungs-Abschluss-Tag) ist. Wenn auf openTag „=" folgt, wird der Inhalt der Variablen ausgegeben.

HTML-Anweisungen und Variablenausgabeanweisungen werden direkt ausgegeben, und die analysierte Zeichenfolge ist ähnlich:

Nach Abschluss der Syntaxanalyse wird normalerweise die Rendering-Methode zurückgegeben:

Rendering-Test:

In der obigen Render-Methode verwendet die Vorlagenvariablenzuweisung die with-Anweisung und das String-Splicing verwendet die Array-Push-Methode, um die Leistung unter IE6 und 7 zu verbessern. Die vom jQuery-Autor John entwickelte Micro-Template-Engine tmpl ist ein typisches Beispiel dafür Vertreter dieser Methode finden Sie unter: http://ejohn.org/blog/javascript-micro-templating/

Aus der prinzipiellen Implementierung ist ersichtlich, dass es in der traditionellen Javascript-Template-Engine zwei Probleme zu lösen gibt:

1. Leistung: Die Vorlagen-Engine ist beim Rendern auf den Funktionskonstruktor angewiesen. Funktionen wie eval, setTimeout und setInterval bieten eine Methode zur Verwendung von Text für den Zugriff auf die JavaScript-Parsing-Engine, die Leistung bei der Ausführung von JavaScript ist jedoch gering ist sehr gering.

2. Debuggen: Da es sich um eine dynamische Ausführungszeichenfolge handelt, kann der Debugger bei Auftreten eines Fehlers die Fehlerquelle nicht erfassen, was das Debuggen von Vorlagenfehlern äußerst mühsam macht. In einer Engine ohne Fehlertoleranz können lokale Vorlagen aufgrund von Datenanomalien sogar zum Absturz der gesamten Anwendung führen. Mit zunehmender Anzahl von Vorlagen steigen die Wartungskosten dramatisch.

artTemplates Effizienzgeheimnis

1. Vorkompilierung

Da im obigen Prinzip der Template-Engine-Implementierung den Vorlagenvariablen Werte zugewiesen werden müssen, erfordert jedes Rendering eine dynamische Kompilierung von Javascript-Zeichenfolgen, um die Variablenzuweisungen abzuschließen. Der Kompilierungs- und Zuweisungsprozess von artTemplate wird jedoch vor dem Rendern abgeschlossen. Diese Methode wird als „Vorkompilierung“ bezeichnet. Der artTemplate-Vorlagen-Compiler extrahiert alle Vorlagenvariablen nach einigen einfachen Regeln und deklariert sie im Kopf der Rendering-Funktion. Diese Funktion ähnelt:

Diese automatisch generierte Funktion ähnelt einer handgeschriebenen Javascript-Funktion. Bei gleicher Anzahl an Ausführungen werden sowohl die CPU- als auch die Speicherauslastung erheblich reduziert und die Leistung liegt nahe am Limit.

Es ist erwähnenswert, dass viele Funktionen von artTemplate auf einer vorkompilierten Implementierung basieren, wie z. B. Sandbox-Spezifikationen und benutzerdefinierte Syntax.

2. Schnellere Methode zum Hinzufügen von Zeichenfolgen

Viele Leute glauben fälschlicherweise, dass die Array-Push-Methode zum Verketten von Zeichenfolgen schneller ist als =. Sie müssen wissen, dass dies nur unter dem IE6-8-Browser möglich ist. Tatsächliche Messungen zeigen, dass die Verwendung von = in modernen Browsern schneller ist als die Array-Push-Methode, und in der v8-Engine ist die Verwendung von = 4,7-mal schneller als das Array-Spleißen. Daher verwendet artTemplate zwei verschiedene String-Splicing-Methoden basierend auf den Eigenschaften der Javascript-Engine.

ArtTemplate-Debug-Modus-Prinzip

Die Front-End-Vorlagen-Engine ist nicht wie die Back-End-Vorlagen-Engine. Sie wird dynamisch analysiert, sodass der Debugger die Fehlerzeilennummer nicht finden kann, und artTemplate verwendet eine clevere Methode, damit der Vorlagen-Debugger die Vorlage genau lokalisieren kann Anweisung, die den Darstellungsfehler verursacht hat, z. B. :

artTemplate unterstützt zwei Arten der Fehlererfassung: einen Rendering-Fehler (Render Error) und einen Kompilierungsfehler (Syntax Error).

1. Darstellungsfehler

Rendering-Fehler werden im Allgemeinen durch Vorlagendatenfehler oder Variablenfehler verursacht. Nur wenn beim Rendern ein Fehler auftritt, wird der Debug-Modus aufgerufen, um die Vorlage neu zu kompilieren, ohne die normale Effizienz der Vorlagenausführung zu beeinträchtigen. Der Vorlagen-Compiler zeichnet die Zeilennummer entsprechend dem Vorlagen-Neuzeilenzeichen auf, und die kompilierte Funktion ist ähnlich:

Wenn während der Ausführung ein Fehler auftritt, wird sofort die der Ausnahmevorlage entsprechende Zeilennummer ausgegeben. Der Vorlagendebugger überprüft dann die der Vorlage entsprechende Anweisung anhand der Zeilennummer und gibt sie auf der Konsole aus.

2. Kompilierungsfehler

Kompilierungsfehler sind im Allgemeinen Vorlagensyntaxfehler, wie z. B. unqualifizierte Verschachtelung, unbekannte Syntax usw. Da artTemplate keine vollständige lexikalische Analyse durchführt, kann es den Ort der Fehlerquelle nicht ermitteln. Es kann nur den Originaltext der Fehlermeldung und den Quellcode ausgeben, damit Entwickler diese beurteilen können.