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>
原文：https://www.cnblogs.com/Tanqurey/p/10649091.html