Fantastisches Community-Modul

EJS

Eingebettete JavaScript-Vorlagen

Build-Status Abhängigkeiten entwickeln Bekannte Sicherheitslücken

Installation

1
$ npm install ejs

Eigenschaften

  • Kontrollfluss mit <% %>
  • <%= %>Escape- Ausgabe mit (Escape-Funktion konfigurierbar)
  • Uneingeschränkte Rohleistung mit <%- %>
  • Newline-Trim-Modus ('Newline Slurping') mit -%>Ending-Tag
  • Whitespace-Trim-Modus (Slurp alle Whitespace) für den Kontrollfluss mit <%_ _%>
  • Benutzerdefinierte Trennzeichen (z. B. <? ?>anstelle von verwenden <% %>)
  • Beinhaltet
  • Client-seitiger Support
  • Statisches Caching von JavaScript-Zwischenprodukten
  • 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, zu verwenden, ejs.render(dataAndOptions);wo Sie alles in einem einzelnen Objekt übergeben. In diesem Fall erhalten Sie lokale Variablen für alle übergebenen Optionen. Beachten Sie jedoch, dass Ihr Code möglicherweise beschädigt wird, wenn wir eine Option mit derselben hinzufügen Name als eine der Eigenschaften Ihres Datenobjekts. Daher empfehlen wir nicht, diese Verknüpfung zu verwenden.

Optionen

  • cache Kompilierte Funktionen werden zwischengespeichert, erfordert filename
  • filename Der Name der Datei, die gerendert wird. Nicht erforderlich, wenn Sie verwenden renderFile(). Wird verwendet, um cacheCaches zu verschlüsseln und für Includes.
  • root Legen Sie das Projektstammverzeichnis für Includes mit einem absoluten Pfad (/file.ejs) fest.
  • context Funktionsausführungskontext
  • compileDebug Wenn falsekeine Debug-Instrumentierung kompiliert ist
  • client Wenn truekompiliert eine Funktion , die , ohne dass im Browser gerendert werden kann , die EJS Runtime (laden ejs.min.js ).
  • delimiter Zeichen zur Verwendung mit spitzen Klammern zum Öffnen / Schließen
  • debug Ausgabe generierter Funktionskörper
  • strict Wenn diese trueOption aktiviert ist, befindet sich die generierte Funktion im strengen Modus
  • _withwith() {}Gibt an, ob Konstrukte verwendet falsewerden sollen oder nicht . Wenn dies der Fall ist, werden die Einheimischen im localsObjekt gespeichert . Setzen Sie diese Option auf den falsestrengen Modus.
  • localsName Name, der für das Objekt verwendet werden soll, in dem lokale Variablen gespeichert werden, wenn die withStandardeinstellungen nicht verwendet werdenlocals
  • rmWhitespace Entfernen Sie alle sicher zu entfernenden Leerzeichen, einschließlich führender und nachfolgender Leerzeichen. Außerdem wird eine sicherere Version des -%>Zeilenschlürfens für alle Scriptlet-Tags ermöglicht (es werden keine neuen Zeilen von Tags in der Mitte einer Zeile entfernt).
  • escape Die Escape-Funktion, die mit <%=Konstrukt verwendet wird. Sie wird beim Rendern verwendet und .toString()bei der Generierung von Client-Funktionen verwendet. (Standardmäßig wird XML maskiert.)
  • outputFunctionName Setzen Sie eine Zeichenfolge (z. B. 'echo' oder 'print') für eine Funktion zum Drucken der Ausgabe in Scriptlet-Tags.

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

Stichworte

  • <% 'Scriptlet'-Tag, für Kontrollfluss, keine Ausgabe
  • <%_ Das Skriptlet-Tag "Whitespace Slurping" entfernt alle Leerzeichen davor
  • <%= Gibt den Wert in die Vorlage aus (maskiert)
  • <%- Gibt den nicht entkoppelten Wert in die Vorlage aus
  • <%# Kommentar-Tag, keine Ausführung, keine Ausgabe
  • <%% Gibt ein Literal '<%' aus.
  • %%> Gibt ein Literal '%>' aus.
  • %> Einfaches Ending-Tag
  • -%> Trim-Mode-Tag ('Newline Slurp'), schneidet nach Newline
  • _%> Das End-Tag 'Whitespace Slurping' entfernt alle Leerzeichen danach

Die vollständige Dokumentation zur Syntax finden Sie unter docs/syntax.md.

Beinhaltet

Includes müssen entweder ein absoluter Pfad sein oder werden, falls nicht, als relativ zur Vorlage mit dem includeAufruf angenommen. Wenn Sie beispielsweise ein Include ./views/user/show.ejsvon verwenden ./views/users.ejs, würden Sie verwenden <%- include('user/show') %>.

Sie müssen die filenameOption für die Vorlage mit dem include Aufruf angeben , es sei denn, Sie verwenden renderFile().

Sie sollten wahrscheinlich das Raw-Ausgabe-Tag ( <%-) mit Ihrem Include verwenden, um zu vermeiden, dass die HTML-Ausgabe doppelt maskiert wird.

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

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

ANMERKUNG: Include-Präprozessor-Direktiven ( <% 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

EJS wird mit einem grundlegenden In-Process-Cache zum Zwischenspeichern der JavaScript-Zwischenfunktionen geliefert, die zum Rendern von Vorlagen verwendet werden. Das Einfügen von LRU-Caching mithilfe der Node- lru-cacheBibliothek ist ganz einfach :

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 an ejs.clearCache. Wenn Sie den LRU-Cache verwenden und ein anderes Limit benötigen, setzen Sie ihn einfach ejs.cacheauf eine neue Instanz der LRU zurück.

Benutzerdefinierter Dateilader

Der Standard- fs.readFileSyncDateilader ist , 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 keine speziellen Blöcke, aber Layouts können implementiert werden, indem Kopf- und Fußzeilen wie folgt eingefügt werden:

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

Client-seitiger 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 in Ihre Seite ein und ejssollte global 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 funktionieren wie erwartet, es gibt jedoch einige Dinge zu beachten:

  1. Obviously, da Sie keinen Zugriff auf das Dateisystem haben, ejs.renderFile()funktioniert nicht.
  2. Aus dem gleichen Grund includefunktionieren s nur, wenn Sie eine verwenden include callback. Hier 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:

Lizenz

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


EJS Embedded JavaScript-Vorlagen copyright 2112 mde@fleegix.org .