Mòdul de comunitat impressionant

EJS

Plantilles de JavaScript incrustades

Estat de la compilació Desenvolupament de dependències Vulnerabilitats conegudes

Instal·lació

1
$ npm install ejs

Característiques

  • Controleu el flux amb <% %>
  • Sortida <%= %>escapada amb (funció d'escapada configurable)
  • Sortida en brut sense escapar amb <%- %>
  • Mode de retallada de línia nova ("llançament de línia nova") amb -%>etiqueta final
  • Mode de retall d'espai en blanc (buidar tot l'espai en blanc) per controlar el flux <%_ _%>
  • Delimitadors personalitzats (per exemple, utilitzeu <? ?>en lloc de <% %>)
  • Inclou
  • Assistència del client
  • Memòria cau estàtica de JavaScript intermedi
  • Memòria cau estàtica de plantilles
  • Compleix 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é es pot utilitzar ejs.render(dataAndOptions);on es passa tot en un sol objecte. En aquest cas, acabareu amb variables locals per a totes les opcions passades. Tanmateix, tingueu en compte que el vostre codi es podria trencar si hi afegim una opció amb el mateix. nom com una de les propietats de l'objecte de dades. Per tant, no us recomanem que utilitzeu aquesta drecera.

Opcions

  • cache Les funcions compilades es guarden a la memòria cau, requereix filename
  • filename El nom del fitxer que s'està representant. No és obligatori si el feu servir renderFile(). S'utilitza per cachea la memòria cau de claus i per a inclou.
  • root Estableix l'arrel del projecte per a inclou amb un camí d'accés absolut (/file.ejs).
  • context Context d'execució de funcions
  • compileDebug Quan falseno es compila cap instrumentació de depuració
  • client Quan truecompila una funció que es pot representar al navegador sense necessitat de carregar l'EJS Runtime ( ejs.min.js ).
  • delimiter Caràcter per utilitzar amb claudàtors per obrir / tancar
  • debug Cos de funció generada per la sortida
  • strict Quan s'estableix en true, la funció generada es troba en mode estricte
  • _with Si s'utilitzen o no with() {}construccions. Si falsellavors els locals es desaran a l' localsobjecte. Establiu-lo falseen mode estricte.
  • localsName Nom que cal utilitzar per a l'objecte que emmagatzema les variables locals quan no s'utilitza el withvalor predeterminat alocals
  • rmWhitespace Elimineu tots els espais en blanc que es puguin eliminar, inclosos els espais en blanc inicials i posteriors. També permet una versió més segura del -%>llistat de línies per a totes 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 .toString()s'edita en la generació de funcions de client. (Per defecte, s'escapa d'XML).
  • outputFunctionName Estableix una cadena (per exemple, "eco" o "imprimir") perquè una funció imprimeixi la sortida dins de les etiquetes de scriptlet.

Aquest projecte utilitza JSDoc . Per obtenir la documentació pública completa de l'API, cloneu el dipòsit i executeu-lo npm run doc. Això executarà JSDoc amb les opcions adequades i en mostrarà la documentació out/. Si voleu els documents tant de l'API pública com privada, executeu npm run devdoc-lo.

Etiquetes

  • <% Etiqueta "Scriptlet", per al flux de control, sense sortida
  • <%_ Etiqueta Scriptlet "Espai en blanc", elimina tots els espais en blanc que hi ha abans
  • <%= Ofereix el valor a la plantilla (escapada)
  • <%- Ofereix el valor no escapat a la plantilla
  • <%# Etiqueta de comentari, sense execució, sense sortida
  • <%% Emet un literal "<%"
  • %%> Emet un literal "%>"
  • %> Etiqueta final simple
  • -%> Etiqueta de mode de retallada ('newline slurp'), retallada després de newline
  • _%> L'etiqueta de finalització "Espai en blanc" elimina tot l'espai en blanc que hi ha després

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

Inclou

Inclou o bé han de ser una ruta absoluta, o, si no, se suposa que amb relació a la plantilla amb la includetrucada. Per exemple si està incloent ./views/user/show.ejsdes ./views/users.ejsque faria servir <%- include('user/show') %>.

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

És probable que vulgueu utilitzar l'etiqueta de sortida en brut ( <%-) amb la vostra inclusió per evitar la doble escapada de 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 al camí de la includetrucada (per exemple <%- include(somePath) %>). Les variables de l’objecte de dades de nivell superior estan disponibles per a totes les vostres inclusions, però cal transmetre les variables locals.

NOTA: <% include user/show %>Encara s'admeten les directrius de preprocessador ( ).

Delimitadors personalitzats

Els delimitadors personalitzats es poden aplicar per plantilla o de forma global:

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'

Memòria cau

EJS s'inclou amb una memòria cau bàsica en procés per emmagatzemar a la memòria cau les funcions JavaScript intermedies que s'utilitzen per representar plantilles. És fàcil connectar la memòria cau de 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 ejs.clearCache. Si utilitzeu la memòria cau de LRU i necessiteu un límit diferent, restableix ejs.cache-lo senzillament a una nova instància 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 blocs específicament, però es poden implementar dissenys 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') -%>

Assistència del client

Aneu a la versió més recent , descarregueu-la ./ejs.jso ./ejs.min.js. Alternativament, podeu compilar-la vosaltres mateixos clonant el dipòsit 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, però hi ha algunes coses a tenir en compte:

  1. Obviously, ja que no teniu accés al sistema de fitxers, ejs.renderFile()no funcionarà.
  2. Per la mateixa raó, includes no funciona tret que utilitzeu 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:

Llicència

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


Plantilles JavaScript incrustades EJS copyright 2112 mde@fleegix.org .