模版引擎

一、模板引擎的基础概念

1.1 模板引擎

模板引擎是第三方模块。
让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。

未使用模版引擎的写法：麻烦且不直观

const arr = [
  { name: '小红', age: 20 },
  { name: '小蓝', age: 20 },
];
let str = '<ul>';
for (var i = 0; i < arr.length; i++) { 
  str += '<li>\
    <span>'+ ary[i].name +'</span>\
    <span>'+ ary[i].age +'</span>\
  </li>';
}
str += '</ul>';

使用模版引擎的写法：

<ul>
  {{each ary}}
    <li>{{ $value.name }}</li>
    <li>{{ $value.age }}</li>
  {{/each}}
</ul>

1.2 art-template 模板引擎

npm install art-template 下载
const template = require('art-template')引入模板引擎
告诉模板引擎模板路径 (该文件里面写的是html文本) 和要拼接的数据在哪 const html = template(‘模板路径’, 数据);
使用模板语法告诉模板引擎，模板与数据应该如何进行拼接

1.3 art-template 代码示例

// 导入模板引擎模块
const template = require('art-template');

// template方法是用来拼接字符串的，将特定模板与特定数据进行拼接
// 1. 模板路径推荐用绝对路径，更安全，然后第一个路径参数用view替代即可
const views = path.join(__dirname, 'views', 'index.art');
// 2. 要在模板中显示的数据参数，传对象类型
// 返回拼接好的字符串
const html = template('./views/index.art',{
  data: {
    name: '小白',
    age: 20
  }
});

<!--index.art-->
<div>
  <span>{{ data.name }}</span>
  <span>{{ data.age }}</span>
</div>

二、模板引擎语法

2.1 模板语法

art-template 同时支持两种模板语法：标准语法和原始语法。
标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力。

2.2 输出

标准语法： {{ 数据 }}
原始语法：<%=数据 %>

<!-- 标准语法 -->
<h2>{{ value }}</h2> // 可以是变量
<h2>{{ a ? b : c }}</h2> // 也可以是表达式
<h2>{{ a + b }}</h2>

<!-- 原始语法 -->
<h2><%= value %></h2>
<h2><%= a ? b : c %></h2>
<h2><%= a + b %></h2>

输出经过 HTML 转义的内容，即变量如果包含 '<'、'>'、'&'等HTML字符，会被转义成字符实体 (如< > &)
因此最好保证里面内容不要有HTML字符。

const text = '<p>你好你好</p>'
<h2>{{ text }}</h2>
<h2><%= text %></h2> 
// 会输出 &lt;p&gt;你好你好&lt;/p&gt; 插入 <h2> 标签中

2.3 原文输出

标准语法：{{@ 数据 }}
原始语法：<%-数据 %>

<!-- 标准语法 -->
<h2>{{@ value }}</h2>

<!-- 原始语法 -->
<h2><%- value %></h2>

输出非转义的内容(原始内容)，通常用于输出富文本，即 HTML内容。参考上文 2.2，如果数据中携带 HTML 标签，默认模板引擎会将标签转义后输出。如果需要原样输出 html 标签，需要用下面这种格式。

const content = '<p>我来啦</p>'
<h2>{{@ content }}</h2>
<h2><%- content %></h2>
// 直接把 <p>我来啦</p> 插入 <h2> 标签中

2.4 条件判断

<!-- 标准语法 --> 
{{if 条件}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{else}}...{{/if}}

<!-- 原始语法 -->
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

举例：

// 举例
{{ if a && b }}
  <p>可以直接放 html 内容</p>
{{/if}}

<% if (a && b) { %>
  <% console.log('也可以嵌套任意模版语句') %>
<% } %>

2.5 循环

标准语法：{{each 数据}} {{/each}}
原始语法：<% for() { %> <% } %>

<!-- 标准语法 -->
{{each target}}
  {{$index}} {{$value}}
{{/each}}

<!-- 原始语法 -->
<% for(var i = 0; i < target.length; i++){ %>
  <%= i %> <%= target[i] %>
<% } %>

2.6 子模版

使用子模板可以方便将网站公共块(头部、底部)抽离到单独的文件中。

标准语法：{{include '模板路径'}} (include是关键字)
原始语法：<%- include('模板路径') %>(include是方法)

用<%- include指令而不是<% include，为的是避免对输出的 HTML 代码做转义处理。

<!-- 标准语法 -->
{{include './header.art' [data]}}

<!-- 原始语法 -->
<%- include('./header.art', [data]) %>

举例：结合了 2.5 的循环

// 当前模版路径：./views/tmp.ejs
// 引入模版路径：./views/user/show.ejs
<ul>
  {{each users}}
    {{include './header.art' {user: $value, id: $index} }}
  {{/each}}
</ul>

2.7 模板继承

使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。

左边骨架模版，右边页面模版

2.8 模板继承示例

骨架模版

<!--layout.art 骨架模板-->
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML骨架模板</title>
    {{block 'head'}}{{/block}}
  </head>
  <body>
    {{block 'content'}}{{/block}}
  </body>
</html>

<!--index.art 首页模板-->
<!--用extend关键字继承layout（骨架模版）-->
{{extend './layout.art'}}
{{block 'head'}} <link rel="stylesheet" href="custom.css"> {{/block}}
{{block 'content'}} <p>This is just an awesome page.</p> {{/block}}

2.9 模板配置

向模板中导入变量 template.defaults.imports.变量名 = 变量值;
设置模板根目录 template.defaults.root = 模板目录
设置模板默认后缀 template.defaults.extname = '.art'

2.10 模版配置示例及 dateformat 模块

先在文件夹安装npm i dateformat

// test.js
const template = require('art-template');
const path = require('path');
const dateFormat = require('dateformat');

// 设置模板的根目录
template.defaults.root = path.join(__dirname, 'views');
// 导入模板变量
template.defaults.imports.dateFormat = dateFormat;
// 配置模板的默认后缀，template方法第一个参数就不需要再写后缀了
template.defaults.extname = '.art';
const html = template('test', {
  time: new Date()
});
console.log(html)

// ./views/test.art
//在模版引擎中调用dateFormat方法
{{ dateFormat(time, 'yyyy-mm-dd') }}