javascript模板引擎 artTemplate

1.简单操作1
<script src="template.js"></script>
<script id="test" type="text/html">
<h1><%=title%></h1>
<ul>
    <%for(i = 0; i < list.length; i ++) {%>
        <li>条目内容 <%=i + 1%> ：<%=list[i]%></li>
    <%}%>
</ul>
</script>
<div id="content"></div>
<script>
var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template.render('test', data);
document.getElementById('content').innerHTML = html;
</script>
2.简单操作2
<div id="content"></div>
<script src="template.js"></script>
<script >
var source = '<%for(var i=0;i < list.length; i++) { %><div><%=i%>:<%=list[i]%><div><%}%>';
var render = template.compile(source);
var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = render(data);
document.getElementById("content").innerHTML=html;
</script>
3.添加辅助函数
<div id="content"></div>
<script src="template.js"></script>
<script >
var source = '<%for(var i=0;i < list.length; i++) { %><div><%=i%>:<%=list[i]%><div><%}%><%=myHelper()%>';
var render = template.compile(source);
var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
function helper(a){
    alert(a)
    //自定义内容    
}
template.helper('myHelper',helper(new Date())); //helper函数名称
var html = render(data);
document.getElementById("content").innerHTML=html;
</script>
4.设置界定符
若前端模板语法与后端语法产生冲突，可以修改模板引擎界定符，例如：
template.openTag = "<!--[";
template.closeTag = "]-->";

<div id="content"></div>
<script src="template.js"></script>
<script >
var source = '<h1>{{=title}}</h1>';
template.openTag  = '{{'; //开始定界符
template.closeTag  = '}}';//结束定界符
var render = template.compile(source);
var data = {
    title: '标签',
};
var html = render(data);
document.getElementById("content").innerHTML=html;
</script>
5.嵌入子模板
<%include(id, [data])%>语句可以嵌入子模板，其中第二个参数是可选的，它默认传入当前的数据。
<script id="test" type="text/html">
<h1><%=title%></h1>
<%include('list')%>
</script>
<script id="list" type="text/html">
<ul>
    <%for(i = 0; i < list.length; i ++) {%>
        <li>条目内容 <%=i + 1%> ：<%=list[i]%></li>
    <%}%>
</ul>
</script>
5.自定义语法 for if elseif

<script src="template.js"></script>
<script >
var source = '<%if ( tag  == 1 ) {%><h1>1</h1><%} else {%><h1>-1</h1><% } %>'; //if使用
var render = template.compile(source);
var data = {
    tag: 1,
};
var html = render(data);
document.getElementById("content").innerHTML=html;

</script>