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

EJS

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

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

Установка

1
$ npm install ejs

Функции

  • Поток управления с <% %>
  • Экранированный вывод с <%= %>(настраиваемая функция escape)
  • Неэкранированный исходный вывод с <%- %>
  • Режим обрезки новой строки ('прихлебывание новой строки') с -%>конечным тегом
  • Режим обрезки пробелов (удаление всех пробелов) для потока управления с помощью <%_ _%>
  • Пользовательские разделители (например, использовать <? ?>вместо <% %>)
  • Включает в себя
  • Клиентская поддержка
  • Статическое кеширование промежуточного 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);где вы передаете все в одном объекте. В этом случае вы получите локальные переменные для всех переданных параметров. Однако имейте в виду, что ваш код может сломаться, если мы добавим параметр с тем же name как одно из свойств вашего объекта данных, поэтому мы не рекомендуем использовать этот ярлык.

Параметры

  • cache Скомпилированные функции кэшируются, требуется filename
  • filename Имя обрабатываемого файла. Не требуется, если вы используете renderFile(). Используется cacheдля ключевых кешей и для включений.
  • root Задайте корневой каталог проекта для включений с абсолютным путем (/file.ejs).
  • context Контекст выполнения функции
  • compileDebug Когда falseне скомпилирован инструментарий отладки
  • client Когда 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 удаляет все пробелы перед ним
  • <%= Выводит значение в шаблон (с экранированием)
  • <%- Выводит неэкранированное значение в шаблон
  • <%# Тег комментария, без выполнения, без вывода
  • <%% Выводит литерал '<%'
  • %%> Выводит буквальный "%>"
  • %> Обычный конечный тег
  • -%> Тег Trim-mode ('newline slurp'), обрезает после новой строки
  • _%> Конечный тег Whitespace Slurping, удаляет все пробелы после него

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

Включает в себя

Включаемые должны быть либо абсолютным путем, либо, если нет, предполагаются относительно шаблона с includeвызовом.Например, если вы включаете ./views/user/show.ejsот, ./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 ( <% 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. По той же причине 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 License, версия 2.0 ( http://www.apache.org/licenses/LICENSE-2.0 )


EJS Встроенные шаблоны JavaScript, авторское право 2112 mde@fleegix.org .