Fantastico modulo della community

EJS

Modelli JavaScript incorporati

Stato build Sviluppo di dipendenzeVulnerabilità note

Installazione

1
$ npm install ejs

Caratteristiche

  • Controllare il flusso con <% %>
  • Uscita con escape con <%= %> (funzione di escape configurabile)
  • Output raw senza caratteri di escape con <%- %>
  • Modalità newline-trim ('newline slurping') con -%> tag finale
  • Modalità di taglio degli spazi bianchi (elimina tutti gli spazi bianchi) per il flusso di controllo con <%_ _%>
  • Custom delimiters (eg , usa <? ?> Invece di <% %> )
  • 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 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 utilizzare 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 non funzionare se aggiungiamo un'opzione con lo stesso nome di una delle proprietà del tuo 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 stai usando renderFile() . Usato dalla cache per le cache delle chiavi e per include.
  • root Imposta la root progetto per gli 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 di cui è possibile eseguire il rendering nel browser senza la necessità di caricare il runtime EJS ( ejs.min.js ).
  • delimiter Carattere da utilizzare con le parentesi angolari per l'apertura / chiusura
  • debug Corpo della funzione generato dall'output
  • strict Quando impostato su true , la funzione generata è in modalità rigorosa
  • _with Indica se _with o meno with() {} costrutti with() {} . Se false le _with locali verranno memorizzate 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 su locals
  • rmWhitespace Rimuove tutti gli spazi bianchi sicuri da rimuovere, inclusi gli spazi rmWhitespace e finali, abilita anche una versione più sicura di -%> line slurping per tutti i tag dello scriptlet (non elimina le nuove righe dei tag nel mezzo di una riga).
  • escape La funzione di escaping utilizzata con <%= construct. Viene utilizzata nel rendering ed è .toString() nella generazione di funzioni client (per impostazione predefinita, .toString() XML).
  • outputFunctionName Impostato su una stringa (ad esempio, "echo" outputFunctionName " outputFunctionName ") per una funzione per stampare l'output all'interno dei tag dello 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 produrrà la documentazione in out/ . Se desideri sia la documentazione API pubblica che quella privata, esegui npm run devdoc invece npm run devdoc .

Tag

  • <% Tag 'Scriptlet', per flusso di controllo, nessun output
  • <%_ Il tag Scriptlet 'Whitespace Slurping', rimuove tutti gli spazi bianchi prima di esso
  • <%= il valore nel modello (con 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 '%>'
  • %> Tag finale semplice
  • -%> Tag Trim-mode ('newline slurp'), taglia dopo la nuova riga
  • _%> Tag finale 'Whitespace Slurping', rimuove tutti gli spazi dopo di esso

Per la documentazione completa della sintassi, vedere docs/syntax.md .

Include

Include o deve essere un percorso assoluto o, in caso contrario, viene considerato relativo al modello con la chiamata include . Ad esempio, se ./views/user/show.ejs da ./views/users.ejs userebbe <%- include('user/show') %> .

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

Probabilmente vorrai usare 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>

Gli include vengono inseriti in fase di esecuzione, quindi puoi utilizzare le variabili per il percorso nella chiamata include (ad esempio <%- include(somePath) %> ). Le variabili nell'oggetto dati di primo livello sono disponibili per tutti gli include, ma le variabili locali devono essere tramandate.

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

Delimitatori personalizzati

I delimitatori personalizzati possono essere applicati in base al modello o globalmente:

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, reimposta semplicemente ejs.cache su una nuova istanza della 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 ./ejs.js versione , scarica ./ejs.js o ./ejs.min.js . In alternativa, puoi compilarlo da solo 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 , poiché non hai accesso al filesystem, ejs.renderFile() non funzionerà.
  2. Per lo stesso motivo, gli include non funzionano a meno che non si utilizzi una 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 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 .