1、模板引擎
1)模板+数据=>静态页面片段
2)art-template性能较好
分支语法：
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
循环语法：
{{each target}}
{{$index}} {{$value}}
{{/each}}
3）在script标签内书写模板引擎代码，type='text/html'，可给定id
模板的作用就是把模板和数据一起生成一个静态的HTML片段，其使用步骤是
<script type="text/html" id="temp"><!--假数据-->
<h1>{{title}}</h1>
{{if menus}}
{{each menus as value i}}
<div>{{value}}==={{i}}</div>
{{/each}}
{{/if}}
</script>
<script>
var data = {
title: '美食信息',
menus: ['鸡肉饭', '猪扒包', '鸡丝面', '凉拌牛腩']
}
var html=template('temp',data)//模板名，数据
document.write(html)
</script>
4)不想让浏览器解析标签可使用转义符#
如
{{#value}}
5）在js中存放模板
我们可以把模板以字符串的形式拼接后存起来。利用
template.compile(模板字符串变量名)进行渲染后返回的结果是
一个函数，我们传参后进行调用就可以进行使用了
<script type="text/javascript" id="temp">
var tep = "<h1>" + "{{title}}" + "</h1>" +
"{{if menus}}" + "{{each menus as value i}}" +
"<div>" + "{{value}}" + "===" + "{{i}}" + "</div>" +
"{{/each}}" +
"{{/if}}"
</script>
<script>
var data = {
title: '美食信息',
menus: ['鸡肉饭', '猪扒包', '鸡丝面', '凉拌牛腩']
}
var render = template.compile(tep)
var html=render(data)
document.write(html)
</script>