模板引擎

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);
// => 输出绘制后的 HTML 字符串

//第二种用法
// 渲染文件
ejs.renderFile(filename, data, options, function(err, str){
    // str => 输出绘制后的 HTML 字符串
});

//第三种用法
const template = ejs.compile(str, options);
template(data);
// => 输出绘制后的 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)。

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') 我的主页
  ……