art-template 前端使用

用途：主要用來處理數(shù)據(jù)和優(yōu)化性能，與其他的一些模塊化處理數(shù)據(jù)的插件相比，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}}　　

模擬數(shù)據(jù)：　　

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'
}
]
}

　　此處獲取數(shù)據(jù)，并將數(shù)據(jù)交給template進行處理

　　var html = template('template',data);
　　渲染頁面
　　document.body.innerHTML = html

</script>

?

2.輔助函數(shù)，其實就是對一些數(shù)據(jù)做一些處理

price為輔助方法的名字 ? ?price_data為處理的數(shù)據(jù)

方法: template.helper('price',function(price_data){

　　//處理的內(nèi)容

})

以以上代碼為例，為film.normalPrice和film.nowPrice數(shù)據(jù)添加一個￥修飾符

template.helper('price',function(price_data){

　　return '￥' price_data.toFixed(2)

})

在處理的數(shù)據(jù)處用 ?'| 方法名'

<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>抱歉,未找到推薦的相關(guān)內(nèi)容</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傳遞過去的數(shù)據(jù)
　　{{/if}}
　　{{/each}}
{{/if}}
</script>

再獻上數(shù)據(jù)

var data =
{
title : '推薦的書籍和網(wǎng)站' ,
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://imgsrc.baidu.com/forum/w%3D580/sign=08c992b4e9c4b7453494b71efffd1e78/ba14695c10385343f96e93bc9113b07ecb80884c.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://ec4.images-amazon.com/images/I/415ZJgXDNEL._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://i1.w.hjfile.cn/doc/201111/tom%20sawyer11530.jpg'
},
]
}
var result = template('recommend',data) ;

document.body.innerHTML = result ;

?

再服務(wù)器使用art-template模塊利用template引擎可實現(xiàn)項目模塊化，具體。。。、

?

官方源碼及文檔：

https://github.com/aui/artTemplate

語法：

https://github.com/aui/artTemplate/wiki/syntax:simple

?

總結(jié)

以上是生活随笔為你收集整理的art-template辅助函数和子模板的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。