高性能模板引擎artemplate的使用

由于目前主流的开发模型是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>