EJS

Eingebettete JavaScript-Vorlagen

Installation

1$ npm install ejs

Merkmale

Kontrollfluss mit<% %>
Escape-Ausgabe mit <%= %>(Escape-Funktion konfigurierbar)
Unentdeckte Rohausgabe mit<%- %>
Newline-Trim-Modus („Newline Slurping“) mit -%>End-Tag
Whitespace-Trim-Modus (alle Leerzeichen ausschlürfen) für den Kontrollfluss mit<%_ _%>
Benutzerdefinierte Trennzeichen (z. B. <? ?>anstelle von verwenden <% %>)
Inklusive
Kundenseitiger Support
Statisches Caching von Zwischen-JavaScript
Statisches Caching von Vorlagen
Entspricht dem Express- Ansichtssystem

Beispiel

1
2
3
<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

Testen Sie EJS online unter: https://ionicabizau.github.io/ejs-playground/ .

Verwendung

1
2
3
4
5
6
7
8
9
10
let template = ejs.compile(str, options);
template(data);
// => Rendered HTML string

ejs.render(str, data, options);
// => Rendered HTML string

ejs.renderFile(filename, data, options, function(err, str){
    // str => Rendered HTML string
});

Es ist auch möglich, ejs.render(dataAndOptions);alles in einem einzigen Objekt zu übergeben. In diesem Fall erhalten Sie lokale Variablen für alle übergebenen Optionen. Beachten Sie jedoch, dass Ihr Code beschädigt werden könnte, wenn wir eine Option mit denselben Optionen hinzufügen Geben Sie den Namen als eine der Eigenschaften Ihres Datenobjekts ein. Wir empfehlen daher nicht, diese Verknüpfung zu verwenden.

Optionen

cache Kompilierte Funktionen werden zwischengespeichert und erfordernfilename
filename Der Name der Datei, die gerendert wird. Nicht erforderlich, wenn Sie verwenden renderFile(). Wird cachezum Schlüsseln von Caches und für Includes verwendet.
root Legen Sie das Projektstammverzeichnis für Includes mit einem absoluten Pfad (/file.ejs) fest.
context Funktionsausführungskontext
compileDebug Wenn falsekeine Debug-Instrumentierung kompiliert wird
client Wenn true, wird eine Funktion kompiliert, die im Browser gerendert werden kann, ohne dass die EJS-Laufzeit ( ejs.min.js ) geladen werden muss.
delimiter Zeichen, das mit spitzen Klammern zum Öffnen/Schließen verwendet werden soll
debug Ausgabe des generierten Funktionskörpers
strict Bei der Einstellung truebefindet sich die generierte Funktion im strikten Modus
_withwith() {}Ob Konstrukte verwendet werden sollen oder nicht . In falsediesem Fall werden die lokalen Werte im localsObjekt gespeichert. falseIm strikten Modus auf festlegen.
localsName Name, der für das Objekt verwendet werden soll, das lokale Variablen speichert, wenn withStandardwerte nicht verwendet werdenlocals
rmWhitespace Entfernen Sie alle sicher zu entfernenden Leerzeichen, einschließlich führender und nachfolgender Leerzeichen. Es ermöglicht außerdem eine sicherere Version des -%>Zeilen-Slurpings für alle Scriptlet-Tags (neue Zeilen von Tags werden nicht in der Mitte einer Zeile entfernt).
escape Die mit <%=dem Konstrukt verwendete Escape-Funktion. Sie wird beim Rendern verwendet und .toString()bei der Generierung von Client-Funktionen verwendet. (Standardmäßig maskiert XML).
outputFunctionName Legen Sie eine Zeichenfolge fest (z. B. „echo“ oder „print“), damit eine Funktion die Ausgabe innerhalb von Skriptlet-Tags druckt.

Dieses Projekt verwendet JSDoc . Für die vollständige öffentliche API-Dokumentation klonen Sie das Repository und führen Sie aus npm run doc. Dadurch wird JSDoc mit den richtigen Optionen ausgeführt und die Dokumentation ausgegeben out/. Wenn Sie sowohl die öffentliche als auch die private API-Dokumentation möchten, führen Sie npm run devdocstattdessen Folgendes aus.

