开发者学堂课程【Ajax 前端开发入门与实战：Artlemplate 的常用方法】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/595/detail/8553
Artlemplate 的常用方法
artTemplate 的常用方法实例
1. 实例代码如下:
<! DOC TYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板引擎</title>
<script type="text/javascript" src="./template.js"></script>
<script type="text/javascript">
window.onload = function(){
var data = {
title :"四大名著图书信息"，
books:['三国演义,水浒传"，西游记",'红楼梦']
};
}
</ script>
</head>
<body>
<div id=""container">
<h1>标题</h1>
<div>书名1</div>
<div>书名2</div>
<div>书名3</div>
</div>
</body>
</html>
div 下面的静态数据通过 data 动态数据进行填充，所以通过使用模板引擎；定义一个模板（生成一个 html 片段）：
<script type="text/html" id="resultTemplate">
<h1>{{title}}</h1>
{{each books as value i}}
<div>{{value}}</div>
{{/each}}
</script>
模板传递代码传递：
<script type="text/javascript">
window.onload = function(){
var data = {
title :"四大名著图书信息"，
books:['三国演义,水浒传"，西游记",'红楼梦']
};
var html = template( "resultTemplate",data);
此时 html 片段就生成完成，接下来进行操作如下（找出容器）：
var container = document.querySelector(""#container");
container.innerHTML = html;
最后运行代码结果如下：
四大名著图书信息
三国演义
水浒传
西游记
红楼梦
2.实例代码进行html模板生成
< ! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./template.js"></script>
<script id="test" type="text/html">
{{if isAdmin}
<h1>iititle}}</h1>
<ul>
{{each listas value i}
<li>索引 {{i +1:{{value}}</li>
{{/each}}
</ul>
{/if)}
</script>
<script>
window.onload = function(){
var data = {
title:‘条件判断基本例子'，
isAdmin: true,
list:['文艺，‘博客'，‘摄影'，‘电影'，'民谣'，'旅行'，'吉他']};
}</script>
</head>
添加代码进行html片段生成：
var html = template("test",data);
document.querySelector("#content).innerHTMNL =html；
添加执行后刷新效果如：
条件判断基本例子
索引 1 文艺
索引 2 博客
索引 3 摄影
索引 4 电影
索引 5 民谣
索引 6 旅行
索引 7 吉他
如果把 isAdmin 的值改为 false ，刷新界面将没有内容；因为有一个条件判断，只有 isAdmin 的值为 true 才会生成片段。
添加提示信息（将会出现提示信息界面）：
{{/if}
{fif !isAdminI
<h1>没有任何数据</h1>
{{/if)}}
显示信息的总数量场景代码如下：
{{if isAdmin}}
<h1>{ititle}}</h1>
<h2>一共有{[1ist.length}条数据</h2>
<ul>
{feach list as value i}}
<li>索引i{i +1)): ffvalue})</li>
{{/each}}
</ul>
{{/if)}
把isAdmin的值改为true，执行代码结果为：
条件判断基本例子
一共有7条数据
索引 1 文艺
索引 2 博客
索引 3 摄影
索引 4 电影
索引 5 民谣
索引 6 旅行
索引 7 吉他
另外一种操作：
<h1>{ititle}}</h1>
<h2>一共有{{count}}条数据</h2>
data.count = data.list.length;
var htmr = template("test",data);
document.querySelector( "#content").innerHTML = html;
执行代码结果如下：
条件判断基本例子
一共有7条数据
索引 1 文艺
索引 2 博客
索引 3 摄影
索引 4 电影
索引 5 民谣
索引 6 旅行
索引 7 吉他
3. 实例代码（举例）
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src=". /template.js"></script>
<script id="test" type="text/html">
<ul>
{{each arr as value i}}
<li>{{value}}</li>
{{/each}}
</ul>
</script>
<script>
window.onload = function(){
var data=I['文艺'，‘博客'，'摄影'，'电影'，‘民谣'，‘旅行'，‘吉他'];
var temp={};
temp.arr=data;
template(“test”,data);
document.querySelector(“#content”).innerHTML=html;
}
</script>
</head>
<body>
<div id="content">
<ul>
<1i>文艺</i>
<li>博客</li>
</ul>
</div>
</body>
</html>
代码执行结果如下：
文艺
博客
摄影
电影
民谣
旅行
吉他
4.案例转义与不转义代码：
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./template.js"></script>
<script id-"test" type="text/html">
<p>不转义:{{#value}}</P>
<p>默认转义:{{value}}</p>
</script>
<script>
window.onload = function({
//这里的数据当中包含特殊字符
var data = {
value:‘<span style="color : #FOo">hello world!</ span>
};
var html = template( 'test", data);
document.getElementById( ' content ').innerHTML = html;
}
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
执行代码结果如下：
不转义：hello world！
默认转义：<span style=”color:#F00”>hello wprld!</span>
4.知识回顾：
无论是 Ajax 还是跨域，目的都是为了获取服务器的数据，获取数据之后将前端界面进行渲染。怎么渲染前端界面呢﹖前端界面都是由标签构成的，所以前端界面的渲染主要做的就是生成 html 标签。
生成 html 标签我们可以通过拼接字符串的方式来实现。这种方式在标签结构比较复杂的情况之下很不好操作和后期的维护，并且容易出错。接下来就介绍一种技术叫做模板引擎，通过模板引擎我们可以很方便的生成 html_ 标签。
模板引擎的本质:将数据和模板结合起来生成 htal 片段。所以横板引擎需要两个组成部分﹔模板和数据，通过数据，将模板指定的标签动态生成，方便维护。
常见的模板引擎有很多，这里介绍一个效率最高的模板引擎 axtTeaplate ，这是腾讯公司出品的开源的模板引擎,在 github_ 上可以下载到源代码。
5.使用步嘘如下:
1、引入 js 文件
2、定义模板
3、将数据和模板结合起来生成 html 片段
4、将 htal 片段渲染到界面中
基本语法:
得到数据中的值【[valuel }
循环操作{{each result as valu i }}{ {/each}}
转义:#的使用{{wvaluel}
条件判断{{if xxx}}{{/if}}
技巧:有时候有可能需要对原始数据进行加工操作
