Heim > Web-Frontend > js-Tutorial > Hauptteil

Eine einfache HTML-Vorlagen-Engine

小云云
Freigeben: 2018-02-10 15:00:15
Original
3051 Leute haben es durchsucht

Zu den zuvor verwendeten Vorlagen

gehören ejs und jade (später umbenannt in pug). Ersteres ist so konzipiert, dass es einfach zu verwenden ist, und seine Syntax kommt der von HTML relativ nahe. Letzteres ist entmutigend, und wenn ich mich richtig erinnere, gelten für jade strenge Anforderungen an die Einrückung, da es die hierarchische Beziehung von Tags anhand der Einrückung beurteilt. Das Schreiben in Python war fast unmöglich auf dünnem Eis (wo ist mein Messschieber???), daher habe ich damals noch ejs für die Entwicklung verwendet.

Dieses Mal habe ich mich also grob an die Syntaxspezifikationen von ejs gehalten, um Leopard zu implementieren.

Herunterladen und verwenden

Dies ist die Github-Adresse, nachdem Sie sie gelesen haben auch willkommen.

Sie können Leopard auch über npm herunterladen:

<span style="font-size: 14px;">$ npm install leopard-template<br></span>
Nach dem Login kopieren

Funktionen

Derzeit implementiert Leopard die folgenden Funktionspunkte:

  • Interpolation: einschließlich Textinterpolation und HTML-Interpolation

  • Logisches Urteil: <code><span style="font-size: 14px;">if</span>if und <span style="font-size: 14px;">else</span>

    else
  • <span style="font-size: 14px;">for</span>Schleife: for

  • -Schleife, die zum Schleifen der Ausgabe verwendet werden kann Vorlage
  • <span style="font-size: 14px;">capitalize</span> Filter: Unterstützt das Hinzufügen von Filtern zur Interpolation, und Filter können in Reihe verwendet werden. Die Engine verfügt über zwei integrierte Filter: <code><span style="font-size: 14px;">reverse</span>capitalize und reverse<code><span style="font-size: 14px;">Leopard.filter(filter, handler)</span> . Leopard unterstützt auch benutzerdefinierte Filter. Sie können Leopard.filter(filter, handler) verwenden, um einen Filter global zu registrieren. In Bezug auf Filter unterscheidet sich Leopard

    möglicherweise von
  • ejs
, ähnelt aber eher

Vue.

<span style="font-size: 14px;">var Leopard = require('leopard-template')<br>var leo = new Leopard()<br><br>var template = '<% if (isOk) { %>' +<br>  '<span class=\"nickname\"><%= nickname | capitalize %></span>' +<br>  '<% } else { %>' +<br>  '<span class=\"realname\"><%= realname | capitalize %></span>' +<br>  '<% } %>'<br><br>var html = leo.compile(conditions, {<br>  isOk: false,<br>  nickname: 'leo',<br>  realname: 'leopard'<br>})<br><br>// html就是最终编译成功的的html了,可以直接通过document的方法渲染到页面上<br></span>
Nach dem Login kopieren

Gib mir ein Beispiel

Leistung

<span style="font-size: 14px;">li</span> Eigentlich kennt jeder die Leistung der String-Template-Engine. Unter den aktuellen Hardwarebedingungen kann man fast sagen, dass sie sehr schnell ist. (Das Kind, das unter der schlechten Renderleistung des virtuellen DOM-Servers litt, weinte und fiel auf der Toilette in Ohnmacht. Mein Firmenprojekt bleibt hier hängen und kann nicht online sein) Ich habe einen einfachen Benchmark erstellt Das Durchschleifen von 50.000 <em>li</em> dauert etwa 60 ms. Natürlich unterstützt

Leopard
<span style="font-size: 14px;"># benchmark<br>$ npm run benchmark<br></span>
Nach dem Login kopieren
derzeit nur das Parsen und Kompilieren von

Vorlagenzeichenfolge in HTML-Zeichenfolge

, daher bezieht sich die Schleifenausgabe hier auf den Schritt der Zeichenfolgenkompilierung.

Open SourceObwohl es sich um ein Radherstellungsprojekt handelt und es fast genauso aussieht wie

ejs
<span style="font-size: 14px;"># unit test<br>$ npm run test<br><br># coverage<br>$ npm run coverage<br></span>
Nach dem Login kopieren
Das Gleiche gilt, daher ist es unwahrscheinlich, dass es in einer Produktionsumgebung zum Einsatz kommt (außerdem wird jetzt das MVVM-Framework zum Entwickeln von Projekten verwendet), aber ich hoffe immer noch,

Leopard

gemäß den Spezifikationen zu entwickeln von Open-Source-Projekten. Ich habe Testfälle mit 100 % Abdeckung für

Leopard geschrieben. Jedes Mal, wenn ich einen Commit einreiche, führe ich den Test aus und bestehe ihn, bevor ich ihn einreiche. Ich hoffe auch, dass dieses Projekt nicht zu wässrig wird.

Verwandte Empfehlungen:

Node.js Template Engine Jade Beispielerklärung

php implementiert die Template Engine-Funktion Einfaches BeispielPHP-Designmuster-Container-Bereitstellungsframework basierend auf der Template-Engine

Das obige ist der detaillierte Inhalt vonEine einfache HTML-Vorlagen-Engine. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage