Módulo de comunidad impresionante

EJS

Plantillas de JavaScript incrustadas

Estado de la construcción Desarrollo de dependencias Vulnerabilidades conocidas

Instalación

1
$ npm install ejs

Características

  • Control de flujo con <% %>
  • Salida de <%= %>escape con (función de escape configurable)
  • Salida sin formato sin escape con <%- %>
  • Modo de recorte de nueva línea ('sorber de nueva línea') con -%>etiqueta de finalización
  • Modo de recorte de espacios en blanco (sorber todos los espacios en blanco) para controlar el flujo con <%_ _%>
  • Delimitadores personalizados (p. Ej., Utilizar en <? ?>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 name como 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á procesando. No es obligatorio si lo estás usando renderFile(). Se usa para cachepara claves de caché y para inclusiones.
  • root Establezca la raíz del proyecto para las inclusiones con una ruta absoluta (/file.ejs).
  • context Contexto de ejecución de la función
  • compileDebug Cuando falseno se compila la instrumentación de depuración
  • client Cuando 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
  • debug Cuerpo de la función generada por la salida
  • strict Cuando se establece en true, la función generada está en modo estricto
  • _with Si se utilizan o no with() {}construcciones. Si, falseentonces los locales se almacenarán en el localsobjeto. Se establece en falseen modo estricto.
  • localsName Nombre que se utilizará para el objeto que almacena variables locales cuando no se utilice withValores predeterminados paralocals
  • rmWhitespace Elimine todos los espacios en blanco seguros de eliminar, incluidos los espacios en blanco iniciales y finales. También permite una versión más segura de la -%>eliminación de líneas 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 utilizada con <%=construct. Se utiliza en la representación y se .toString()edita en la generación de funciones de cliente. (De forma predeterminada, se escapa de XML).
  • outputFunctionName Establezca una cadena (por ejemplo, 'echo' o 'print') para que una función imprima la salida dentro de las etiquetas scriptlet.

Este proyecto usa JSDoc . Para obtener la documentación completa de la API pública, clona el repositorio y ejecútalo npm run doc. Esto ejecutará JSDoc con las opciones adecuadas y generará la documentación en out/. Si quieres los documentos de la API pública y privada, ejecuta en su npm run devdoclugar.

Etiquetas

  • <% Etiqueta 'Scriptlet', para control de flujo, sin salida
  • <%_ Etiqueta Scriptlet 'Whitespace Slurping', elimina todos los espacios en blanco antes de ella
  • <%= Envía el valor a la plantilla (escapado)
  • <%- Envía el valor sin escape a la plantilla
  • <%# Etiqueta de comentario, sin ejecución, sin salida
  • <%% Genera un literal '<%'
  • %%> Produce un literal '%>'
  • %> Etiqueta final simple
  • -%> Etiqueta de modo de recorte ('newline slurp'), recortes 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 de sintaxis completa, consulte docs/syntax.md.

Incluye

Las inclusiones tienen que ser una ruta absoluta o, en caso contrario, se asume que son relativas a la plantilla con la includellamada. Por ejemplo, si está incluyendo ./views/user/show.ejsde ./views/users.ejs, utilizaría <%- include('user/show') %>.

Debe especificar la filenameopción para la plantilla con la include llamada a menos que esté utilizando 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 includellamada (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 deben transmitirse.

NOTA: <% include user/show %>Aún se admiten las directivas de preprocesador ( ).

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 las plantillas. Es fácil conectar el almacenamiento en caché de LRU utilizando 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 desea borrar la caché de EJS, llame ejs.clearCache. Si está usando la caché de LRU y necesita un límite diferente, simplemente reinicie ejs.cachea 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.jso ./ejs.min.js. Alternativamente, puede compilarlo usted mismo clonando el repositorio y ejecutándolo jake build(o $(npm bin)/jake buildsi jake no está instalado globalmente).

Incluya uno de estos archivos en su página y ejsdebería estar disponible a nivel mundial.

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, ya que no tiene acceso al sistema de archivos, ejs.renderFile()no funcionará.
  2. Por la misma razón, includelos mensajes de correo electrónico no funcionan a menos que use un 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 varias implementaciones de EJS:

Licencia

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


EJS Embedded JavaScript templates copyright 2112 mde@fleegix.org .