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

目标

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

写在前面

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

1. 模板引擎

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

文档：http://aui.github.io/art-template/zh-cn/

Github: https://github.com/aui/art-template

1.1 使用模板字符串的弊端

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

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 模板引擎的作用

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

1.3 模板引擎的使用

模板渲染四步走：

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

代码演示（注释清晰）

  <!-- 引入文件 -->
    <script src="./template-web.js"></script>
    <div id="box">
        <!-- 在需要渲染的位置用script标签写html模板（注意1:type="text/html",2:id必填）,type为在script内写html方便，id方便确定渲染目标 -->
        <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预览：

在这里插入图片描述

代码演示（注释清晰）

 <script src="template-web.js"></script>
    <script type="text/html" id="tpl">
        <ul>
            {{each data}}
            <li>
                <!-- 注意$values是对象，要用”."来取值 -->
                <span>姓名：{{$value.name}}</span>
                <span>年龄：{{$value.age}}</span>
            </li>
            {{/each}}
        </ul>
    </script>
    <script>
        let data = [{
            name: '加喜',
            age: 27
        }, {
            name: '占杰',
            age: 27
        }, {
            name: '小飞',
            age: 27
        }]
        const html = template('tpl', {
            // data: data
            data //es6键值数据一致，可省略值，（注意此处一定是对象格式，加{}）
        });
        document.body.innerHTML = html
    </script>

2.5 导入模板变量

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

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

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

demo预览：
原始时间格式

在这里插入图片描述

需求时间格式
在这里插入图片描述

第一种方式：

 <script src="./template-web.js"></script>
    <script type="text/html" id="tpl">
        <h1>{{$imports.dateFormat(time)}}</h1>
    </script>
    <script>
        const html = template('tpl', {
            time: new Date()
        })
        document.body.innerHTML = html

        // 定义改变日期格式的函数
        function dateFormat(time) {
            return time.getFullYear() + '年' + (time.getMonth() + 1) + '月' + time.getDate() + '日'
        }
    </script>

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

第二种方式：

  <script src="./template-web.js"></script>
    <script type="text/html" id="tpl">
        <!-- 暴露后的方法，在此处可调用，也可省去$imports -->
        <h1>{{$imports.dateFormat(time)}}</h1>
    </script>
    <script>
        window.addEventListener('load', function() {
            // 把方法报漏出去，注意此语句必须写在拼接模板数据之前
            template.defaults.imports.dateFormat = dateFormat;
            const html = template('tpl', {
                time: new Date()
            })
            document.body.innerHTML = html

            // 定义改变日期格式的函数
            function dateFormat(time) {
                return time.getFullYear() + '年' + (time.getMonth() + 1) + '月' + time.getDate() + '日'
            }
        })
    </script>

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

写在最后

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