Удивительный модуль сообщества

EJS

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

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

установка

1
$ npm install ejs

черты

  • Поток управления с <% %> %% <% %>
  • Выход с выходом с <%= %> (функция выхода настраивается)
  • Неэкранированный сырой выход с <%- %>
  • Режим обрезки новой строки ('slurping новой строки') с -%> конечным тегом
  • Режим обрезки пробелов (отбрасывать все пробелы) для потока управления с <%_ _%>
  • Custom delimiters (eg , используйте <? ?> вместо <% %> %% <% %> )
  • включает
  • Клиентская поддержка
  • Статическое кеширование промежуточного JavaScript
  • Статическое кеширование шаблонов
  • Соответствует системе Express View

пример

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); где вы передаете все в одном объекте. В этом случае вы получите локальные переменные для всех переданных опций. Однако, имейте в виду, что ваш код может сломаться, если мы добавляем параметр с тем же именем, что и у одного из свойств вашего объекта данных, поэтому мы не рекомендуем использовать этот ярлык.

опции

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

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

Теги

  • Тег <% 'Scriptlet', для потока управления, нет вывода
  • Тег <%_ Scriptlet <%_ Whispace Slurping ', удаляет все пробелы перед ним
  • <%= Выводит значение в шаблон (экранированный)
  • <%- выводит неэкранированное значение в шаблон
  • <%# Тег комментария, без выполнения, без вывода
  • <%% Выводит литерал '<%'
  • %%> Выводит литерал '%>'
  • %> Простой конечный тег
  • -%> тег Trim-mode ('slurp newline'), обрезает после новой строки
  • _%> Конечный тег 'Whitespace Slurping', удаляет все пробелы после него

Для полной документации по синтаксису, пожалуйста, смотрите docs/syntax.md .

включает

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

Клиентская поддержка

Перейдите к последнему выпуску , скачайте ./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. По той же причине, include s не работают, если вы не используете 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 .