EJS

Plantilles JavaScript incrustades

Instal·lació

1$ npm install ejs

Característiques

Control de flux amb<% %>
Sortida escapada amb <%= %>(funció d'escapament configurable)
Sortida en brut sense escapar amb<%- %>
Mode de retall de línia nova ('slurping de línia nova') amb -%>etiqueta final
Mode de retall d'espais en blanc (slurpeu tots els espais en blanc) per controlar el flux<%_ _%>
Delimitadors personalitzats (p. ex., utilitzar <? ?>en comptes de <% %>)
Inclou
Suport del costat del client
Emmagatzematge en memòria cau estàtic de JavaScript intermedi
Emmagatzematge en memòria cau estàtic de plantilles
Compleix amb el sistema de visualització Express

Exemple

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

Proveu EJS en línia a: https://ionicabizau.github.io/ejs-playground/ .

Ús

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

També és possible utilitzar ejs.render(dataAndOptions);on ho passes tot en un únic objecte. En aquest cas, acabaràs amb variables locals per a totes les opcions passades. No obstant això, tingues en compte que el teu codi es podria trencar si afegim una opció amb el mateix. nom com una de les propietats del vostre objecte de dades. Per tant, no us recomanem que utilitzeu aquesta drecera.

Opcions

cache Les funcions compilades s'emmagatzemen en memòria cau, requerintfilename
filename El nom del fitxer que s'està renderitzant. No és necessari si esteu utilitzant renderFile(). S'utilitza per clau cacheper a la memòria cau i per incloure.
root Estableix l'arrel del projecte per a les inclusions amb una ruta absoluta (/file.ejs).
context Context d'execució de funcions
compileDebug Quan falseno es compila cap instrumentació de depuració
client Quan true, compila una funció que es pot representar al navegador sense necessitat de carregar l'EJS Runtime ( ejs.min.js ).
delimiter Caràcter per utilitzar amb suports angulars per obrir/tancar
debug Cos de la funció generada de sortida
strict Quan s'estableix a true, la funció generada està en mode estricte
_with Si s'han d'utilitzar with() {}construccions o no. Si falsealeshores, els locals s'emmagatzemaran a l' localsobjecte. S'estableix falseen mode estricte.
localsName Nom que s'ha d'utilitzar per a l'objecte que emmagatzema variables locals quan no s'utilitza withPer defectelocals
rmWhitespace Elimineu tots els espais en blanc que es poden eliminar de manera segura, inclosos els espais en blanc inicials i finals. També permet una versió més segura de -%>les etiquetes de scriptlet (no elimina les noves línies d'etiquetes al mig d'una línia).
escape La funció d'escapament que s'utilitza amb <%=la construcció. S'utilitza en la representació i s'utilitza .toString()en la generació de funcions de client (per defecte escapa XML).
outputFunctionName Estableix una cadena (per exemple, 'eco' o 'imprimir') per a una funció per imprimir la sortida dins d'etiquetes de scriptlet.

Aquest projecte utilitza JSDoc . Per a la documentació pública completa de l'API, cloneu el repositori i executeu npm run doc. Això executarà JSDoc amb les opcions adequades i enviarà la documentació a out/. Si voleu la documentació de l'API pública i privada, executeu- npm run devdocla.

Etiquetes

<% Etiqueta 'Scriptlet', per al flux de control, sense sortida
<%_ L'etiqueta d'scriptlet 'Whitspace Slurping' elimina tots els espais en blanc que hi ha abans
<%= Emet el valor a la plantilla (s'ha escapat)
<%- Emet el valor sense escapar a la plantilla
<%# Etiqueta de comentari, sense execució, sense sortida
<%% Emet un literal '<%'
%%> Emet un literal '%>'
%> Etiqueta de final senzilla
-%> Etiqueta de mode de retall ('slurp de línia nova'), retalla després de la nova línia
_%> L'etiqueta de finalització 'Slurping d'espais en blanc' elimina tots els espais en blanc que hi ha després

Per obtenir la documentació completa de la sintaxi, consulteudocs/syntax.md.

Inclou

Les inclusions han de ser una ruta absoluta o, si no, s'assumeixen com a relatives a la plantilla amb la includetrucada. Per exemple, si incloeu ./views/user/show.ejsde, ./views/users.ejsutilitzareu <%- include('user/show') %>.

Heu d'especificar l' filenameopció per a la plantilla amb la include trucada tret que feu servir renderFile().

És probable que vulgueu utilitzar l'etiqueta de sortida en brut ( <%-) amb la vostra inclusió per evitar que s'escapi doblement la sortida HTML.

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

Les inclusions s'insereixen en temps d'execució, de manera que podeu utilitzar variables per a la ruta de la includetrucada (per exemple <%- include(somePath) %>). Les variables del vostre objecte de dades de nivell superior estan disponibles per a totes les vostres inclusions, però les variables locals s'han de transmetre.

NOTA: Les directives de preprocessador d'inclusió ( <% include user/show %>) encara són compatibles.

Delimitadors personalitzats

Els delimitadors personalitzats es poden aplicar per plantilla o globalment:

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'

Emmagatzematge a la memòria cau

EJS s'envia amb una memòria cau bàsica en procés per emmagatzemar a la memòria cau les funcions JavaScript intermèdies que s'utilitzen per representar plantilles. És fàcil connectar la memòria cau LRU mitjançant la lru-cachebiblioteca de Node:

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

Si voleu esborrar la memòria cau de l'EJS, truqueu a ejs.clearCache. Si utilitzeu la memòria cau de l'LRU i necessiteu un límit diferent, simplement restabliu ejs.cacheuna instància nova de la LRU.

Carregador de fitxers personalitzat

El carregador de fitxers per defecte és fs.readFileSync, si el voleu personalitzar, podeu configurar ejs.fileLoader.

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

ejs.fileLoader = myFileLoad;

Amb aquesta funció, podeu preprocessar la plantilla abans de llegir-la.

Dissenys

EJS no admet específicament blocs, però els dissenys es poden implementar incloent capçaleres i peus de pàgina, com ara:

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

Suport del costat del client

Aneu a la darrera versió , descarregueu- ./ejs.jslo o ./ejs.min.js, com a alternativa, podeu compilar-lo vosaltres mateixos clonant el repositori i executant-lo jake build(o $(npm bin)/jake buildsi jake no està instal·lat globalment).

Incloeu un d'aquests fitxers a la vostra pàgina i ejshauria d'estar disponible a tot el món.

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 majoria d'EJS funcionarà com s'esperava; tanmateix, cal tenir en compte algunes coses:

Obviously, com que no teniu accés al sistema de fitxers, ejs.renderFile()no funcionarà.

Per la mateixa raó, includes no funcionen tret que feu servir un include callback. Aquí teniu un exemple:

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 de DigitalBrainstem

Hi ha diverses implementacions d'EJS:

Implementació de TJ, la v1 d'aquesta biblioteca: https://github.com/tj/ejs
EJS de Jupiter Consulting: http://www.embeddedjs.com/
EJS Embedded JavaScript Framework a Google Code: https://code.google.com/p/embeddedjavascript/
Implementació Ruby de Sam Stephenson: https://rubygems.org/gems/ejs
Erubis, una implementació ERB que també executa JavaScript: http://www.kuwata-lab.com/erubis/users-guide.04.html#lang-javascript
Suport de l'idioma DigitalBrainstem EJS: https://github.com/Digitalbrainstem/ejs-grammar

llicència

Amb llicència sota la llicència Apache, versió 2.0 ( http://www.apache.org/licenses/LICENSE-2.0 )

Plantilles JavaScript incrustats d'EJS copyright 2112 mde@fleegix.org.

Guia de desenvolupament

Mòdul bàsic

objectes incorporats

mòdul comunitari

EJS

Instal·lació

Característiques

Exemple

Ús

Opcions

Etiquetes

Inclou

Delimitadors personalitzats

Emmagatzematge a la memòria cau

Carregador de fitxers personalitzat

Dissenys

Suport del costat del client

Example

Caveats

IDE Integration with Syntax Highlighting

llicència

Guia de desenvolupament

Mòdul bàsic

objectes incorporats

mòdul comunitari

EJS

Instal·lació

Característiques

Exemple

Ús

Opcions

Etiquetes

Inclou

Delimitadors personalitzats

Emmagatzematge a la memòria cau

Carregador de fitxers personalitzat

Dissenys

Suport del costat del client

Example

Caveats

IDE Integration with Syntax Highlighting

Projectes relacionats

llicència