337 模板引擎artTemplate
是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
为什么要使用模板引擎
我们通过ajax获取到数据后，需要把数据渲染到页面，在学习模板引擎前，我们的做法是大量的拼接字符串，对于结构简单的页面，这么做还行，但是如果页面结构很复杂，使用拼串的话代码可阅读性非常的差，而且非常容易出错，后期代码维护也是相当的麻烦。
【演示：使用拼串进行渲染的缺点.html】
作用：代替前面渲染数据是拼接字符串操作
实际工作渲染数据使用的模板引擎
常见的模板引擎
BaiduTemplate：http://tangram.baidu.com/BaiduTemplate/
velocity.js：https://github.com/shepherdwind/velocity.js/
ArtTemplate：https://github.com/aui/artTemplate
artTemplate是使用最广泛，效率最高的模板引擎，需要掌握。
artTemplate的使用
artTemplate语法
1、{{}}中写js代码。
2、if语法
{{if gender='男'}} // 开始
<div class="man">
{{else}}
<div class="woman">
{{/if}} // 结束
补充
{{if gender='男'}}
<div class="man">
{{else if}}
<div class="woman">
{{else}}
<div class="other">
{{/if}}
3、each语法【循环遍历】
<!--
1. {{each data}}： 可以通过$value 和 $index获取值和下标
2. {{each data v i}}： 自己指定值为v，下标为i。【v代表当前循环项，i不是必写。】
-->
{{each data v i}}
<li>
<a href="{{v.url}}">
<img src="{{v.src}}" alt="">
<p>{{v.content}}</p>
</a>
</li>
{{/each}}
//如果返回的数据是个数组，必须使用对象进行包裹，因为在{{}}中只写书写对象的属性。
var html = template("navTmp", {data:info});
artTemplate使用步骤
1.引入模板引擎的js文件
<script src="template-web.js"></script>
2.准备模板
注意：
1- 模版接收的数据必须是对象{}，如果不是，要把数包装成对象，在进行使用
2- 在模版中直接使用属性名，不需要写对象名
<!-- 指定了type为text/template后，这一段script标签并不会解析，也不会显示。 -->
<!-- type="text/html" -->
<script type="text/template" id="tmp">
<p>姓名：{{ username }}</p>
<p>年龄：{{ age }}</p>
<p>技能：{{ skill }}</p>
<p>描述：{{desc }}</p>
</script>
3.准备数据
// 3. 准备数据,数据是后台获取的，可以随时变化
var json = {
userName:"隔壁老王",
age:18,
skill:"查水表",
desc:"年轻气壮"
}
4.将模板与数据进行绑定
注意：传递给模板引擎的数据必须是对象
// 第一个参数：模板的id
// 第二个参数：数据
// 返回值：根据模板生成的字符串。
var html = template("myTmp", json);
console.log(html);
5.将数据显示到页面
var div = document.querySelector("div");
div.innerHTML = html;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
<script src="../../template-web.js"></script>
<script type="text/html" id="tpl">
<ul>
<li>
<h1>{{title}}</h1>
</li>
{{each nav}}
<li>{{$value}}-{{$index}}</li>
{{/each}}
</ul>
</script>
<script>
var obj = {
title: '岗位',
nav: ['大前端', 'java', '大数据', 'python', 'UI设计', '产品经理']
}
let content = template('tpl', obj)
document.body.innerHTML = content
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
<script src="../../template-web.js"></script>
<script type="text/html" id="tpl">
<ul>
<li>
<h1>{{title}}</h1>
</li>
{{each nav v}}
<li>{{v}}</li>
{{/each}}
</ul>
</script>
<script>
var obj = {
title: '岗位',
nav: ['大前端', 'java', '大数据', 'python', 'UI设计', '产品经理']
}
let content = template('tpl', obj)
document.body.innerHTML = content
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
<script src="../../template-web.js"></script>
<script type="text/html" id="tpl">
<ul>
<li>
<h1>{{title}}</h1>
</li>
{{each nav v i}}
<li>{{v}}-{{i}}</li>
<!-- <li>{{nav[i]}}-{{i}}</li> -->
{{/each}}
</ul>
</script>
<script>
var obj = {
title: '岗位',
nav: ['大前端', 'java', '大数据', 'python', 'UI设计', '产品经理']
}
let content = template('tpl', obj)
document.body.innerHTML = content
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../../bootstrap.css">
</head>
<body>
<button>获取数据</button>
<table class="table">
<!-- 动态渲染 -->
</table>
<!--2- 准备模版 -->
<script type="text/html" id="tmp">
{{ each list v i }}
<tr>
<td>{{ v.id }}</td>
<td>{{ v.name }}</td>
<td>{{ v.age }}</td>
<td>{{ v.sex }}</td>
<td>{{ v.tel }}</td>
<td>{{ v.photo }}</td>
<td>{{ v.nickname }}</td>
</tr>
{{ /each }}
</script>
<!-- $.ajax -->
<script src="../../jquery-1.12.4.min.js"></script>
<!--1- template() -->
<script src="../../template-web.js"></script>
<script>
//点击按钮，获取后台的数据，使用模版引擎，渲染在页面
$('button').click(function() {
$.ajax({
url: './stu.php',
dataType: 'json',
success: function(info) {
// console.log(info); // info是数组
// 渲染
// 3-准备数据， 给模版的数据必须是对象{}，info数组，要包装
var obj = {
list: info
};
var str = template('tmp', obj); // 把数据和模版进行绑定
// var str = template('tmp', {
// list: info
// }); // 直接这样写更好，少一步
$('table').html(str); // 渲染
}
})
})
</script>
</body>
</html>
