Потрясающий модуль сообщества

ЭДЖС

Встроенные шаблоны JavaScript

Статус сборки Разработка зависимостей Известные уязвимости

Монтаж

1
$ npm install ejs

Функции

  • Управляйте потоком с помощью<% %>
  • Экранированный вывод с <%= %>(настраиваемая функция escape)
  • Неэкранированный необработанный вывод с<%- %>
  • Режим обрезки новой строки («перенос строки») с -%>закрывающим тегом
  • Режим обрезки пробелов (проглатывание всех пробелов) для потока управления с помощью<%_ _%>
  • Пользовательские разделители (например, используйте <? ?>вместо <% %>)
  • Включает
  • Поддержка на стороне клиента
  • Статическое кеширование промежуточного JavaScript
  • Статическое кэширование шаблонов
  • Соответствует системе экспресс- просмотра .

Пример

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

Попробуйте EJS онлайн по адресу: https://ionicabizau.github.io/ejs-playground/ .

Применение

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 });

Также возможно использовать вариант ejs.render(dataAndOptions);, когда вы передаете все в одном объекте. В этом случае вы получите локальные переменные для всех переданных параметров. Однако имейте в виду, что ваш код может сломаться, если мы добавим параметр с тем же name в качестве одного из свойств вашего объекта данных. Поэтому мы не рекомендуем использовать этот ярлык.

Параметры

  • cache Скомпилированные функции кэшируются, что требуетfilename
  • filename Имя визуализируемого файла. Не требуется, если вы используете renderFile(). Используется cacheдля ключевых кэшей и для включения.
  • root Установите корень проекта для включений с абсолютным путем (/file.ejs).
  • context Контекст выполнения функции
  • compileDebug Когда falseне компилируется инструментарий отладки
  • client When true, компилирует функцию, которую можно отобразить в браузере без необходимости загрузки среды выполнения EJS ( ejs.min.js ).
  • delimiter Символ для использования с угловыми скобками для открытия/закрытия
  • debug Вывод сгенерированного тела функции
  • strict Если установлено значение true, сгенерированная функция находится в строгом режиме.
  • _with Использовать или нет with() {}конструкции. Если falseтогда локальные значения будут храниться в localsобъекте. Установите falseв строгом режиме.
  • localsName Имя, которое будет использоваться для объекта, хранящего локальные переменные, если не используются withзначения по умолчанию дляlocals
  • rmWhitespace Удалите все безопасные для удаления пробелы, включая начальные и конечные пробелы. Это также обеспечивает более безопасную версию -%>проглатывания строк для всех тегов скриптлета (он не удаляет новые строки тегов в середине строки).
  • escape Экранирующая функция, используемая с <%=конструкцией. Она используется при рендеринге и используется .toString()при генерации клиентских функций. (По умолчанию экранирует XML).
  • outputFunctionName Установите строку (например, «echo» или «print») для функции печати вывода внутри тегов скриптлета.

В этом проекте используется JSDoc . Чтобы получить полную общедоступную документацию по API, клонируйте репозиторий и запустите npm run doc. Это запустит JSDoc с соответствующими параметрами и выведет документацию в файл out/. Если вам нужны как публичная, так и частная документация по API, запустите npm run devdocвместо этого.

Теги

  • <% Тег «Scriptlet», для потока управления, без вывода
  • <%_ Тег скриптлета «Whitespace Slurping», удаляет все пробелы перед ним
  • <%= Выводит значение в шаблон (экранировано)
  • <%- Выводит неэкранированное значение в шаблон
  • <%# Тег комментария, без выполнения, без вывода
  • <%% Выводит литерал '<%'
  • %%> Выводит литерал '%>'
  • %> Простой закрывающий тег
  • -%> Тег режима обрезки («новая строка»), обрезка после новой строки
  • _%> Конечный тег «Whitespace Slurping», удаляет все пробелы после него.

Полную документацию по синтаксису см.docs/syntax.md.

Включает

Включения либо должны быть абсолютным путем, либо, если нет, предполагается, что они относятся к шаблону с вызовом include. Например, если вы включаете ./views/user/show.ejsfrom, ./views/users.ejsвы должны использовать <%- include('user/show') %>.

Вы должны указать filenameопцию для шаблона при include вызове, если вы не используете renderFile().

Вероятно, вы захотите использовать тег необработанного вывода ( <%-) с включением, чтобы избежать двойного экранирования вывода HTML.

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

Включения вставляются во время выполнения, поэтому вы можете использовать переменные для пути в вызове include(например <%- include(somePath) %>, ). Переменные в вашем объекте данных верхнего уровня доступны всем вашим включениям, но необходимо передать локальные переменные.

ПРИМЕЧАНИЕ. Директивы препроцессора включения ( <% include user/show %>) по-прежнему поддерживаются.

Пользовательские разделители

Пользовательские разделители можно применять для каждого шаблона или глобально:

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'

Кэширование

EJS поставляется с базовым внутрипроцессным кэшем для кэширования промежуточных функций JavaScript, используемых для рендеринга шаблонов. Кеширование LRU легко подключить с помощью lru-cacheбиблиотеки Node:

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

Если вы хотите очистить кеш EJS, позвоните ejs.clearCache. Если вы используете кеш LRU и вам нужен другой лимит, просто выполните сброс ejs.cacheдо нового экземпляра LRU.

Пользовательский загрузчик файлов

Загрузчик файлов по умолчанию fs.readFileSync: если вы хотите настроить его, вы можете установить ejs.fileLoader.

1 2 3 4 5 6
let ejs = require('ejs'); let myFileLoad = function (filePath) { return 'myFileLoad: ' + fs.readFileSync(filePath); }; ejs.fileLoader = myFileLoad;

Благодаря этой функции вы можете предварительно обработать шаблон перед его чтением.

Макеты

EJS специально не поддерживает блоки, но макеты можно реализовать, включая верхние и нижние колонтитулы, например:

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

Поддержка на стороне клиента

Перейдите к Latest Release , загрузите ./ejs.jsили ./ejs.min.jsАльтернативно вы можете скомпилировать его самостоятельно, клонировав репозиторий и запустив jake build(или $(npm bin)/jake buildесли jake не установлен глобально).

Включите один из этих файлов на свою страницу, и он ejsдолжен быть доступен по всему миру.

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

Большая часть EJS будет работать как положено, однако следует отметить несколько моментов:

  1. Obviously, поскольку у вас нет доступа к файловой системе, ejs.renderFile()это не сработает.
  2. По той же причине includes не работает, если вы не используете include callback.Вот пример:

    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 от DigitalBrainstem

Существует несколько реализаций EJS:

Лицензия

Лицензия Apache версии 2.0 ( http://www.apache.org/licenses/LICENSE-2.0 ).


Авторские права на шаблоны встроенного JavaScript EJS: 2112 mde@fleegix.org.