ЭДЖС

Встроенные шаблоны 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 будет работать как положено, однако следует отметить несколько моментов:

Obviously, поскольку у вас нет доступа к файловой системе, ejs.renderFile()это не сработает.

По той же причине 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:

Реализация TJ, v1 этой библиотеки: https://github.com/tj/ejs
EJS компании Jupiter Consulting: http://www.embeddedjs.com/
EJS Embedded JavaScript Framework в коде Google: https://code.google.com/p/embeddedjavascript/
Реализация Ruby Сэма Стивенсона: https://rubygems.org/gems/ejs
Erubis, реализация ERB, которая также использует JavaScript: http://www.kuwata-lab.com/erubis/users-guide.04.html#lang-javascript
Поддержка языка DigitalBrainstem EJS: https://github.com/Digitalbrainstem/ejs-grammar

Лицензия

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

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

Руководство по разработке

Базовый модуль

встроенные объекты

модуль сообщества

ЭДЖС

Монтаж

Функции

Пример

Применение

Параметры

Теги

Включает

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

Кэширование

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

Макеты

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

Example

Caveats

IDE Integration with Syntax Highlighting

Лицензия

Руководство по разработке

Базовый модуль

встроенные объекты

модуль сообщества

ЭДЖС

Монтаж

Функции

Пример

Применение

Параметры

Теги

Включает

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

Кэширование

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

Макеты

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

Example

Caveats

IDE Integration with Syntax Highlighting

Связанные проекты

Лицензия