模板引擎，让交互变得优雅

秒速五厘米 2023-02-19 05:26 33阅读 0赞

### 目标 ###

> 了解模板引擎  
> 会使用模板语法

## 写在前面 ##

写在前面：在我们拿到服务器响应的数据时，我们会用何种方式对其渲染呢，当然我觉得机智的你们指定用模板引擎。唉（我也不想再吃模板字符串的苦啦），模板引擎用途十分广泛，其可进行后端渲染（npm安装），也可进行前端渲染（本文以前端渲染为例）。当然不管是哪种渲染方式，其模板语法一致。

## 1. 模板引擎 ##

本文着重对模板引擎常用语法进行描述，更多语法使用技巧，请以官方文档为主

文档：[http://aui.github.io/art-template/zh-cn/][http_aui.github.io_art-template_zh-cn]

Github: [https://github.com/aui/art-template][https_github.com_aui_art-template]

##### 1.1 使用模板字符串的弊端 #####

1.  数据和HTML字符串拼接导致代码混乱，拼接容易出错，增加修改难度。
2.  业务逻辑和用户界面混合，代码不易维护。

for (var i = 0; i < result.length; i++) { 
    	html += '<!DOCTYPE html>\ <html lang="en">\ <head>\ <meta charset="UTF-8">\ <title>'+ title +'</title>\ </head>\ <body>\ <h1 οnclick="sayHi('+name+')">你好,'+name+' 我今年 '+age+'岁</h1>\ <ul>\ <li title="'+hobbies[0]+'">'+hobbies[0]+'</li>\ </ul>\ </body>\ </html>';
    }

##### 1.2 模板引擎的作用 #####

1.  使用模板引擎提供的模板语法可以使数据和HTML字符串拼接的更加美观，代码易于维护。
2.  模板引擎能够使用户界面的数据拼接和JavaScript业务逻辑分离，增加程序的可扩展性。
3.  使用模板引擎可以提高开发效率。

##### 1.3 模板引擎的使用 #####

模板渲染四步走：

1.  下载并引入template-web.js 文件
2.  在需要渲染的位置写模板
3.  使用template方法进行数据拼接
4.  把拼接好的模板字符串进行指定位置的渲染

代码演示（注释清晰）

<script src="./template-web.js"></script>
        <div id="box">
            
            <script type="text/html" id="tpl"> <div>  <span>{ { name}}</span> <span>{ { age}}</span> </div> </script>
        </div>
        <script> // 当引入template-web文件后，template方法就存在了 // 注意方法的一个参数为模板id，第二个参数为需要渲染的数据 // 方法的返回值为拼接好的模板字符串 const html = template('tpl', { name: '陈稳', age: 18 }); // 把拼接好的数据渲染到指定位置 document.querySelector('#box').innerHTML = html </script>

## 2. 模板语法 ##

模板语法的作用是告诉模板引擎，数据和模板要如何进行拼接。

### 2.1 输出 ###

将数据显示在模板中。

<h2>{
       {value}}</h2>
     <h2>{
       {a ? b : c}}</h2>
     <h2>{
       {a + b}}</h2>

### 2.2 原文输出 ###

如果数据中携带HTML标签，默认情况下，模板引擎不会解析标签，会将其转义后原文输出。如果我们需要让HTML标签生效，需要在数据前加上`@`，对标签进行解析。

<h4>{
       {@ value }}</h4>

### 2.3 条件判断 ###

如果有些数据的渲染存在一定的判断（渲染与否），我们就可用条件判断对其进行限制

{
       {if 条件}} ... {
       {/if}}
     {
       {if v1}} ... {
       {else if v2}} ... {
       {/if}}

显示与否

{
       {if 条件}}
    	<div>条件成立 显示我</div>
    {
       {else}}
    	<div>条件不成立 显示我</div>
    {
       {/if}}

**注意**：`if`为双标签

### 2.4 循环 ###

对于服务器响应的数据，大部分为数组、json对象。此类数据繁多，此时就用到了模板语法的循环

{
       {each target}}
         {
       {$index}} {
       {$value}}
     {
       {/each}}

**注意**：`each`为双标签，其中`$index`为当前循环项的索引，`$value`为当前循环项的值

demo预览：

![在这里插入图片描述][20200619122303595.PNG]

代码演示（注释清晰）

### 2.5 导入模板变量 ###

在模板处理一些原生数据时，可能会用到JavaScript的方法，但是此方法模板引擎并没有，此时就要在模板引擎中导入此方法（导入变量）

<div>$imports.dataFormat(time)</div>

template.defaults.imports.变量名 = 变量值;
    $imports.变量名称

demo预览：  
原始时间格式

![在这里插入图片描述][20200619124606229.PNG]

需求时间格式  
![在这里插入图片描述][20200619124444308.PNG]

第一种方式：

**注意**：此方法，把函数定义在了全局作用域，所以模板可直接用`$.imports`调用

第二种方式：

**注意**：在大部分情况下，防止变量污染，一般都定义为局部方法，用template.defaults.imports.自定义名称 = 方法名把方法暴露出去

## 写在最后 ##

写在最后：模板引擎已大规模应用于目前页面的渲染，掌握其使用方法，必不可少。当然更多用法，还得靠官方大大：[文档][http_aui.github.io_art-template_zh-cn]，希望我们可以不断突破，一直在路上，加油。

[http_aui.github.io_art-template_zh-cn]: http://aui.github.io/art-template/zh-cn/
[https_github.com_aui_art-template]: https://github.com/aui/art-template
[20200619122303595.PNG]: https://img-blog.csdnimg.cn/20200619122303595.PNG
[20200619124606229.PNG]: https://img-blog.csdnimg.cn/20200619124606229.PNG
[20200619124444308.PNG]: https://img-blog.csdnimg.cn/20200619124444308.PNG