Impresionante módulo de comunidad

EJS

Plantillas de JavaScript incrustadas

Estado de compilación Dependencias en desarrollo Vulnerabilidades conocidas

Instalación

1
$ npm install ejs

Caracteristicas

  • Controle el flujo con <% %> %% <% %>
  • Salida escapada con <%= %> (función de escape configurable)
  • Producto bruto sin escapes con <%- %>
  • Modo de recorte de nueva línea ('slurping de nueva línea') con -%> etiqueta final
  • Modo de recorte de espacio en blanco (sorber todo el espacio en blanco) para controlar el flujo con <%_ _%>
  • Custom delimiters (eg . Custom delimiters (eg , Use <? ?> lugar de <% %> %% <% %> )
  • Incluye
  • Soporte del lado del cliente
  • Almacenamiento en caché estático de JavaScript intermedio
  • Almacenamiento en caché estático de plantillas
  • Cumple con el sistema de vista Express

Ejemplo

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

Pruebe EJS en línea en: 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 });

También es posible usar ejs.render(dataAndOptions); donde pasa todo en un solo objeto. En ese caso, terminará con variables locales para todas las opciones pasadas. Sin embargo, tenga en cuenta que su código podría romperse si agregamos una opción con el mismo nombre que una de las propiedades de su objeto de datos. Por lo tanto, no recomendamos utilizar este acceso directo.

Opciones

  • cache Las funciones compiladas se almacenan en caché, requiere filename
  • filename El nombre del archivo que se está representando. No es necesario si está utilizando renderFile() . Utilizado por el cache para renderFile() en cache y para incluir.
  • root Establecer root proyecto para incluye con una ruta absoluta (/file.ejs).
  • context Función contexto de ejecución
  • compileDebug Cuando false no se compila la instrumentación de depuración
  • client Cuando es true , compila una función que se puede representar en el navegador sin necesidad de cargar EJS Runtime ( ejs.min.js ).
  • delimiter Carácter para usar con paréntesis angulares para abrir / cerrar
  • debug Salida del cuerpo de la función generada
  • strict Cuando se establece en true , la función generada está en modo estricto
  • _with Si se _with o no with() {} construcciones with() {} . Si es false , los locales se almacenarán en el objeto locals . Se establece en false en modo estricto.
  • localsName Nombre para usar para el objeto que almacena variables locales cuando no se usa with valores predeterminados para locals
  • rmWhitespace Elimina todos los espacios en blanco seguros para eliminar, incluidos los espacios en blanco rmWhitespace y finales. También permite una versión más segura de -%> slurping de líneas para todas las etiquetas de scriptlet (no elimina las nuevas líneas de etiquetas en el medio de una línea).
  • escape La función de escape utilizada con <%= construct. Se utiliza en la representación y se .toString() en la generación de funciones de cliente. (Por defecto, escapa XML).
  • outputFunctionName establece en una cadena (por ejemplo, 'echo' o 'print') para que una función imprima la salida dentro de las etiquetas de scriptlet.

Este proyecto utiliza JSDoc . Para obtener la documentación API pública completa, clone el repositorio y ejecute npm run doc . Esto ejecutará JSDoc con las opciones adecuadas y generará la documentación para out/ . Si desea los documentos API públicos y privados, ejecute npm run devdoc en npm run devdoc lugar.

Etiquetas

  • Etiqueta <% 'Scriptlet', para flujo de control, sin salida
  • La etiqueta <%_ 'Whitespace Slurping' Scriptlet elimina todos los espacios en blanco antes
  • <%= Muestra el valor en la plantilla (escapado)
  • <%- Muestra el valor sin escape en la plantilla
  • <%# Etiqueta de comentario, sin ejecución, sin salida
  • <%% Produce un literal '<%'
  • %%> Muestra un literal '%>'
  • %> Etiqueta final simple
  • -%> etiqueta Trim-mode ('newline slurp'), recorta después de nueva línea
  • _%> Etiqueta de finalización 'Slurping de espacios en blanco', elimina todos los espacios en blanco después

Para obtener la documentación completa de la sintaxis, consulte docs/syntax.md .

Incluye

Las inclusiones tienen que ser una ruta absoluta o, si no, se asumen como relativas a la plantilla con la llamada de include . Por ejemplo, si incluye ./views/user/show.ejs de ./views/users.ejs usaría <%- include('user/show') %> .

Debe especificar la opción de filename para la plantilla con la llamada de include a menos que esté usando renderFile() .

Es probable que desee utilizar la etiqueta de salida sin formato ( <%- ) con su inclusión para evitar el doble escape de la salida HTML.

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

Las inclusiones se insertan en tiempo de ejecución, por lo que puede usar variables para la ruta en la llamada de include (por ejemplo <%- include(somePath) %> ). Las variables en su objeto de datos de nivel superior están disponibles para todas sus inclusiones, pero las variables locales necesita ser transmitido

NOTA: Las directivas de preprocesador de inclusión ( <% include user/show %> ) aún son compatibles.

Delimitadores personalizados

Los delimitadores personalizados se pueden aplicar por plantilla 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'

Almacenamiento en caché

EJS se entrega con un caché básico en proceso para almacenar en caché las funciones intermedias de JavaScript que se utilizan para renderizar plantillas. Es fácil conectar el almacenamiento en caché LRU utilizando la biblioteca lru-cache Node:

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

Si desea borrar el caché EJS, llame a ejs.clearCache . Si está utilizando el caché LRU y necesita un límite diferente, simplemente restablezca ejs.cache a una nueva instancia de LRU.

Cargador de archivos personalizado

El cargador de archivos predeterminado es fs.readFileSync , si desea personalizarlo, puede 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;

Con esta función, puede preprocesar la plantilla antes de leerla.

Diseños

EJS no admite bloques específicamente, pero los diseños se pueden implementar al incluir encabezados y pies de página, de esta manera:

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

Soporte del lado del cliente

Vaya a la última versión , descargue ./ejs.js o ./ejs.min.js . Alternativamente, puede compilarlo usted mismo clonando el repositorio y ejecutando jake build (o $(npm bin)/jake build si jake no es instalado a nivel mundial).

Incluya uno de estos archivos en su página, y los ejs deberían estar disponibles globalmente.

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 mayoría de los EJS funcionarán como se esperaba; sin embargo, hay algunas cosas a tener en cuenta:

  1. Obviously , dado que no tiene acceso al sistema de archivos, ejs.renderFile() no funcionará.
  2. Por la misma razón, los include s no funcionan a menos que use una include callback . Aquí hay un ejemplo:

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

Hay varias implementaciones de EJS:

Licencia

Licenciado bajo la Licencia Apache, Versión 2.0 ( http://www.apache.org/licenses/LICENSE-2.0 )


Plantillas JavaScript de EJS Embedded copyright 2112 mde@fleegix.org .