## 模版引擎
### 引入
我们在使用ajax请求数据时,返回的如果是一个 JSON 格式的字符串,我们需要将其包装到对应的HTML代码中,再添加到页面上,才能看到效果。那么这个包装得过程有没有简单的方法呢?
假设在 js 中有如下数据:
```javascript
var obj = {
name:"fox",
age:18,
skill:"卖萌"
};
```
希望包装为:
```html
```
我们可以通过模板插件来实现。
### 模版插件的原理
我们定义一段文本作为模板,读取文本,使用特殊的符号<%= 属性名 %>,通过正则表达式找到这些特殊的符号进行替换,是不是就实现了这样的效果呢?
### 常见的模板引擎
- BaiduTemplate(百度开发)
- ArtTemplate(腾讯开发):[GitHub地址](https://github.com/aui/art-template)、[文档地址](https://aui.github.io/art-template/zh-cn/docs/)。
- velocity.js(淘宝开发)
- Handlebars
## ArtTemplate
标准语法:
```html
{{if user}}
{{user.name}}
{{/if}}
```
渲染模板:
```javascript
var data = {
title: `标签`,
list: [`文艺`, `博客`, `摄影`]
};
var html = template(`test`, data);
document.getElementById(`content`).innerHTML = html;
```
举例:
```html
Title
```
效果:
![](http://img.smyhvae.com/20180301_1223.png)