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)
  • Nicht entflohene Rohleistung mit <%- %>
  • Newline-Trim-Modus ('Newline Slurping') mit -%> Ending Tag
  • Whitespace-Trim-Modus (alle Whitespaces schlürfen) für den Kontrollfluss mit <%_ _%>
  • Custom delimiters (eg <? ?> Anstelle von <% %> )
  • 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, ejs.render(dataAndOptions); bei dem Sie alles in einem einzelnen Objekt übergeben. In diesem Fall erhalten Sie lokale Variablen für alle übergebenen Optionen. ejs.render(dataAndOptions); Sie jedoch, dass Ihr Code möglicherweise ejs.render(dataAndOptions); , wenn Wir fügen eine Option mit demselben Namen wie eine der Eigenschaften Ihres Datenobjekts hinzu. Daher empfehlen wir, diese Verknüpfung nicht zu verwenden.

Optionen

  • cache Kompilierte Funktionen werden zwischengespeichert und erfordern einen filename
  • filename Der Name der Datei, die gerendert wird. Nicht erforderlich, wenn Sie renderFile() . Wird vom cache für Schlüsselcaches und für Includes verwendet.
  • root Setzt das Projekt root für Includes mit einem absoluten Pfad (/file.ejs).
  • context Funktionsausführungskontext
  • compileDebug Wenn false keine Debug-Instrumentierung kompiliert
  • 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 Generierter Funktionskörper
  • strict Bei der Einstellung true befindet sich die generierte Funktion im strengen Modus
  • _with Ob oder nicht zu Verwendung with() {} Konstrukten. Wenn false dann den Einheimischen in dem gespeichert werden locals Objekt. Set zu false im Strict - Modus.
  • localsName Name für das Objekt zu speichern lokalen Variablen zu verwenden , wenn nicht mit with Defaults zu locals
  • rmWhitespace Entfernen Sie alle sicher zu entfernenden Leerzeichen, einschließlich führender und nachfolgender Leerzeichen. Außerdem wird eine sicherere Version von -%> Zeilenschlürfen für alle Scriptlet-Tags aktiviert (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 ist bei der Generierung von Client-Funktionen .toString() . (Standardmäßig Escape-XML).
  • outputFunctionName Auf eine Zeichenfolge (z. B. 'echo' outputFunctionName ' outputFunctionName ') setzen, damit eine Funktion die Ausgabe in Scriptlet-Tags druckt.

In diesem Projekt wird JSDoc verwendet . Um die vollständige öffentliche API-Dokumentation zu erhalten, klonen Sie das Repository und führen Sie npm run doc . Dadurch wird JSDoc mit den richtigen Optionen ausgeführt und die Dokumentation an out/ ausgegeben. Wenn Sie sowohl die öffentlichen als auch die privaten API-Dokumente ausführen möchten, führen Sie aus npm run devdoc stattdessen npm run devdoc .

Stichworte

  • <% 'Scriptlet'-Tag, für Kontrollfluss, keine Ausgabe
  • <%_ 'Whitespace Slurping' Scriptlet-Tag 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
  • <%% ein Literal '<%' aus.
  • %%> ein Literal '%>' aus.
  • %> Einfaches Ending-Tag
  • -%> Tag im Trimmmodus ('newline slurp'), schneidet nach der 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 include Aufruf angenommen. Wenn Sie beispielsweise ./views/user/show.ejs von ./views/users.ejs you einschließen würde <%- include('user/show') %> .

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

Sie sollten wahrscheinlich das Rohausgabe-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 Variablen für den Pfad im include Aufruf verwenden können (z. B. <%- include(somePath) %> ). Variablen in Ihrem Datenobjekt der obersten Ebene stehen allen Includes, aber lokalen Variablen zur Verfügung müssen weitergegeben werden.

HINWEIS: Anweisungen zum Einschließen von Präprozessoren ( <% 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. Es ist einfach, das LRU-Caching mithilfe der lru-cache Bibliothek von Node lru-cache :

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

Benutzerdefinierter Dateilader

Der Standard- fs.readFileSync 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 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 ./ejs.js und ./ejs.min.js Sie ./ejs.js oder ./ejs.min.js herunter. Alternativ können Sie sie selbst kompilieren, indem Sie das Repository klonen und jake build (oder $(npm bin)/jake build wenn jake dies nicht ist global installiert).

Fügen Sie eine dieser Dateien in Ihre Seite ein, und ejs sollten 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() wird nicht funktionieren.
  2. Aus dem gleichen Grund funktionieren include s nur, wenn Sie einen 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 .