Fantastico modulo comunitario

EJS

Modelli JavaScript incorporati

Stato della costruzione Sviluppo delle dipendenze Vulnerabilità conosciute

Installazione

1
$ npm install ejs

Caratteristiche

  • Controlla il flusso con<% %>
  • Uscita di escape con <%= %>(funzione di escape configurabile)
  • Output grezzo senza escape con<%- %>
  • Modalità di ritaglio di nuova riga ("newline slurping") con -%>tag finale
  • Modalità di taglio degli spazi bianchi (slurp tutti gli spazi bianchi) per il controllo del flusso con<%_ _%>
  • Delimitatori personalizzati (ad esempio, utilizzare <? ?>al posto di <% %>)
  • Include
  • Supporto lato client
  • Caching statico di JavaScript intermedio
  • Caching statico dei modelli
  • Conforme al sistema di visualizzazione Express

Esempio

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

Prova EJS online su: https://ionicabizau.github.io/ejs-playground/ .

Utilizzo

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 });

È anche possibile usare ejs.render(dataAndOptions);dove passi tutto in un singolo oggetto. In tal caso, ti ritroverai con variabili locali per tutte le opzioni passate. Tuttavia, tieni presente che il tuo codice potrebbe rompersi se aggiungiamo un'opzione con lo stesso name come una delle proprietà dell'oggetto dati. Pertanto, non consigliamo di utilizzare questa scorciatoia.

Opzioni

  • cache Le funzioni compilate vengono memorizzate nella cache, richiedendofilename
  • filename Il nome del file di cui viene eseguito il rendering. Non richiesto se si utilizza renderFile(). Utilizzato da cacheper le cache delle chiavi e per gli include.
  • root Imposta la radice del progetto per gli include con un percorso assoluto (/file.ejs).
  • context Contesto di esecuzione della funzione
  • compileDebug Quando falsenon viene compilata alcuna strumentazione di debug
  • client When true, compila una funzione che può essere renderizzata nel browser senza la necessità di caricare EJS Runtime ( ejs.min.js ).
  • delimiter Carattere da utilizzare con parentesi angolari per aprire/chiudere
  • debug Corpo della funzione generata dall'output
  • strict Se impostato su true, la funzione generata è in modalità rigorosa
  • _with Se utilizzare o meno with() {}i costrutti. In falsetal caso le variabili locali verranno archiviate nell'oggetto locals. Impostate su falsein modalità rigorosa.
  • localsName Nome da utilizzare per l'oggetto che memorizza le variabili locali quando non si utilizzano withi Defaultlocals
  • rmWhitespace Rimuove tutti gli spazi bianchi sicuri da rimuovere, inclusi gli spazi bianchi iniziali e finali. Abilita inoltre una versione più sicura del -%>line slurping per tutti i tag scriptlet (non elimina le nuove righe di tag nel mezzo di una riga).
  • escape La funzione di escape utilizzata con <%=build. Viene utilizzata nel rendering e viene .toString()modificata nella generazione di funzioni client (per impostazione predefinita, evita XML).
  • outputFunctionName Impostato su una stringa (ad esempio, 'echo' o 'print') affinché una funzione stampi l'output all'interno dei tag scriptlet.

Questo progetto utilizza JSDoc . Per la documentazione completa dell'API pubblica, clona il repository ed esegui npm run doc. Questo eseguirà JSDoc con le opzioni appropriate e restituirà la documentazione a out/. Se desideri sia la documentazione API pubblica che quella privata, esegui npm run devdocinvece.

Tag

  • <% Tag 'Scriptlet', per flusso di controllo, nessun output
  • <%_ Tag Scriptlet 'Whitespace Slurping', rimuove tutti gli spazi bianchi prima di esso
  • <%= Restituisce il valore nel modello (escape)
  • <%- Restituisce il valore senza caratteri di escape nel modello
  • <%# Tag di commento, nessuna esecuzione, nessun output
  • <%% Restituisce un valore letterale '<%'
  • %%> Restituisce un valore letterale '%>'
  • %> Etichetta finale semplice
  • -%> Tag modalità di taglio ("newline slurp"), taglia dopo il fine riga
  • _%> Il tag finale 'Whitespace Slurping' rimuove tutti gli spazi bianchi dopo di esso

Per la documentazione completa sulla sintassi, vederedocs/syntax.md.

Include

Gli include devono essere un percorso assoluto oppure, in caso contrario, vengono considerati relativi al modello con la includechiamata. Ad esempio, se includi ./views/user/show.ejsda ./views/users.ejsdovresti utilizzare <%- include('user/show') %>.

È necessario specificare l' filenameopzione per il modello con la include chiamata a meno che non si utilizzi renderFile().

Probabilmente vorrai utilizzare il tag di output non elaborato ( <%-) con il tuo include per evitare il doppio escape dell'output HTML.

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

Le inclusioni vengono inserite in fase di esecuzione, quindi puoi utilizzare variabili per il percorso nella includechiamata (ad esempio <%- include(somePath) %>). Le variabili nell'oggetto dati di livello superiore sono disponibili per tutte le tue inclusioni, ma le variabili locali devono essere passate.

NOTA: le direttive Includi del preprocessore ( <% include user/show %>) sono ancora supportate.

Delimitatori personalizzati

I delimitatori personalizzati possono essere applicati in base al modello o a livello globale:

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'

Memorizzazione nella cache

EJS viene fornito con una cache in-process di base per memorizzare nella cache le funzioni JavaScript intermedie utilizzate per eseguire il rendering dei modelli. È facile collegare la cache LRU utilizzando la lru-cachelibreria di Node:

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

Se desideri svuotare la cache EJS, chiama ejs.clearCacheSe stai utilizzando la cache LRU e hai bisogno di un limite diverso, ripristina semplicemente ejs.cacheuna nuova istanza di LRU.

Caricatore di file personalizzato

Il caricatore di file predefinito è fs.readFileSync, se vuoi personalizzarlo, puoi impostare ejs.fileLoader.

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

Con questa funzione puoi preelaborare il modello prima di leggerlo.

Layout

EJS non supporta specificamente i blocchi, ma i layout possono essere implementati includendo intestazioni e piè di pagina, in questo modo:

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

Supporto lato client

Vai all'ultima versione , scarica ./ejs.jso ./ejs.min.js. In alternativa, puoi compilarlo tu stesso clonando il repository ed eseguendo jake build(o $(npm bin)/jake buildse jake non è installato a livello globale).

Includi uno di questi file nella tua pagina e ejsdovrebbe essere disponibile a livello globale.

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

La maggior parte di EJS funzionerà come previsto; tuttavia, ci sono alcune cose da notare:

  1. Obviously, poiché non hai accesso al filesystem, ejs.renderFile()non funzionerà.
  2. Per lo stesso motivo, includei s non funzionano a meno che non si utilizzi un include callback. Ecco un esempio:

    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

Codice VSC: Javascript EJS di DigitalBrainstem

Esistono numerose implementazioni di EJS:

Licenza

Concesso in licenza con la licenza Apache, versione 2.0 ( http://www.apache.org/licenses/LICENSE-2.0 )


Modelli JavaScript incorporati EJS copyright 2112 mde@fleegix.org.