官网 ☞ https://ejs.bootcss.com/#docs
实例
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
用法
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 字符串
});
参数
cache
缓存编译后的函数,需要指定filename
filename
被cache
参数用做键值,同时也用于 include 语句context
函数执行时的上下文环境compileDebug
当值为false
时不编译调试语句client
返回独立的编译后的函数delimiter
放在角括号中的字符,用于标记标签的开与闭debug
将生成的函数体输出_with
是否使用with() {}
结构。如果值为false
,所有局部数据将存储在locals
对象上。localsName
如果不使用with
,localsName 将作为存储局部变量的对象的名称。默认名称是locals
rmWhitespace
删除所有可安全删除的空白字符,包括开始与结尾处的空格。对于所有标签来说,它提供了一个更安全版本的-%>
标签(在一行的中间并不会剔除标签后面的换行符)。escape
为<%=
结构设置对应的转义(escape)函数。它被用于输出结果以及在生成的客户端函数中通过.toString()
输出。(默认转义 XML)。outputFunctionName
设置为代表函数名的字符串(例如'echo'
或'print'
)时,将输出脚本标签之间应该输出的内容。async
当值为true
时,EJS 将使用异步函数进行渲染。(依赖于 JS 运行环境对 async/await 是否支持)
标签含义
<%
‘脚本’ 标签,用于流程控制,无输出。<%_
删除其前面的空格符<%=
输出数据到模板(输出是转义 HTML 标签)<%-
输出非转义的数据到模板<%#
注释标签,不执行、不输出内容<%%
输出字符串 ‘<%’%>
一般结束标签-%>
删除紧随其后的换行符_%>
将结束标签后面的空格符删除
包含(include)
通过 include
指令将相对于模板路径中的模板片段包含进来。(需要提供 ‘filename’ 参数。) 例如,如果存在 “./views/users.ejs” 和 “./views/user/show.ejs”
两个模板文件,你可以通过 <%- include('user/show'); %>
代码包含后者。
你可能需要能够输出原始内容的标签 (<%-
) 用于 include 指令,避免对输出的 HTML 代码做转义处理。
<ul>
<% users.forEach(function(user){ %>
<%- include('user/show', {user: user}); %>
<% }); %>
</ul>
自定义分隔符
可针对单个模板或全局使用自定义分隔符:
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'
缓存
EJS 附带了一个基本的进程内缓存,用于缓在渲染模板过程中所生成的临时 JavaScript 函数。 通过 Node 的 lru-cache
库可以很容易地加入 LRU 缓存:
let ejs = require('ejs'),
LRU = require('lru-cache');
ejs.cache = LRU(100); // 具有 100 条内容限制的 LRU 缓存
如果要清除 EJS 缓存,调用 ejs.clearCache
即可。如果你正在使用的是 LRU 缓存并且需要设置不同的限额,则只需要将 ejs.cache
重置为 一个新的 LRU 实例即可。
自定义文件加载器
默认的文件加载器是 fs.readFileSync
,如果你想要的自定义它, 设置ejs.fileLoader
即可。
let ejs = require('ejs');
let myFileLoader = function (filePath) {
return 'myFileLoader: ' + fs.readFileSync(filePath);
};
ejs.fileLoader = myFileLoad;
使用此功能,您可以在读取模板之前对其进行预处理。
布局(Layouts)
EJS 并未对块(blocks)提供专门的支持,但是可以通过 包含页眉和页脚来实现布局,如下所示:
<%- include('header'); -%>
<h1>
Title
</h1>
<p>
My page
</p>
<%- include('footer'); -%>
客户端支持
从latest release 链接下载 ./ejs.js
或 ./ejs.min.js
文件。或者,你可以 clone 这个仓库并
通过执行 jake build
自己编译(或者执行 $(npm bin)/jake build
,如果 jake 不是安装在全局环境的话)。
在页面中包含上面的任意一个文件,然后 ejs
就全局可用了
示例
<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 将会按照我们的预期运行; 但是, 仍然需要注意:
- 显然, 如果你没有文件系统的访问权限,
ejs.renderFile
将无法正常工作。 - 相同的原因, 除非为 include 设置一个回调函数,否则 include 无法正常工作。如下所示:
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