Tolles Community-Modul

EJS

Eingebettete JavaScript-Vorlagen

Build-Status Abhängigkeiten entwickeln Bekannte Schwachstellen

Installation

1
$ npm install ejs

Eigenschaften

  • Kontrollfluss mit <% %>
  • <%= %>Escape- Ausgabe mit (Escape-Funktion konfigurierbar)
  • Unescaped Rohausgabe mit <%- %>
  • Newline-Trim-Modus ("newline slurping") mit -%>End-Tag
  • Whitespace-Trim-Modus (alle Leerzeichen schlürfen) für Kontrollfluss mit <%_ _%>
  • Benutzerdefinierte Trennzeichen (z. B. <? ?>anstelle von verwenden <% %>)
  • Beinhaltet
  • Clientseitiger 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 zu verwenden, ejs.render(dataAndOptions);wo Sie alles in einem einzigen Objekt ü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 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 gerenderten Datei. Nicht erforderlich, wenn Sie verwenden renderFile(). Wird von cachefür Schlüsselcaches und für Includes verwendet.
  • root Setzen Sie das Projektstammverzeichnis für Includes mit einem absoluten Pfad (/file.ejs).
  • context Funktionsausführungskontext
  • compileDebug Wenn falsekeine Debug-Instrumentierung kompiliert ist
  • client Wenn true, kompiliert eine Funktion, die im Browser gerendert werden kann, ohne dass die EJS-Laufzeit ( ejs.min.js ) geladen werden muss .
  • delimiter Zeichen zur Verwendung mit spitzen Klammern zum Öffnen/Schließen
  • debug Ausgabe generierter Funktionskörper
  • strict Wenn auf gesetzt, truebefindet sich die generierte Funktion im strikten Modus
  • _with Ob with() {}Konstrukte verwendet falsewerden sollen oder nicht . Wenn dann die Locals im localsObjekt gespeichert werden. Im falsestrikten Modus festlegen.
  • localsName Name, der für das Objekt verwendet werden soll, das lokale Variablen speichert, wenn die withStandardeinstellungen nicht verwendet werdenlocals
  • rmWhitespace Entfernen Sie alle sicher zu entfernenden Leerzeichen, einschließlich führender und nachgestellter Leerzeichen. Es ermöglicht auch eine sicherere Version des -%>Zeilenumbruchs für alle Scriptlet-Tags (es werden keine neuen Zeilen von Tags in der Mitte einer Zeile entfernt).
  • escape Die mit <%=Konstrukt verwendete Escape-Funktion Sie wird beim Rendern verwendet und .toString()bei der Generierung von Client-Funktionen verwendet (Standardmäßig wird XML maskiert).
  • outputFunctionName Auf einen String setzen (zB 'echo' oder 'print'), damit eine Funktion die Ausgabe in Scriptlet-Tags ausgibt.

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 in ausgegeben out/. Wenn Sie sowohl die öffentlichen als auch die privaten API-Dokumente benötigen, führen Sie npm run devdocstattdessen aus.

Stichworte

  • <% 'Scriptlet'-Tag, für Kontrollfluss, keine Ausgabe
  • <%_ 'Whitespace Slurping' Scriptlet-Tag, 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
  • %> Tag mit einfacher Endung
  • -%> Trim-mode ('newline slurp') Tag, schneidet nach Newline
  • _%> 'Whitespace Slurping' End-Tag, entfernt alle Whitespaces danach

Die vollständige Syntaxdokumentation finden Sie unter docs/syntax.md.

Beinhaltet

Enthält entweder einen absoluten Pfad sein, oder, wenn nicht, wird als in Bezug auf die Vorlage mit dem angenommenen includeAnruf. Wenn Sie zum Beispiel einschließlich werden ./views/user/show.ejsvon ./views/users.ejsIhnen verwenden würden <%- include('user/show') %>.

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

Sie sollten wahrscheinlich das raw-Ausgabe-Tag ( <%-) mit Ihrem Include verwenden, 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, aber lokale Variablen müssen weitergegeben werden.

HINWEIS: Präprozessordirektiven einschließen ( <% 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, LRU-Caching mithilfe der Node- lru-cacheBibliothek 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 leeren möchten, rufen ejs.clearCacheSie auf.Wenn Sie den LRU-Cache verwenden und ein anderes Limit benötigen, setzen Sie einfach ejs.cacheauf eine neue Instanz der LRU zurück.

Benutzerdefinierter Dateilader

Der Standarddateilader 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 vorverarbeiten, bevor Sie sie lesen.

Grundrisse

EJS unterstützt keine Blöcke speziell, 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') -%>

Clientseitiger Support

Rufen Sie die neueste Version auf , laden Sie ./ejs.jsoder herunter ./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 ejssollten 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 von EJS werden wie erwartet funktionieren, es sind 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 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:

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 .