art-template 前端使用
用途：主要用来处理数据和优化性能，与其他的一些模块化处理数据的插件相比，art-template处理性能好
不废话，上代码
1.art-template基本语法使用
<script src="template.js"></script>
//id为模块的名称
//语法全部为双标签 {{}} 里面为变量
<script id="template" type="text/html">
{{if films.length == 0}}
<p>没有推荐的电影给您</p>
{{else}}
<h1>{{title}} : {{films.length}} </h1>
<ul>
{{each films as film index}}
<li>
{{film.name}}
<del>{{film.normalPrice }}</del>
<span>{{film.nowPrice }}</span>
<br>
首映日期：{{film.time}}
</li>
{{/each}}
</ul>
{{/if}}
模拟数据：
var data =
{
title : \'推荐的电影\' ,
films :
[
{
name : \'湄公河公案\' ,
normalPrice : 40 ,
nowPrice : 29.9 ,
time : \'2016-6-6\'
},
{
name : \'重返二十岁\' ,
normalPrice : 26 ,
nowPrice : 13 ,
time : \'2016-12-12\'
},
{
name : \'长城\' ,
normalPrice : 42 ,
nowPrice : 39.9 ,
time : \'2017-12-25\'
},
{
name : \'倩女幽魂7\' ,
normalPrice : 80 ,
nowPrice : 80 ,
time : \'2018-8-8\'
},
{
name : \'程序员纪录片--单身汪的成长\' ,
normalPrice : 1000 ,
nowPrice : 2000 ,
time : \'2020-20-20\'
}
]
}
此处获取数据，并将数据交给template进行处理
var html = template(\'template\',data);
渲染页面
document.body.innerHTML = html
</script>
2.辅助函数，其实就是对一些数据做一些处理
price为辅助方法的名字 price_data为处理的数据
方法: template.helper(\'price\',function(price_data){
//处理的内容
})
以以上代码为例，为film.normalPrice和film.nowPrice数据添加一个￥修饰符
template.helper(\'price\',function(price_data){
return \'￥\' + price_data.toFixed(2)
})
在处理的数据处用 \'| 方法名\'
<del>{{film.normalPrice | price}}</del>
<span>{{film.nowPrice | price}}</span>
3.模板引入子模板
不多说，上demo
<script id="web" type="text/html">
<a href="{{url}}">{{name}}</a>
<br>
</script>
<script id="book" type="text/html">
<img src="{{url}}" alt="">
<br>
<div>{{name}}</div>
</script>
<script id="recommend" type="text/html">
{{if items.length == 0}}
<h1>抱歉,未找到推荐的相关内容</h1>
{{else}}
<h1>{{title}}:{{items.length}}个</h1>
{each items as item}}
{{if item.type == \'web\'}}
{{include \'web\' item}}
{{else}}
{{include \'book\' item}} //include用于引入子模块 \'book\'模块的id item传递过去的数据
{{/if}}
{{/each}}
{{/if}}
</script>
再献上数据
var data =
{
title : \'推荐的书籍和网站\' ,
items:
[
{
type : \'web\',
name : \'github\' ,
url : \'https://github.com\'
},
{
type : \'book\' ,
name : \'平凡的世界\' ,
url : \'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1484047575704&di=3bc7d59698a2aaeb917598e563aa749e&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3D08c992b4e9c4b7453494b71efffd1e78%2Fba14695c10385343f96e93bc9113b07ecb80884c.jpg\'
},
{
type : \'web\' ,
name : \'google\' ,
url : \'https://google.com\'
},
{
type : \'book\' ,
name : \'围城\' ,
url : \'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1484047692883&di=edf1860dc373863422ccdfecd43c1057&imgtype=0&src=http%3A%2F%2Fec4.images-amazon.com%2Fimages%2FI%2F415ZJgXDNEL._SL500_AA300_.jpg\'
},
{
type : \'book\' ,
name : \'汤姆索亚历险记\' ,
url : \'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1484047764487&di=e6853f746fe6ba15b34266592b8501ac&imgtype=0&src=http%3A%2F%2Fi1.w.hjfile.cn%2Fdoc%2F201111%2Ftom%2520sawyer11530.jpg\'
},
]
}
var result = template(\'recommend\',data) ;
document.body.innerHTML = result ;
再服务器使用art-template模块利用template引擎可实现项目模块化，具体。。。、
官方源码及文档：
https://github.com/aui/artTemplate
语法：
https://github.com/aui/artTemplate/wiki/syntax:simple