使用手册 Guide

Ejs特点,安装与使用方法

示例

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

用法

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

选项

  • cache 编译函数被缓存,需要 filename
  • filenamecache 用于密钥缓存,并用于包含
  • root 设置包含绝对路径的项目根目录(例如,/file.ejs)。 可以是数组以尝试解析来自多个目录的包含。
  • views 解析包含相对路径时使用的路径数组。
  • context 函数执行上下文
  • compileDebugfalse 时不编译任何调试工具
  • 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
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 函数。 使用 Node 的 `lru-cache` 库很容易插入 LRU 缓存:

js
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

js
let ejs = require('ejs');
let 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
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
翻到头了