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引擎可实现项目模块化，具体。。。、

 

官方源码及文档：

语法：