Stichworte

<% „Scriptlet“-Tag für Kontrollfluss, keine Ausgabe
<%_ Das Scriptlet-Tag „Whitespace Slurping“ entfernt alle Leerzeichen davor
<%= Gibt den Wert in die Vorlage aus (escaped)
<%- Gibt den Wert ohne Escapezeichen in die Vorlage aus
<%# Kommentar-Tag, keine Ausführung, keine Ausgabe
<%% Gibt ein Literal „<%“ aus
%%> Gibt ein Literal „%>“ aus
%> Einfaches End-Tag
-%> Trim-Modus-Tag („newline slurp“), schneidet die folgende neue Zeile ab
_%> Das End-Tag „Whitespace Slurping“ entfernt alle Leerzeichen danach

Die vollständige Syntaxdokumentation finden Sie unterdocs/syntax.md.

Inklusive

Einschlüsse müssen entweder ein absoluter Pfad sein oder, wenn nicht, werden sie als relativ zur Vorlage mit dem includeAufruf angenommen. Wenn Sie beispielsweise ./views/user/show.ejsvon einschließen, ./views/users.ejswürden Sie verwenden <%- include('user/show') %>.

filenameSie müssen die Option für die Vorlage beim Aufruf angeben include , es sei denn, Sie verwenden renderFile().

Sie werden wahrscheinlich das Rohausgabe-Tag ( <%-) mit Ihrem Include verwenden wollen, um ein doppeltes Escapen der HTML-Ausgabe zu vermeiden.

1
2
3
4
5
<ul>
  <% users.forEach(function(user){ %>
    <%- include('user/show', {user: user}) %>
  <% }); %>
</ul>

Includes werden zur Laufzeit eingefügt, sodass Sie Variablen für den Pfad im includeAufruf verwenden können (z. B. <%- include(somePath) %>). Variablen in Ihrem Datenobjekt der obersten Ebene stehen allen Ihren Includes zur Verfügung, lokale Variablen müssen jedoch weitergegeben werden.

HINWEIS: Include-Präprozessoranweisungen ( <% include user/show %>) werden weiterhin unterstützt.

Benutzerdefinierte Trennzeichen

Benutzerdefinierte Trennzeichen können pro Vorlage oder global angewendet werden:

1
2
3
4
5
6
7
8
9
10
11
let ejs = require('ejs'),
    users = ['geddy', 'neil', 'alex'];

// Just one template
ejs.render('<?= users.join(" | "); ?>', {users: users}, {delimiter: '?'});
// => 'geddy | neil | alex'

// Or globally
ejs.delimiter = '$';
ejs.render('<$= users.join(" | "); $>', {users: users});
// => 'geddy | neil | alex'

Caching

lru-cacheEJS wird mit einem grundlegenden In-Process-Cache zum Zwischenspeichern der JavaScript-Zwischenfunktionen geliefert, die zum Rendern von Vorlagen verwendet werden. Es ist einfach, LRU-Caching mithilfe der Node- Bibliothek einzubinden :

1
2
3
let ejs = require('ejs'),
    LRU = require('lru-cache');
ejs.cache = LRU(100); // LRU cache with 100-item limit

Wenn Sie den EJS-Cache löschen möchten, rufen Sie auf ejs.clearCache. Wenn Sie den LRU-Cache verwenden und ein anderes Limit benötigen, setzen Sie ihn einfach ejs.cacheauf eine neue Instanz des LRU zurück.

Benutzerdefinierter Dateilader

Der Standard-Dateilader ist fs.readFileSync. Wenn Sie ihn anpassen möchten, können Sie ejs.fileLoader festlegen.

1
2
3
4
5
6
let ejs = require('ejs');
let myFileLoad = function (filePath) {
  return 'myFileLoad: ' + fs.readFileSync(filePath);
};

