artTemplate是腾讯开源的前端模板框架，性能卓越，简单易学
下载：https://github.com/aui/artTemplate
简单数据遍历实例：
无论数组或者对象都可以用 each 进行遍历
语法：
{{each list as value index}} //开始
<li>{{index}} - {{value.user}}</li>
{{/each}}//结束
准备代码：
data.json --这是需要遍历的数据文件
{
"list": [
{
"age": 25,
"createTime": {"date": 23,"day": 2,"hours": 0,"minutes": 0,"month": 6,"seconds": 0,"time": 1563811200000,"timezoneOffset": -480,"year": 119},
"moblePhone": "183****8280",
"userName": "张国立"
},
{
"age": 24,
"createTime": {"date": 23,"day": 2,"hours": 0,"minutes": 0,"month": 6,"seconds": 0,"time": 1563811200000,"timezoneOffset": -480,"year": 119},
"moblePhone": "183****8280",
"userName": "张铁林"
},
{
"age": 22,
"createTime": {"date": 23,"day": 2,"hours": 0,"minutes": 0,"month": 6,"seconds": 0,"time": 1563811200000,"timezoneOffset": -480,"year": 119},
"moblePhone": "183****8280",
"passWord": "1234",
"userName": "邓婕"
},
{
"age": 22,
"createTime": {"date": 23,"day": 2,"hours": 0,"minutes": 0,"month": 6,"seconds": 0,"time": 1563811200000,"timezoneOffset": -480,"year": 119},
"moblePhone": "183****8280",
"passWord": "1234",
"userName": "吳亦凡"
},
{
"age": 22,
"createTime": {"date": 23,"day": 2,"hours": 0,"minutes": 0,"month": 6,"seconds": 0,"time": 1563811200000,"timezoneOffset": -480,"year": 119},
"moblePhone": "183****8280",
"userName": "郭德纲"
},
{
"age": 22,
"createTime": {"date": 23,"day": 2,"hours": 0,"minutes": 0,"month": 6,"seconds": 0,"time": 1563811200000,"timezoneOffset": -480,"year": 119},
"moblePhone": "183****8280",
"passWord": "1234",
"userName": "彭于晏"
}
]
}
页面：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>模板引擎 art_Template</title>
<script type="text/javascript" src=../js/jquery-1.11.2.min.js></script>
<script type="text/javascript" src="template-web.js"></script>
<script>
$.getJSON("data.json", function (pageData) {//从文件获取数据
var html = template('userList', pageData);
document.getElementById('queryUserList').innerHTML = html;
});
</script>
</head>
<body>
<div class="flow-container">
<table class="common-table" >
<thead>
<tr>
<th>账号</th>
<th>年龄</th>
<th>手机号</th>
<th>创建日期</th>
<th>操作</th>
</tr>
</thead>
<tbody id="queryUserList">
</tbody>
</table>
</div>
<script id="userList" type="text/html">
{{each list as itemInfo index}}
<tr
{{if index%2==1 }}
class="even"
{{/if}}
>
<td>{{itemInfo.userName}}</td>
<td>{{itemInfo.age}}</td>
<td>{{itemInfo.moblePhone}}</td>
<td>{{itemInfo.createTime}}</td>
<td>
<button type='button' class='fleft btn btn-info' onClick="doTask({{itemInfo}})">删除</button>
</td>
</tr>
{{/each}}
</script>
</body>
</html>
效果：
![arttemplate.js html代码 原样输出[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)