art-template 是一個簡約、超快的模板引擎。
它採用作用域預聲明的技術來優化模板渲染速度，從而獲得接近 JavaScript 極限的運行性能，並且同時支持 NodeJS 和瀏覽器。
此demo學習使用了layui框架：
<!DOCTYPE html>
<html lang="zh-CN">
<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">
<link href="layui/css/layui.css" rel="stylesheet" />
<title>air-template</title>
</head>
<body>
<div id="app"></div>
<div id="page"></div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="layui/layui.all.js"></script>
<script type="text/javascript" src="gulp.js"></script>
<script type="text/javascript" src="/art-template-master/lib/template-web.js"></script>
<script>
template.defaults.imports.dateFormat = function (date, format) {
var newDate = new Date(date);
var year = newDate.getFullYear();
var month = newDate.getMonth() + 1;
var date = newDate.getDate();
var day = newDate.getDay();
var hours = newDate.getHours();
var minutes = newDate.getMinutes();
var seconds = newDate.getSeconds();
var ms = newDate.getMilliseconds();
var formatYear = year;
var formatMonth = month > 9 ? month : "0" + month;
var formatDate = date > 9 ? date : "0" + date;
var formatHours = hours > 9 ? hours : "0" + hours;
var formatMinutes = minutes > 9 ? minutes : "0" + minutes;
var formatSeconds = seconds > 9 ? seconds : "0" + seconds;
return formatYear + format + formatMonth + format + formatDate + " " +
formatHours + ":" + formatMinutes + ":" + formatSeconds;
};
(function () {
layui.use('laypage', function () {
var laypage = layui.laypage;
var gulp = new Gulp();
//自己寫的一個js工具類
gulp.ajaxFunc({
url: 'https://www.apiopen.top/meituApi',
method: 'POST',
data: {
page: 2
},
callBack: function (res) {
if (res.code === 200) {
$.get('template.art', function (data) {
// 將模板源代碼編譯成函數
var render = template.compile(data);
var str = render(res);
document.getElementById('app').innerHTML = str;
});
}
}
});
laypage.render({
elem: 'page',
count: 400,
limit: 20,
jump: function (obj, first) {
//首次不執行
if (!first) {
//do something
gulp.ajaxFunc({
url: 'https://www.apiopen.top/meituApi',
method: 'POST',
data: {
page: obj.curr
},
callBack: function (res) {
if (res.code === 200) {
$.get('template.art', function (data) {
// 將模板源代碼編譯成函數
var render = template.compile(
data);
var str = render(res);
document.getElementById('app').innerHTML =
str;
});
}
}
});
}
}
});
});
}());
</script>
</body>
</html>
模板template.art
<table class="layui-table">
<colgroup>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>編號</th>
<th>美圖</th>
<th>加入時間</th>
<th>發佈時間</th>
</tr>
</thead>
<tbody>
<!--標準語法-->
{{each data}}
<tr>
<td>{{$index + 1}}</td>
<td><img src="{{$value.url}}"/></td>
<td>{{$value.createdAt | dateFormat '-'}}</td>
<td>{{$value.publishedAt | dateFormat '-'}}</td>
</tr>
{{/each}}
</tbody>
</table>
效果：