ejs.fileLoader = myFileLoad;

Mit dieser Funktion können Sie die Vorlage vor dem Lesen vorverarbeiten.

Layouts

EJS unterstützt nicht speziell Blöcke, aber Layouts können durch die Einbindung von Kopf- und Fußzeilen implementiert werden, etwa so:

1
2
3
4
5
6
7
8
<%- include('header') -%>
<h1>
  Title
</h1>
<p>
  My page
</p>
<%- include('footer') -%>

Kundenseitiger Support

Gehen Sie zur neuesten Version , laden Sie sie herunter ./ejs.jsoder ./ejs.min.js. Alternativ können Sie sie selbst kompilieren, indem Sie das Repository klonen und ausführen jake build(oder $(npm bin)/jake buildwenn Jake nicht global installiert ist).

Fügen Sie eine dieser Dateien auf Ihrer Seite ein und sie ejssollte weltweit verfügbar sein.

Example

1
2
3
4
5
6
7
8
9
10
<div id="output"></div>
<script src="ejs.min.js"></script>
<script>
  let people = ['geddy', 'neil', 'alex'],
      html = ejs.render('<%= people.join(", "); %>', {people: people});
  // With jQuery:
  $('#output').html(html);
  // Vanilla JS:
  document.getElementById('output').innerHTML = html;
</script>

Caveats

Die meisten EJS-Funktionen funktionieren wie erwartet. Es gibt jedoch ein paar Dinge zu beachten:

Obviously, da Sie keinen Zugriff auf das Dateisystem haben, ejs.renderFile()wird nicht funktionieren.

Aus dem gleichen Grund includefunktionieren s nur, wenn Sie ein verwenden include callback. Hier ist ein Beispiel:

1
2
3
4
5
6
7
8
9
let str = "Hello <%= include('file', {person: 'John'}); %>",
   fn = ejs.compile(str, {client: true});

fn(data, null, function(path, d){ // include callback
 // path -> 'file'
 // d -> {person: 'John'}
 // Put your code here
 // Return the contents of file as a string
}); // returns rendered string

IDE Integration with Syntax Highlighting

VSCode:Javascript EJS von DigitalBrainstem

Es gibt eine Reihe von Implementierungen von EJS:

TJs Implementierung, die Version 1 dieser Bibliothek: https://github.com/tj/ejs
EJS von Jupiter Consulting: http://www.embeddedjs.com/
EJS Embedded JavaScript Framework auf Google Code: https://code.google.com/p/embeddedjavascript/
Sam Stephensons Ruby-Implementierung: https://rubygems.org/gems/ejs
Erubis, eine ERB-Implementierung, die auch JavaScript ausführt: http://www.kuwata-lab.com/erubis/users-guide.04.html#lang-javascript
DigitalBrainstem EJS-Sprachunterstützung: https://github.com/Digitalbrainstem/ejs-grammar

Lizenz

Lizenziert unter der Apache-Lizenz, Version 2.0 ( http://www.apache.org/licenses/LICENSE-2.0 )

EJS Embedded JavaScript-Vorlagen unterliegen dem Copyright 2112 mde@fleegix.org.

Entwicklungshandbuch

Basismodul

eingebaute Objekte

Community-Modul

EJS

Installation

Merkmale

Beispiel

Verwendung

Optionen

Stichworte

Inklusive

Benutzerdefinierte Trennzeichen

Caching

Benutzerdefinierter Dateilader

Layouts

Kundenseitiger Support

Example

Caveats

IDE Integration with Syntax Highlighting

Lizenz

Entwicklungshandbuch

Basismodul

eingebaute Objekte

Community-Modul

EJS

Installation

Merkmale

Beispiel

Verwendung

Optionen

Stichworte

Inklusive

Benutzerdefinierte Trennzeichen

Caching

Benutzerdefinierter Dateilader

Layouts

Kundenseitiger Support

Example

Caveats

IDE Integration with Syntax Highlighting

Ähnliche Projekte

Lizenz