模板引擎
1 模板引擎作用
1.1 作用
- 渲染产生HTML
- 替换HTML中的数据内容
- 通过模板引擎的模板继承功能或模版包含功能实现页面的复用(如页头,页脚等)
1.2 常见的模板引擎
- Ejs 模板引擎
- Jade 模板引擎
- swig 模板引擎
- handlerbar 模板引擎
2 Ejs模板引擎
2.1 使用
安装并导入
npm install ejs
const ejs = require('ejs')
渲染出HTML
ejs.render(str, data, options);
ejs.renderFile(filename, data, options, function(err, str){
});
const template = ejs.compile(str, options);
template(data);
选项
- cache 缓存编译后的函数,需要提供 filename
- filename 被 cache 参数用做键值,同时也用于 include 语句
- context 函数执行时的上下文环境
- compileDebug 当为 false 时不编译调试语句
- client 返回独立的编译后的函数
- delimiter 放在角括号中的字符,用于标记标签的开与闭
- debug 将生成的函数体输出
- _with 是否使用 with() {} 结构。如果为 false,所有局部数据将存储在 locals 对象上。
- localsName 如果不使用 with ,localsName 将作为存储局部变量的对象的名称。默认名称是 locals
- rmWhitespace 删除所有可安全删除的空白字符,包括开始与结尾处的空格。对于所有标签来说,它提供了一个更安全版本的 -%> (在一行的中间并不会剔除标签后面的换行符)。
- escape 为
<%=
结构设置对应的转义(escape)函数。它被用于输出结果以及在生成的客户端函数中通过 .toString() 输出。(默认转义 XML)。
2.2 模板语法
① 分隔符(定界符)
开始标签(定界符)
<%
'脚本' 标签,用于流程控制,无输出。
<%=
输出数据到模板(输出是转义 HTML 标签)
<%-
输出非转义的数据到模板
<%#
注释标签,不执行、不输出内容
结束标签(定界符)
② 模板内使用JavaScript
<%= new Date() %>
<%= 1 + 100 %>
<%= nameList.join(',') %>
③ 流程控制
<ul>
<% users.forEach(function(user){ %>
<%- include('user/show', {user: user}) %>
<% }); %>
</ul>
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
④ includes 语法
<ul>
<% users.forEach(function(user){ %>
<%- include('user/show', {user: user}) %>
<% }); %>
</ul>
<%- include('header') -%>
<h1>
Title
</h1>
<p>
My page
</p>
<%- include('footer') -%>
⑤ 自定义分隔符(定界符)
ejs.render('<?= users.join(" | "); ?>', {users: users},
{delimiter: '?'});
ejs.delimiter = '$';
ejs.render('<$= users.join(" | "); $>', {users: users});
3 Jade 模板引擎
3.1 使用
const ejs = require('ejs');
ejs.renderFile(path, data, (err, html) => {
})
3.2 模板语法
doctype html
html
head
meta(charset='utf8')
title #{title}
style.
.box{border:1px solid #ccc;padding:20px}
script.
alert('ok')
body
h1=title
hr
p.box=content
ul
for item in dataList
li=item
if Math.random() * 10 > 5
p OK
else
p noOK
3.3 模板继承
doctype html
html
head
meta(charset='#{charset}')
body
block content
p please write content
extends header
block content
h1.titleClass#titleID #{title}
a(href='http://www.jackzxl.net', target='_blank') 我的主页
……