Fantastico modulo comunitario

EJS

Modelli JavaScript incorporati

Stato build Sviluppare dipendenze Vulnerabilità note

Installazione

1
$ npm install ejs

Caratteristiche

  • Flusso di controllo con <% %>
  • Uscita di escape con <%= %> (funzione di escape configurabile)
  • Output grezzo senza escape con <%- %>
  • Modalità di taglio della nuova riga ('slurping della nuova linea') con tag -%> finale
  • Modalità di taglio degli spazi bianchi (slurp tutto lo spazio bianco) per il flusso di controllo con <%_ _%>
  • Custom delimiters (eg , utilizzare <? ?> Anziché <% %> )
  • include
  • Supporto lato client
  • Memorizzazione nella cache statica di JavaScript intermedio
  • Memorizzazione nella cache statica dei modelli
  • Conforme al sistema di visualizzazione Express

Esempio

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

Prova EJS online all'indirizzo: https://ionicabizau.github.io/ejs-playground/ .

uso

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, finirai con le variabili locali per tutte le opzioni passate. Tuttavia, tieni presente che il tuo codice potrebbe rompersi se aggiungiamo un'opzione con lo stesso nome di una delle proprietà dell'oggetto dati, pertanto non è consigliabile utilizzare questo collegamento.

Opzioni

  • cache funzioni compilate vengono memorizzate nella cache, richiede il filename
  • filename Il nome del file in fase di rendering. Non richiesto se si utilizza renderFile() . Utilizzato dalla cache per la cache nella cache delle chiavi e per le renderFile() .
  • root Imposta la root progetto per include con un percorso assoluto (/file.ejs).
  • context Contesto di esecuzione della funzione
  • compileDebug Quando false non viene compilata alcuna strumentazione di debug
  • client Se true , compila una funzione che può essere renderizzata nel browser senza dover caricare EJS Runtime ( ejs.min.js ).
  • delimiter Carattere da utilizzare con parentesi angolari per apertura / chiusura
  • debug Corpo funzione generato dall'output
  • strict Se impostato su true , la funzione generata è in modalità rigorosa
  • _with Se utilizzare o meno with() {} costrutti with() {} . Se false i locali verranno archiviati nell'oggetto locals . Impostato su false in modalità rigorosa.
  • localsName Nome da utilizzare per l'oggetto che memorizza le variabili locali quando non viene utilizzato with localsName predefiniti per i locals
  • rmWhitespace Rimuovi tutto lo spazio bianco sicuro da rimuovere, incluso lo spazio bianco iniziale e finale e consente anche una versione più sicura di -%> slurping di linea per tutti i tag scriptlet (non rimuove le nuove linee di tag nel mezzo di una riga).
  • escape La funzione di escape utilizzata con <%= costrutto Viene utilizzata per il rendering ed è .toString() nella generazione di funzioni client (per impostazione predefinita, .toString() XML).
  • outputFunctionName Impostato su una stringa (ad esempio, 'echo' outputFunctionName ') per una funzione per stampare l'output all'interno dei tag scriptlet.

Questo progetto utilizza JSDoc . Per la documentazione API pubblica completa, clonare il repository ed eseguire npm run doc . Questo eseguirà JSDoc con le opzioni appropriate e produrrà la documentazione in out/ . Se si desidera che i documenti API sia pubblici che privati, eseguire npm run devdoc invece npm run devdoc .

tag

  • <% Tag 'Scriptlet', per flusso di controllo, nessun output
  • <%_ Tag scriptlet 'Whitespace Slurping', rimuove tutti gli spazi bianchi prima di esso
  • <%= Emette il valore nel modello (con escape)
  • <%- Genera il valore senza caratteri di escape nel modello
  • <%# Tag commento, nessuna esecuzione, nessun output
  • <%% Emette letteralmente '<%'
  • %%> Produce letteralmente '%>'
  • %> Tag di fine semplice
  • -%> tag Trim-mode ('newline slurp'), taglia dopo newline
  • _%> Il tag di fine 'Whitespace Slurping', rimuove tutto lo spazio bianco dopo di esso

Per la documentazione completa sulla sintassi, consultare docs/syntax.md .

include

Le inclusioni devono essere un percorso assoluto o, in caso contrario, sono considerate relative al modello con la chiamata di include esempio se si include ./views/user/show.ejs da ./views/users.ejs userebbe <%- include('user/show') %> .

È necessario specificare l'opzione del filename per il modello con la chiamata include meno che non si usi renderFile() .

Probabilmente vorrai utilizzare il tag di output non elaborato ( <%- ) con la tua inclusione 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, pertanto è possibile utilizzare le variabili per il percorso nella chiamata include (ad esempio <%- include(somePath) %> ). Le variabili nell'oggetto dati di livello superiore sono disponibili per tutte le inclusioni, ma le variabili locali devono essere tramandati.

NOTA: le direttive Includi 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'

caching

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

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

Se vuoi cancellare la cache EJS, chiama ejs.clearCache Se stai usando la cache LRU e hai bisogno di un limite diverso, resetta semplicemente ejs.cache a una nuova istanza di LRU.

Caricatore di file personalizzato

Il caricatore di file predefinito è fs.readFileSync , se si desidera personalizzarlo, è possibile 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, è possibile 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 ./ejs.js versione , scarica ./ejs.js o ./ejs.min.js . In alternativa, puoi compilarlo clonando il repository ed eseguendo jake build (o $(npm bin)/jake build se jake non lo è installato a livello globale).

Includi uno di questi file nella tua pagina e ejs dovrebbe 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 , dato che non hai accesso al filesystem, ejs.renderFile() non funzionerà.
  2. Per lo stesso motivo, include s non funziona se non si utilizza 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

VSCode: Javascript EJS di DigitalBrainstem

Esistono diverse implementazioni di EJS:

Licenza

Licenza concessa in licenza Apache, Versione 2.0 ( http://www.apache.org/licenses/LICENSE-2.0 )


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