目标
了解模板引擎
会使用模板语法
写在前面
写在前面:在我们拿到服务器响应的数据时,我们会用何种方式对其渲染呢,当然我觉得机智的你们指定用模板引擎。唉(我也不想再吃模板字符串的苦啦),模板引擎用途十分广泛,其可进行后端渲染(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.自定义名称 = 方法名把方法暴露出去
写在最后
写在最后:模板引擎已大规模应用于目前页面的渲染,掌握其使用方法,必不可少。当然更多用法,还得靠官方大大:文档,希望我们可以不断突破,一直在路上,加油。