Módulo de comunidad impresionante

EJS

Plantillas de JavaScript integradas

Estado de construcción Desarrollo de dependencias Vulnerabilidades conocidas

Instalación

1
$ npm install ejs

Caracteristicas

  • Control de flujo con <% %>
  • Salida de escape con <%= %> (función de escape configurable)
  • Producción bruta sin escape con <%- %>
  • Modo de recorte de nueva línea ('slurping de nueva línea') con -%> etiqueta final
  • Modo de recorte de espacios en blanco (sorber todos los espacios en blanco) para controlar el flujo con <%_ _%>
  • Custom delimiters (eg . Custom delimiters (eg , Utilice <? ?> 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 Express View

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 que no recomendamos usar este acceso directo.

Opciones

  • cache Las funciones compiladas se almacenan en caché, requiere filename
  • filename El nombre del archivo que se está procesando. No es necesario si está utilizando renderFile() . Lo usa la cache para las cachés de claves y para las renderFile() .
  • root Establece la root proyecto para las inclusiones con una ruta absoluta (/file.ejs).
  • context contexto de ejecución de la función
  • compileDebug Cuando es 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 corchetes angulares para abrir / cerrar
  • Cuerpo de función generado de salida de debug
  • 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 . Establezca el valor en false en modo estricto.
  • localsName Nombre que se utilizará para el objeto que almacena variables locales cuando no se utilice 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 -%> line slurping para todas las etiquetas scriptlet (no elimina las nuevas líneas de etiquetas en el medio de una línea).
  • escape La función de escape usada con <%= construct. Se usa en la representación y es .toString() ed en la generación de funciones de cliente. (Por defecto, escapa de XML).
  • outputFunctionName establece en una cadena (por ejemplo, 'echo' outputFunctionName ' outputFunctionName ') para que una función imprima la salida dentro de las etiquetas scriptlet.

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

Etiquetas

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

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

Incluye

Las inclusiones deben ser una ruta absoluta o, en caso contrario, se asume que son 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 <% include user/show %> ( <% include user/show %> ) siguen siendo 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 envía con un caché en proceso básico para almacenar en caché las funciones intermedias de JavaScript que se utilizan para representar 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 la caché de EJS, llame a ejs.clearCache . Si está usando la caché de 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, así:

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 está instalado globalmente).

Incluya uno de estos archivos en su página y ejs debería estar disponible 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 EJS funcionará 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 mensajes de include 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 de DigitalBrainstem

Hay una serie de implementaciones de EJS:

Licencia

Con licencia de Apache License, versión 2.0 ( http://www.apache.org/licenses/LICENSE-2.0 )


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