# EJS 介绍
EJS 是一套的模板语言, 是 "Embedded JavaScript" 的缩写, 通过在 HTML 文件内嵌入 JavaScript 代码来进行 HTML 模板渲染。(用 JS 生成 HTML)
因为 EJS 支持直接在标签内书写简单、直白的 JavaScript 代码。所以可以让你在不破坏 HTML 文档结构的情况下, 使用 JS. 显著减少学习成本.
# 后端用法
先安装:
$ npm install ejs
在服务器代码上:
// 三种使用方法:
// data: 要传进去的数据, str: HTML 字符串
// 1.
let template = ejs.compile(str, options);
template(data);
// 2.
ejs.render(str, data, options);
// 3. filename 是文件名(路径),
ejs.renderFile(filename, data, options, function(err, str){
});
例子:
var ejs = require('ejs');
var data = "Hello World";
ejs.renderFile('views/index.ejs', {
msg: data
}, function(err, str) {
res.writeHead(200, {'Content-Type':'text/html'});
res.write(str);
res.end();
})
# 配置选项 option:
cache
缓存编译后的函数,需要提供filename
filename
被cache
参数用做键值,同时也用于 include 语句context
函数执行时的上下文环境compileDebug
当为false
时不编译调试语句client
返回独立的编译后的函数delimiter
放在角括号中的字符,用于标记标签的开与闭debug
将生成的函数体输出_with
是否使用with() {}
结构。如果为false
,所有局部数据将存储在locals
对象上。localsName
如果不使用with
,localsName
将作为存储局部变量的对象的名称。默认名称是locals
rmWhitespace
删除所有可安全删除的空白字符,包括开始与结尾处的空格。对于所有标签来说,它提供了一个更安全版本的-%>
(在一行的中间并不会剔除标签后面的换行符)。escape
为<%=
结构设置对应的转义(escape)函数。它被用于输出结果以及在生成的客户端函数中通过.toString()
输出。(默认转义 XML)。
# 前端用法
EJS 模板文件 用 .ejs
作为后缀名.
例子:
<body>
<h1><%= title %></h1>
<!-- 如果 hello 传进来了, 则在 <p> 标签中显示 -->
<% if(hello) { %>
<p><%= hello %></p>
<% } %>
</body>
模板中, <% %>
括起来的内容都会被编译成 Javascript, <%= %>
将括起来的变量名中的数据渲染到模板.
# 标签含义:
<%
'脚本' 标签,用于流程控制,无输出。<%_
删除其前面的空格符<%=
输出数据到模板(输出是转义 HTML 标签)<%-
输出非转义的数据到模板<%#
注释标签,不执行、不输出内容<%%
输出字符串 '<%'%>
一般结束标签-%>
删除紧随其后的换行符_%>
将结束标签后面的空格符删除
用 <%=...%>
输出变量,变量若包含 '<' '>' '&'等字符会被转义, 如果不希望变量值的内容被转义,那就这么用 <%-... %>
输出变量
# 包含 include:
通过 include
指令将相对于模板路径中的模板片段包含进来。
例如,如果存在 "./views/users.ejs"
和 "./views/user/show.ejs"
两个模板文件,你可以通过 <%- include('user/show'); %>
代码包含后者。
你可能需要能够输出原始内容的标签 (<%-) 用于 include
指令,避免对输出的 HTML 代码做转义处理。
<ul>
<% users.forEach(function(user){ %>
<%- include('user/show', {user: user}); %>
<% }); %>
</ul>
# 实例代码:
# for:
<% for(var i = 0; i < list.length; i++) { %>
<% var user = list[i]; %>
<tr>
<td><%= user.name %></td>
<td><%= user.age %></td>
</tr>
<% } %>
# if:
<% if(hello) { %>
<p><%= hello %></p>
<% } %>
<% if (x === 1) { %>
<p>Hello world!</p>
<% } else if (x === 2) { %>
<p>Hi earth!</p>
<% } else { %>
<p>Hey terra!</p>
<% } %>
# swith:
<% switch (role) { %>
<% case 'Admin' : %>
<p>Super Admin</p>
<% break; %>
<% case 'eventAdmin' : %>
<p>Event Admin</p>
<% break; %>
<% case 'subAdmin' : %>
<p>Sub Admin</p>
<% break; %>
<% } %>