Eine einfache HTML-Vorlagen-Engine

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>

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

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>

Gib mir ein Beispiel

<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

<span style="font-size: 14px;"># benchmark<br>$ npm run benchmark<br></span>

Vorlagenzeichenfolge in HTML-Zeichenfolge

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

<span style="font-size: 14px;"># unit test<br>$ npm run test<br><br># coverage<br>$ npm run coverage<br></span>

Leopard

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

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!