利用art-template模板引擎,处理响应数据渲染
1.什么是处理响应数据渲染
就是服务端响应数量庞大,我们用原生的DOM操作一个个渲染到文档相当麻烦,这时候我们就会用数据渲染的模板引擎,只要我们给它数据和模板,就能快速渲染到文档中,省下许多DOM操作的代码。
2.模板引擎的使用步骤
- 选择一个模板引擎
- 下载模板引擎JS文件
- 引入到页面中
- 准备一个模板
- 准备一个数据
- 通过模板引擎的JS提供的一个函数将模板和数据整合得到渲染结果HTML
- 将渲染结果的HTML 设置到 默认元素的 innerHTML 中
3.如何准备一个模板
模板准备有两种方式:
1.在JS变量中写模板,不推荐(原因:如果将模板写到JS中,维护不方便,不能换行,没有颜色区分)。
2.使用script标签写模板,推荐(script标签内容不会显示在界面)。
最重要的是:
如果script标签 type 不等于 text/javascript 的话,内部的内容不会作为 JavaScript 执行,所以使用模板引擎我们的script标签的type会写text/x-art-template,x代表自定义,art-template的是我们使用的模板名称。
4.art-template的介绍
art-template 是一个简约、超快的模板引擎。
5.使用art-template将数据渲染到页面案例
注意:这些数据都是我从本地服务端请求的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入art-template -->
<script src="./template-web.js"></script>
</head>
<body>
<table id="demo" border="1" cellpadding='10' cellspacing='0'></table>
<!-- 准备一个模板 -->
<script type="text/x-art-template" id="tmpl">
{{each comments}}
<!-- each 内部 $value 拿到的是当前被遍历的那个元素 -->
<tr>
<td>{{$value.author}}</td>
<td>{{$value.content}}</td>
<td>{{$value.created}}</td>
</tr>
{{/each}}
</script>
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', '15test.php');
xhr.send();
xhr.onreadystatechange = function () {
if (this.readyState !== 4) return;
var res = JSON.parse(this.responseText);
// 模板所需数据
var context = {
comments: res.data
};
// 借助模板引擎的API 渲染数据
var html = template('tmpl', context);
document.getElementById('demo').innerHTML = html;
};
</script>
</body>
</html>
再配上一张数据渲染之后的图片: