0% encontró este documento útil (0 votos)
195 vistas10 páginas

Introducción a EJS: Plantillas JavaScript

EJS es un lenguaje de plantillas simple que permite generar marcado HTML con JavaScript simple. Usa etiquetas como <% %> para insertar JavaScript y mostrar datos. Se compila rápidamente a JavaScript puro para un rendimiento óptimo. Es fácil de usar, depurar y extender, y tiene una comunidad activa de desarrolladores.

Cargado por

ojperez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
195 vistas10 páginas

Introducción a EJS: Plantillas JavaScript

EJS es un lenguaje de plantillas simple que permite generar marcado HTML con JavaScript simple. Usa etiquetas como <% %> para insertar JavaScript y mostrar datos. Se compila rápidamente a JavaScript puro para un rendimiento óptimo. Es fácil de usar, depurar y extender, y tiene una comunidad activa de desarrolladores.

Cargado por

ojperez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

27/3/23, 18:32 EJS -- Plantillas JavaScript incrustadas

EJS

(https://jakejs.com/)

<%= EJS
%>
Plantillas JavaScript integradas.

EMPEZAR

¿Qué es EJS?
¿Para qué sirve la "E"? "¿Incorporado?" Podría ser. ¿Qué tal "Eficaz", "Elegante" o simplemente "Fácil"?
EJS es un lenguaje de plantillas simple que le permite generar marcado HTML con JavaScript simple.
Ninguna religiosidad sobre cómo organizar las cosas. Sin reinvención de la iteración y el flujo de
control. Es simplemente JavaScript.

 Usar JavaScript simple

https://ejs.co 1/10
27/3/23, 18:32 EJS -- Plantillas JavaScript incrustadas

Nos encanta JavaScript. Es un lenguaje totalmente amigable. Todos los lenguajes de plantillas
EJS se convierten en Turing-completos. ¡Simplemente elimine al intermediario y use JS!

 Tiempo de desarrollo rápido


No pierda el tiempo y la atención descubriendo una nueva sintaxis arcana debido a la
'elegancia', o cómo preprocesar sus datos para que realmente se muestren correctamente.

 sintaxis sencilla
Código JavaScript en etiquetas de scriptlet sencillas y directas. ¡Simplemente escriba
JavaScript que emita el HTML que desea y haga el trabajo!

 Ejecución rápida
Todos sabemos lo rápido que se han vuelto V8 y los otros tiempos de ejecución de JavaScript.
EJS almacena en caché las funciones JS intermedias para una ejecución rápida.

 Fácil depuración
Es fácil depurar errores de EJS: sus errores son simples excepciones de JavaScript, con
números de línea de plantilla incluidos.

 desarrollo activo
EJS tiene una gran comunidad de usuarios activos y la biblioteca está en desarrollo activo.
Estaremos encantados de responder a sus preguntas o brindarle ayuda.

Características
 Compilación y renderizado rápidos

 Etiquetas de plantilla simples: <% %>

 Delimitadores personalizados (p. ej., use [? ?] en lugar de <% %>)

 La subplantilla incluye
 Se envía con CLI

https://ejs.co 2/10
27/3/23, 18:32 EJS -- Plantillas JavaScript incrustadas

 Tanto el servidor JS como el navegador son compatibles.


EJS  Almacenamiento en caché estático de JavaScript intermedio

 Caché estático de plantillas

 Cumple con el sistema de vista Express (http://expressjs.com)

Empezar
Instalar
Es fácil instalar EJS con NPM.

$ npm install ejs

Usar
Pase a EJS una cadena de plantilla y algunos datos. BOOM, tienes algo de HTML.

let ejs = require('ejs');

let people = ['geddy', 'neil', 'alex'];

let html = ejs.render('<%= people.join(", "); %>', {people: people

CLI
Aliméntalo con un archivo de plantilla y un archivo de datos, y especifica un archivo de salida.

ejs ./template_file.ejs -f data_file.json -o ./output.html

Compatibilidad con navegador


Descargue una compilación de navegador de la última versión
(https://github.com/mde/ejs/releases/latest) y utilícela en una etiqueta de secuencia de
comandos.

https://ejs.co 3/10
27/3/23, 18:32 EJS -- Plantillas JavaScript incrustadas

EJS<script src="ejs.js"></script>

<script>

let people = ['geddy', 'neil', 'alex'];

let html = ejs.render('<%= people.join(", "); %>', {people: peop


</script>

Documentos
Ejemplo
<% if (user) { %>

<h2><%= user.name %></h2>

<% } %>

Uso
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

});

Opciones
https://ejs.co 4/10
27/3/23, 18:32 EJS -- Plantillas JavaScript incrustadas

cache Las funciones compiladas se almacenan en caché, requiere filename


EJS filename Utilizado por cache cachés de claves y para inclusiones
root Establezca la raíz del proyecto para incluir con una ruta absoluta (por ejemplo,
/file.ejs). Puede ser una matriz para intentar resolver la inclusión de varios directorios.
views Una matriz de rutas para usar cuando se resuelven inclusiones con rutas
relativas.
context Contexto de ejecución de la función
compileDebug Cuando false no se compila instrumentación de depuración
client Devuelve una función compilada independiente
delimiter Carácter a usar para el delimitador interno, por defecto '%'
openDelimiter Carácter a usar para el delimitador de apertura, por defecto '<'
closeDelimiter Carácter a usar para el delimitador de cierre, por defecto '>'
debug Salidas generadas cuerpo de la función
strict Cuando se establece en `verdadero`, la función generada está en modo estricto
_with Si utilizar o no with() {} construcciones. Si false entonces los locales se
almacenarán en el locals objeto. (Implica `--estricto`)
localsName Nombre a usar para el objeto que almacena variables locales cuando no se
usan with valores predeterminados para locals
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 -
%> sorber líneas para todas las etiquetas de scriptlet (no elimina nuevas líneas de
etiquetas en medio de una línea).
escape La función de escape utilizada con <%= construct. Se utiliza en el renderizado y
se .toString() edita en la generación de funciones de cliente. (Por defecto escapa a
XML).
outputFunctionName Establézcalo en una cadena (p. ej., 'echo' o 'print' ) para que
una función imprima la salida dentro de las etiquetas de scriptlet.
async Cuando true , EJS utilizará una función asíncrona para la representación.
(Depende de la compatibilidad con async/await en el tiempo de ejecución de JS.

Etiquetas
<% Etiqueta 'Scriptlet', para flujo de control, sin salida
<%_ Etiqueta de scriptlet 'Borrado de espacios en blanco', elimina todos los espacios en
blanco anteriores
<%= Muestra el valor en la plantilla (HTML con escape)
<%- Envía el valor sin escape a la plantilla
<%# Etiqueta de comentario, sin ejecución, sin salida
<%% Produce un literal '<%'
%> Etiqueta final simple

https://ejs.co 5/10
27/3/23, 18:32 EJS -- Plantillas JavaScript incrustadas

-%> Etiqueta de modo de recorte ('slurp de nueva línea'), recortes después de la nueva
EJS línea
_%> Etiqueta final 'Borrar espacios en blanco', elimina todos los espacios en blanco
después de ella

Incluye
Las inclusiones son relativas a la plantilla con la include llamada. (Esto requiere la opción
'nombre de archivo'). Por ejemplo, si tiene "./views/users.ejs" y "./views/user/show.ejs", usaría
<%- include('user/show'); %> .

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

<ul>

<% users.forEach(function(user){ %>

<%- include('user/show', {user: user}); %>

<% }); %>

</ul>

CLI
EJS se envía con una interfaz de línea de comandos con todas las funciones. Las opciones son
similares a las que se utilizan en el código JavaScript:

cache Las funciones compiladas se almacenan en caché, requiere filename


-o / --output-file FILE
Escriba la salida renderizada en FILE en lugar de stdout.
-f / --data-file FILE
Debe tener formato JSON. Use la entrada analizada de FILE
como datos para renderizar.
-i / --data-input STRING
Debe tener formato JSON y codificación URI. Utilice la
entrada analizada de STRING como datos para la representación.
-m / --delimiter CHARACTER
Utilice CARÁCTER con corchetes angulares para
abrir/cerrar (por defecto en %).
-p / --open-delimiter CHARACTER
Use CARÁCTER en lugar del paréntesis angular
izquierdo para abrir.
-c / --close-delimiter CHARACTER
Use CARÁCTER en lugar de paréntesis de
ángulo recto para cerrar.
-s / --strict
Cuando se establece en `verdadero`, la función generada está en
modo estricto

https://ejs.co 6/10
27/3/23, 18:32 EJS -- Plantillas JavaScript incrustadas

-n / --no-with
Use el objeto 'locals' para vars en lugar de usar 'with' (implica --
EJS strict).
-l / --locals-name
Nombre a usar para el objeto que almacena variables locales
cuando no se usa `with`.
-w / --rm-whitespace
Elimine todos los espacios en blanco seguros de eliminar,
incluidos los espacios en blanco iniciales y finales.
-d / --debug
Salidas generadas cuerpo de la función
-h / --help
Muestre este mensaje de ayuda.
-V/v / --version
Muestra la versión de EJS.

Algunos ejemplos de uso:

$ ejs -p [ -c ] ./template_file.ejs -o ./output.html

$ ejs ./test/fixtures/user.ejs name=Lerxst

$ ejs -n -l _ ./some_template.ejs -f ./data_file.json

Delimitadores personalizados
Los delimitadores personalizados se pueden aplicar por plantilla o globalmente:

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 utilizadas para representar plantillas. Es fácil conectar el
almacenamiento en caché de LRU usando la biblioteca `lru-cache` de Node:

https://ejs.co 7/10
27/3/23, 18:32 EJS -- Plantillas JavaScript incrustadas

EJSlet ejs = require('ejs'),

LRU = require('lru-cache');

ejs.cache = LRU(100); // LRU cache with 100-item limit

Si desea borrar el caché de EJS, llame al ejs.clearCache . Si está utilizando 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 establecer ejs.fileLoader .

let ejs = require('ejs');

let myFileLoader = function (filePath) {

return 'myFileLoader: ' + fs.readFileSync(filePath);

};

ejs.fileLoader = myFileLoader;

Con esta característica, puede preprocesar la plantilla antes de leerla.

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

<%- include('header'); -%>

<h1>

Title

</h1>

<p>

My page

</p>

<%- include('footer'); -%>

Soporte del lado del cliente


Vaya a la última versión (https://github.com/mde/ejs/releases/latest) , descargue
./ejs.js o
./ejs.min.js . Alternativamente, puede compilarlo usted mismo clonando el repositorio y
ejecutándolo jake build (o $(npm bin)/jake build si jake no está instalado
globalmente).
https://ejs.co 8/10
27/3/23, 18:32 EJS -- Plantillas JavaScript incrustadas

Incluya uno de estos archivos en su página y ejs debería estar disponible globalmente
EJS
Ejemplo

<div id="output"></div>

<script src="ejs.min.js"></script>

<script>

let people = ['geddy', 'neil', 'alex'],

html = ejs.render('<%= people.join(", "); %>', {people: peop


// With jQuery:

$('#output').html(html);

// Vanilla JS:

document.getElementById('output').innerHTML = html;

</script>

Advertencias
La mayor parte de EJS funcionará como se esperaba; sin embargo, hay algunas cosas a tener
en cuenta:

1. Obviamente, dado que no tiene acceso al sistema de archivos, `ejs.renderFile` no


funcionará.
2. Por la misma razón, las inclusiones no funcionan a menos que utilice una devolución de
llamada de inclusión. Aquí hay un ejemplo:

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

Usando EJS con Express


Esta página Wiki de GitHub (https://github.com/mde/ejs/wiki/Using-EJS-with-Express)
explica varias formas de pasar las opciones de EJS a Express.

https://ejs.co 9/10
27/3/23, 18:32 EJS -- Plantillas JavaScript incrustadas

EJS

Apoyo
Desbordamiento de pila
(http://stackoverflow.com/questions/tagged/ejs)
Haga preguntas (http://stackoverflow.com/questions/ask) sobre problemas específicos a los
que se haya enfrentado, incluidos detalles sobre lo que está tratando de hacer exactamente.
Asegúrate de etiquetar tu pregunta con ejs . También puede leer las preguntas ejs existentes
(http://stackoverflow.com/questions/tagged/ejs) .

Problemas de GitHub
(https://github.com/mde/ejs/issues)
El rastreador de problemas (https://github.com/mde/ejs/issues) es el canal preferido para los
informes de errores, las solicitudes de funciones y el envío de solicitudes de incorporación de
cambios.

Licencia
EJS tiene licencia de Apache License, versión 2.0. Puede encontrar información aquí:
http://www.apache.org/licenses/ (http://www.apache.org/licenses/) .

EJS © 2112 Matthew Eernisse (http://twitter.com/mde) ::: Plantilla diseñada conpor Xiaoying Riley
(http://themes.3rdwavemedia.com)

https://ejs.co 10/10

También podría gustarte