EJS 模板引擎

精选 EJS 模板引擎 常用指令与核心速查备忘单,涵盖高频用法、配置参数与实用技巧。

<%# 这是 EJS 多行注释。
    它可以跨越多行,
    但绝对不会被输出展示在
    最终渲染生成的 HTML 中。
%>

#常用核心 API 方法 (Method)

let ejs = require('ejs');
let template = ejs.compile(str, options);

template(data);
// => 返回渲染后的 HTML 字符串

ejs.render(str, data, options);
// => 返回渲染后的 HTML 字符串

ejs.renderFile(filename, data, options, function (err, str) {
  // str => 返回渲染后的 HTML 字符串
});

#引入/嵌套其他模板 (Including Files)

<%- include('partials/navbar.ejs') %>

带数据参数引入子模板:

<% include('header', { title: 'My Page' }) %>

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

要包含/引入子模板,必须提供文件名选项,且相对路径生效。

#详细使用指南 (Docs)

#条件分支控制 (Conditionals)

<% if (userLoggedIn) { %>
  <p>Welcome, <%= username %>!</p>
<% } else { %>
  <p>Please log in.</p>
<% } %>

#循环遍历 (Using Loops)

<ul>
  <% for(i=0; i < users.length; i++) { %>
    <li><%= users[i].username %></li>
  <% } %>
</ul>

#自定义分隔符 (Custom Delimiters)

let ejs = require('ejs'),
  users = ['geddy', 'neil', 'alex'];

// 针对单个模板自定义
ejs.render('<?= users.join(" | "); ?>', { users: users }, { delimiter: '?' });
// => 'geddy | neil | alex'

// 全局全局设置
ejs.delimiter = '$';
ejs.render('<$= users.join(" | "); $>', { users: users });
// => 'geddy | neil | alex'

#缓存优化 (Caching)

let ejs = require('ejs'),
  LRU = require('lru-cache');

// 设置容量为 100 项的 LRU 缓存
ejs.cache = LRU(100);

#自定义文件加载器 (Custom File Loader)

let ejs = require('ejs');
let myFileLoader = function (filePath) {
  return 'myFileLoader: ' + fs.readFileSync(filePath);
};

ejs.fileLoader = myFileLoader;

#布局与模板套用 (Layouts)

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

#客户端浏览器支持 (Client-side)

#客户端渲染示例

<div id="output"></div>
<script src="ejs.min.js"></script>
<script>
  let people = ['geddy', 'neil', 'alex'],
    html = ejs.render('<%= people.join(", "); %>', { people: people });
  // 使用 jQuery 渲染:
  $('#output').html(html);
  // 原生 JavaScript 渲染:
  document.getElementById('output').innerHTML = html;
</script>

#注意事项与回调 (Caveats)

let str = "Hello <%= include('file', {person: 'John'}); %>",
  fn = ejs.compile(str, { client: true });

// include 回调函数
fn(data, null, function (path, d) {
  // path -> 'file'
  // d -> {person: 'John'}
  // 此处编写您的代码
  // 返回文件内容的字符串
}); // 返回渲染后的字符串

#⚙️ 选项参数

#⚙️ 选项参数列表 (Options List)

选项参数 详细含义与功能说明
cache 是否缓存编译后的函数,需要配合 filename 选项使用
filename 用于缓存机制的键名 key,以及解析 include 相对路径时的基准
root 为带绝对路径的 include 包含(如 /file.ejs)设置项目根目录,可以是一个包含多个目录路径的数组
views 解析相对路径 include 时使用的查找路径目录数组
context 函数执行时的上下文绑定作用域(即 this
compileDebug 当设为 false 时,不会编译调试插桩代码,可提升运行性能
client 设为 true 时,返回可独立在浏览器运行的已编译客户端函数
delimiter 模板内部使用的自定义分隔符字符,默认为 %
openDelimiter 开启标签的自定义分隔符字符,默认为 <
closeDelimiter 关闭标签的自定义分隔符字符,默认为 >
debug 是否打印输出生成的函数体调试代码
strict 设为 true 时,在严格模式 (Strict Mode) 下运行生成的 JavaScript 函数
_with 是否使用 with() {} 结构。如果为 false,局部变量将存储在 locals 对象中(隐式开启 --strict
localsName 不使用 with 时存储局部变量的对象名称,默认为 locals
rmWhitespace 移除所有可安全移除的空白字符(包括首尾空白),同时为所有脚本标签开启更安全的 -%> 换行剥离模式
escape <%= 结构使用的转义函数,在渲染和生成客户端函数 .toString() 时调用(默认转义 XML/HTML)
outputFunctionName 设为指定字符串(如 'echo' 或 'print'),用于在脚本块标签内直接打印输出
async 设为 true 时,EJS 将使用 async 异步函数进行渲染(需要 JS 运行时支持 async/await)

#模板标签 (Tags)

#标签语法列表 (Tags List)

标签语法 详细功能说明
<% '脚本控制' 标签,用于条件/循环控制流,无输出
<%_ '消除左侧空白' 脚本标签,清除该标签前的所有空白字符
<%= 将变量值输出至模板中(经过 HTML 转义)
<%- 将未转义的原始变量值输出至模板中
<%# 注释标签,不执行代码,不产生输出
<%% 输出字面量 <% 字符
%> 普通闭合结束标签
-%> 修剪模式标签,移除紧随其后的换行符
_%> '消除右侧空白' 闭合标签,移除该标签后的所有空白字符

#CLI 命令行参数

#CLI 参数列表 (CLI List)

参数选项 详细含义与功能说明
cache 缓存编译后的函数,需要同时指定 filename
-o / --output-file FILE 将渲染输出写入 FILE 文件中,而非直接输出至控制台 stdout
-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 时,在严格模式下生成 JavaScript 函数
-n / --no-with 使用 locals 对象存储变量而非 with 结构(隐式开启 --strict)
-l / --locals-name 不使用 with 时存储局部变量的对象名称
-w / --rm-whitespace 移除所有安全可移除的空白字符,包含首尾前导与后缀空白
-d / --debug 输出生成的函数体调试代码
-h / --help 显示命令行帮助信息
-V / -v / --version 显示 EJS 的版本号

命令行使用示例:

$ 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