使用手册 Guide

Ejs特点，安装与使用方法

示例

html
<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

用法

js
const template = ejs.compile(str, options)
template(data)
// => Rendered HTML string

ejs.render(str, data, options)
// => Rendered HTML string

ejs.renderFile(filename, data, options, (err, str) => {
  // str => Rendered HTML string
})

选项

  • cache 编译函数被缓存，需要 filename
  • filename 由 cache 用于密钥缓存，并用于包含
  • root 设置包含绝对路径的项目根目录(例如，/file.ejs)。 可以是数组以尝试解析来自多个目录的包含。
  • views 解析包含相对路径时使用的路径数组。
  • context 函数执行上下文
  • compileDebug 当 false 时不编译任何调试工具
  • client 返回独立的编译函数
  • delimiter 用于内部定界符的字符，默认为“%”
  • openDelimiter 用于开始定界符的字符，默认为“<”
  • closeDelimiter 用于结束分隔符的字符，默认为“>”
  • debug 输出生成的函数体
  • strict 当设置为 true 时，生成的函数处于严格模式
  • _with 是否使用 with() {} 结构。 如果为 false，则局部变量将存储在 locals 对象中。 (暗示 --strict)
  • localsName 不使用 with 时用于存储局部变量的对象的名称 默认为 locals
  • rmWhitespace 删除所有可安全删除的空格，包括前导和尾随空格。 它还为所有 scriptlet 标签启用更安全的 -%> line slurping 版本(它不会在一行中间去除标签的新行)。
  • escape 与 <%= 结构一起使用的转义函数。 它用于渲染，并在客户端函数的生成中被 .toString() 编辑。 (默认转义 XML)。
  • outputFunctionName 设置为一个字符串(例如，'echo' 或 'print')用于在 scriptlet 标签内打印输出的函数。
  • async 当为 true 时，EJS 将使用异步函数进行渲染。 (取决于 JS 运行时中的异步/等待支持。

Tags

  • <% 'Scriptlet' 标签，用于控制流，无输出
  • <%_ ‘Whitespace Slurping’ Scriptlet 标签，去掉它前面的所有空格
  • <%= 将值输出到模板中(HTML 转义)
  • <%- 将未转义的值输出到模板中
  • <%# 注释标签，不执行，不输出
  • <%% 输出文字 '<%'
  • %> 普通结束标签
  • -%> Trim-mode ('newline slurp') 标签，在换行之后进行修剪
  • _%> ‘Whitespace Slurping’ 结束标签，删除它后面的所有空格

Includes

包含是相对于带有 include 调用的模板。 (这需要'文件名'选项。)例如，如果您有“./views/users.ejs”和“./views/user/show.ejs”，您将使用 <%- include('user/show' ); %>。

您可能希望将原始输出标记 (<%-) 与您的 include 一起使用，以避免对 HTML 输出进行双重转义。

html
<ul>
  <% users.forEach(function(user){ %>
    <%- include('user/show', {user: user}); %>
  <% }); %>
</ul>

CLI

EJS 附带一个全功能的命令行界面。 选项类似于 JavaScript 代码中使用的选项：

  • cache 编译函数被缓存，需要 filename
  • -o / --output-file FILE 将呈现的输出写入 FILE 而不是标准输出。
  • -f / --data-file FILE 必须是 JSON 格式。 使用来自 FILE 的解析输入作为渲染数据。
  • -i / --data-input STRING 必须是 JSON 格式和 URI 编码。 使用来自 STRING 的解析输入作为渲染数据。
  • -m / --delimiter CHARACTER 使用带尖括号的 CHARACTER 来打开/关闭(默认为 %)。
  • -p / --open-delimiter CHARACTER 使用 CHARACTER 而不是左尖括号打开。
  • -c / --close-delimiter CHARACTER 使用 CHARACTER 而不是右尖括号来关闭。
  • -s / --strict 当设置为 `true` 时，生成的函数处于严格模式
  • -n / --no-with 对 vars 使用 'locals' 对象而不是使用 `with`(隐含 --strict)。
  • -l / --locals-name 不使用 `with` 时用于存储局部变量的对象的名称。
  • -w / --rm-whitespace 删除所有可安全删除的空格，包括前导和尾随空格。
  • -d / --debug 输出生成的函数体
  • -h / --help 显示此帮助信息。
  • -V/v / --version 显示 EJS 版本。

一些使用示例：

bash
$ ejs -p [ -c ] ./template_file.ejs -o ./output.html
$ ejs ./test/fixtures/user.ejs name=Lerxst
$ ejs -n -l _ ./some_template.ejs -f ./data_file.json

自定义分隔符

可以在每个模板的基础上或全局应用自定义分隔符：

js
const ejs = require('ejs')
const users = ['geddy', 'neil', 'alex']

// Just one template
ejs.render('<?= users.join(" | "); ?>', { users }, { delimiter: '?' })
// => 'geddy | neil | alex'

// Or globally
ejs.delimiter = '$'
ejs.render('<$= users.join(" | "); $>', { users })
// => 'geddy | neil | alex'

缓存

EJS 附带一个基本的进程内缓存，用于缓存用于呈现模板的中间 JavaScript 函数。 使用 Node 的 `lru-cache` 库很容易插入 LRU 缓存：

js
const ejs = require('ejs')
const 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。

js
const ejs = require('ejs')
const myFileLoader = function (filePath) {
  return `myFileLoader: ${fs.readFileSync(filePath)}`
}

ejs.fileLoader = myFileLoader

使用此功能，您可以在阅读模板之前对其进行预处理。

布局

EJS 不特别支持块，但可以通过包含页眉和页脚来实现布局，如下所示：

html
<%- include('header'); -%>
<h1>
  Title
</h1>
<p>
  My page
</p>
<%- include('footer'); -%>

客户端支持

转到 最新版本，下载 ./ejs.js 或 ./ejs.min.js。

或者，您可以通过克隆存储库并运行 jake build(如果未全局安装 jake，则运行 $(npm bin)/jake build)自己编译它。

在您的页面上包含这些文件之一，并且“ejs”应该在全球范围内可用

例子

html
<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>

注意事项

大多数 EJS 将按预期工作； 但是，有几点需要注意：

  1. 显然，由于您无权访问文件系统，ejs.renderFile 将不起作用。
  2. 出于同样的原因，除非您使用包含回调，否则包含不起作用。 这是一个例子：
js
const str = 'Hello <%= include(\'file\', {person: \'John\'}); %>'
const fn = ejs.compile(str, { client: true })

fn(data, null, (path, d) => { // include callback
  // path -> 'file'
  // d -> {person: 'John'}
  // Put your code here
  // Return the contents of file as a string
}) // returns rendered string