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
条件渲染
<% if (false) { %>
<div>条件为true时显示</div>
<% } else { %>
<div>条件为false时执行</div>
<% } %>遍历渲染
<% for(let i = 0; i < arr.length; i++) { %>
<li><%= arr[i] %></li>
<% } %>
<% arr.forEach((item) => { %>
<li><%= item %></li>
<% }) %>包含（include）
<%- include('user/show', {user: user}); %>布局（Layouts）
EJS 并未对块（blocks）提供专门的支持，但是可以通过包含页眉和页脚来实现布局。
<%- include('header'); -%>
<h1>Title</h1>
<p>My page</p>
<%- include('footer'); -%>1.3 前端使用
如果想要在前端使用ejs，需要引入ejs.js
ejs.compile
可以把模板字符串变成模板
let tHtml = `
<%= str %>
`;
let template = ejs.compile(tHtml)template()
template是ejs.compile调用后的返回值，它可以叫任意名字。
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函数，告知模板引擎将特定模板和特定数据进行拼接，最终返回拼接结果。
// 模板引擎导入
const template = require('art-template');
// 模板编译
// 1.模板位置
// 2.向模板中传递要拼接的数据，对象类型，对象属性可以直接在模板中使用。
// result 拼接结果
const result = template('./views/index.html', {msg: 'Hello, art-template'});2.3 模板语法
通过模板引擎提供的特殊语法，告知模板引擎数据和模板具体的拼接细节。
插值表达式
即{{}}，用来显式数据，将数据变量放入双大括号之中即可。
原始语法
// 标准语法： {{ 数据 }}
// 原始语法：<%= 数据 %>插值表达式中可以进行运算，最终显式运算的结果。
<!-- 标准语法 -->
<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标签，默认不会解析标签，会将其转义后输出。使用以下方式可以解析标签。
{{@ value }}条件判断
<!-- 标准语法 -->
{{if 条件}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
<!-- 原始语法 -->
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>数据循环
{{each target}}
{{$index}} {{$value}}
{{/each}}
<!-- 原始语法 -->
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>子模板
使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。
<!-- 标准语法 -->
{{include './header.art'}}
<!-- 原始语法 -->
<% include('./header.art') %>模板继承
使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。
{{extend './layout.html'}}
{{block 'head'}} ... {{/block}}3 不同的渲染方式
3.1 服务端渲染
优点
- 可以更好的SEO优化
- 前端耗时更少
- 客户端资源占用少
缺点
- 不便于前端后续维护
- 压力都在服务器，导致服务器压力过大
渲染的过程
- 浏览器 -> 向服务器发送请求 -> 服务器 -> 向数据库查询数据 -> 数据库
- 数据库 -> 返回数据给服务器 -> 服务器 -> 将数据和模板进行渲染，返回给浏览器 -> 浏览器渲染
3.2 前端JS渲染
优点
- 速度快
- 压力均分给客户端
- 前后端分离。前端专注UI，后端专注api开发。前端有更多选择性，不需要遵循后端特定的模板
- 用户体验更好
缺点
- 不能进行SEO优化
渲染的过程
- 浏览器 -> 向服务器发送请求 -> 服务器 -> 向数据库查询数据 -> 数据库
- 数据库 -> 返回数据给服务器 -> 服务器 -> 数据处理后，返回JSON给浏览器 -> 浏览器根据返回的数据，使用模板渲染页面
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023-10-18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
