05_模板引擎

爱被打了一巴掌 2024-02-24 06:46 8阅读 0赞

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

### 1 EJS ###

文档地址：[https://ejs.bootcss.com/\#install][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/][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给浏览器 -> 浏览器根据返回的数据，使用模板渲染页面

[https_ejs.bootcss.com_install]: https://ejs.bootcss.com/#install
[https_aui.github.io_art-template_zh-cn_docs]: https://aui.github.io/art-template/zh-cn/docs/