由于目前主流的开发模型是mvc架构，也就是前端与后端完全分离的开发方式，因此越来越多的开发者采用后端直接发送ajax给前端，让前端自行解析来操作的方式了。
但是由于大家已经渐渐习惯了类似php，jsp这样嵌套html代码的方式，如果全部都通过id获取，在通过innerTHML的方式写入，对于大多数前端工程师来说是个灾难。
因此，js模板引擎在这个大趋势下诞生了。
下面我介绍一下我们公司一直在使用的模板引擎，artemplate。
这个是artemplate在github上的地址https://github.com/aui/art-template
artemplate有两套模板标签，一套是标准语法的模板标签，一套是另一套是原始语法的模板标签。
输出语句：
标准语法
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}原始语法
<%= value %> <%= data.key %> <%= data['key'] %> <%= a ? b : c %> <%= a || b %> <%= a + b %>
判断语句：
标准语法
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}原始语法
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>循环语句：
标准语法
{{each target}}
{{$index}} {{$value}}
{{/each}}原始语法
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>变量定义与赋值：
标准语法
{{set temp = data.sub.content}}原始语法
<% var temp = data.sub.content; %>
一个常用与ajax更新网站的示例:
php代码
<?php $arr = array ( 'name' => '沃航科技', 'sex' => '男', 'age' => '1岁' ); echo json_encode($arr, JSON_UNESCAPED_UNICODE); ?>
前端代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>arttemplate模板引擎</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- template-web.js是arttemplate的库 资料查询网站为https://github.com/aui/art-template -->
<script type="text/javascript" src="template-web.js"></script>
<script type="text/javascript">
window.onload = function() {
$.post('ajax.php', function(data) {//通过ajax获取数据
console.log(data);
var arrs = $.parseJSON(data);//将json转化为js的object对象
var html = template('tpl', {//生成模板
target:arrs
});
$('body').html(html);//添加到特定元素中去
});
}
</script>
</head>
<body>
<script id="tpl" type="text/html">
姓名：<%= target['name'] %>
性别：<%= target['sex'] %>
年龄：<%= target['age'] %>
</script>
</body>
</html>