您的位置:首页 > Web前端

快速了解artTemplate

2017-04-07 19:38 169 查看


快速了解artTemplate

详细请看:http://blog.csdn.net/ligang2585116/article/details/50782545


废话不多说,一分钟上手

一个简单的例子(原生语法):

 

<!--用于展示模版的位置-->
<div id="area"></div>
​
<script src="js/template-native.js"></script>
<!--用于存放模版-->
<script id="template" type="text/html">
<div>
<% for(i=0;i<content.length;++i) {%>
<h1><%=content[i].province%></h1>
<% for(j=0 ; j<content[i].city.length ; ++j){%>
<p><%=content[i].city[j]%></p>
<%}%>
<%}%>
</div>
</script>
<!--用于渲染模版-->
<script>
var data={
content:[
{province:'四川',city:['成都','绵阳','自贡']},
{province:'广东',city:['广州','东莞','佛山']},
{province:'海南',city:['海口','三亚']}
]
};
var html=template('template',data);
document.getElementById('area').innerHTML=html
</script>


 


总结:

art template语法分为两种:一种是原生语法,一种是简洁语法,我觉得原生更好理解,只是加个<%%>,其他和写js没什么区别

当模版引擎解析到<%%>时,会把其中的字符串作为js代码来执行,当<%%>中紧跟 “=” 则会输出变量

每个模版引擎都包含:语法、变量赋值、动态解析js字符串,只是实现方式不同。个人认为模版引擎的性能取决于他的解析方式。

官网下载地址:https://github.com/aui/artTemplate#%E4%B8%8B%E8%BD%BD
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息