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