05_模板引擎 - 技术栈

模板引擎可以让将数据和HTML模板更加友好的结合，省去繁琐的字符串拼接，使代码更加易于维护。

1 EJS

文档地址：https://ejs.bootcss.com/#install

1.1 安装

npm install ejs

1.2 标签语法

<% '脚本' 标签，用于流程控制，无输出。
<%_ 删除其前面的空格符
<%= 输出数据到模板（输出是转义 HTML 标签）
<%- 输出非转义的数据到模板
<%# 注释标签，不执行、不输出内容
<%% 输出字符串 '<%'
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除

插值表达式

<%= key %> 可以把对应的key的值显示在页面上，可以直接把html标签内容展示 innerText
<%- key %> 可以把对应的key的值显示在页面上，会把html渲染 innerHTML

条件渲染

html 复制代码

<% if (false) { %>
    <div>条件为true时显示</div>
<% } else { %>
    <div>条件为false时执行</div>
<% } %>

遍历渲染

html 复制代码

<% for(let i = 0; i < arr.length; i++) { %>
<li><%= arr[i] %></li>
<% } %>

<% arr.forEach((item) => { %>
<li><%= item %></li>
<% }) %>

包含（include）

html 复制代码

<%- include('user/show', {user: user}); %>

布局（Layouts）

EJS 并未对块（blocks）提供专门的支持，但是可以通过包含页眉和页脚来实现布局。

html 复制代码

<%- include('header'); -%>
<h1>Title</h1>
<p>My page</p>
<%- include('footer'); -%>

1.3 前端使用

如果想要在前端使用ejs，需要引入ejs.js

ejs.compile

可以把模板字符串变成模板

javascript 复制代码

let tHtml = `
<%= str %>
`;

let template = ejs.compile(tHtml)

template()

template是ejs.compile调用后的返回值，它可以叫任意名字。

javascript 复制代码

let html = template({str: "Hello World"})

html就是最终生成的HTML代码

ejs可以帮助我们更好的渲染对应的html，如果遇到渲染中需要有条件判断和循环，使用模板要比字符串拼接，更简单一些。

2 art-template

文档地址：https://aui.github.io/art-template/zh-cn/docs/

2.1 安装

npm install art-template

2.2 模板编译

通过调用模板引擎提供的template函数，告知模板引擎将特定模板和特定数据进行拼接，最终返回拼接结果。

javascript 复制代码

// 模板引擎导入
const template = require('art-template');
// 模板编译
// 1.模板位置
// 2.向模板中传递要拼接的数据，对象类型，对象属性可以直接在模板中使用。
// result 拼接结果
const result = template('./views/index.html', {msg: 'Hello, art-template'});

2.3 模板语法

通过模板引擎提供的特殊语法，告知模板引擎数据和模板具体的拼接细节。

插值表达式

即{``{}}，用来显式数据，将数据变量放入双大括号之中即可。

原始语法

javascript 复制代码

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

插值表达式中可以进行运算，最终显式运算的结果。

html 复制代码

<!-- 标准语法 -->
<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 复制代码

{{@ value }}

条件判断

html 复制代码

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

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

数据循环

html 复制代码

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

子模板

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

html 复制代码

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

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

模板继承

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

html 复制代码

{{extend './layout.html'}}
{{block 'head'}} ... {{/block}}

3 不同的渲染方式

3.1 服务端渲染

优点

可以更好的SEO优化
前端耗时更少
客户端资源占用少

缺点

不便于前端后续维护
压力都在服务器，导致服务器压力过大

渲染的过程

浏览器 -> 向服务器发送请求 -> 服务器 -> 向数据库查询数据 -> 数据库
数据库 -> 返回数据给服务器 -> 服务器 -> 将数据和模板进行渲染，返回给浏览器 -> 浏览器渲染

3.2 前端JS渲染

优点

速度快
压力均分给客户端
前后端分离。前端专注UI，后端专注api开发。前端有更多选择性，不需要遵循后端特定的模板
用户体验更好

缺点

不能进行SEO优化

渲染的过程

浏览器 -> 向服务器发送请求 -> 服务器 -> 向数据库查询数据 -> 数据库
数据库 -> 返回数据给服务器 -> 服务器 -> 数据处理后，返回JSON给浏览器 -> 浏览器根据返回的数据，使用模板渲染页面