开发者学堂课程【Ajax 前端开发入门与实战：改造百度提示案例】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/595/detail/8552
改造百度提示案例
目录：
一、模板引擎的本质
二、常见的模板引擎
无论是 Ajax 还是跨域，目的都是为了获取服务器的数据，获取数据之后将前端界面进行渲染。
如何渲染前端界面?
前端界面都是由标签构成的，所以前端界面的渲染主要做的就是生成 html 标签。
生成 html 标签就通过拼接字符串的方式来实现。这种方式在标签结构比较复杂的情况之下很不好操作和后期的维护，并且容易出错。
所以有一种技术叫做模板引擎,通过模板引擎可以很方便的生成 html 标签。
一、模板引擎的本质
模板引擎的本质:将数据和模板结合起来生成 html 片段。所以模板引擎需要两个组成部分:模板和数据，通过数据，将模板指定的标签动态生成，方便维护。
获取相关提示案例之后，所需要做的就是生成一系列的 li 标签，将服务器当中的所获取的结果展示给用户看，所以就是要生成一系列的 li 标签。
最开始是使用的字符串拼接的方式生成一个又一个的 li 标签，然后将标签放在 ul 里面。（通过字符串拼接的方式也能够生成一系列的标签）
但是有一个缺点就是一旦复杂起来就会相对麻烦，在后期维护工作也会非常麻烦。所以就可以使用模板引擎。
<！DCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text javascript" src=" myutils. js"></script>
<script type="text javascript" src="jquery. js"></script>
<script type=" text/ javascript" >
window . onload = function(){
var btn = document . querySelector(" #btn" );
btn.onclick = function(){
varkeywordValue=document.querySelector("#keyword" ) .value;
console . log(keywordValue);
$.ajax({
url:"https://spØ.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su" ,
data : (wd:keywordValue],
success:function( data){
console. log(data);
},
var liTag = "";
for(var i-0;i<data.s. length;i+)f
var temp= data.s[i];
//liTag += "<li>"+temp+"</li>";
liTag+= "<li>div><span>#Æ"+i+" :</span><span>"+temp+"</span>/div></li>" I
var ulTag = document . querySelector("ul");
ulTag. innerHTML = liTag;
),
dataType:"jsonp" ,
jsonp: "cb"
]);
（就是用一些字符串拼接的方式）
测试：
输入 java
结果0: java 培训
结果1: java 教程
结果2: javascript
结果3: java 环境变量设置
结果4: java api 1.7 中文
结果5: javaee
结果6: java8
结果7: java map
结果8: jav a 编程思想
结果9: javascript 教程
就有相应数据的输出。
前端结构进行变化
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
将结构进行变化一下：所以将不会是 li 标签
<li>
<div>
<span>结果1：</span>（这个span用来描述信息）
<span>1：</span>（这个span展示的是服务器相关的数据）
</div>
</li>
<li>
<div>
<span>结果1：</span>（这个span用来描述信息）
<span>1：</span>（这个span展示的是服务器相关的数据）
</div>
</li>
<li>
<div>
<span>结果1：</span>（这个span用来描述信息）
<span>1：</span>（这个span展示的是服务器相关的数据）
</div>
</li>
<li>
<div>
<span>结果1：</span>（这个span用来描述信息）
<span>1：</span>（这个span展示的是服务器相关的数据）
</div>
</li>
<li>
<div>
<span>结果1：</span>（这个span用来描述信息）
<span>1：</span>（这个span展示的是服务器相关的数据）
</div>
</li>
具体展示为：
结果1：1
结果1：1
结果1：1
结果1：1
结果1：1
获取到服务器数据后，就要生成一系列这种结构的li标签。
二、常见的模板引擎
常见的模板引擎有很多，例如一个效率最高的模板引擎 artTenplate ,这是腾讯公司出品的开源的模板引擎，在 github 上可以下载到源代码。以下是 artTenplate 的具体使用。
使用步骤如下:
1、引入 js 文件
<script type=" text/ javascript" src=" template. Js”></script>
2、定义模板
<!-- 1. 模板的 type-text/html 2.给模板配一个 id data.s-->
<script type=" text/html" id=" resultTemplate">
{{each s as value i}}
<li>
<div>
<span>结果{{i}}:</span>
< span>{{value}}</span>
</div>
</li>
{{/each]]
</script>
//template方法的含义就是将数据和模板结合起来，生成html片段
var html = template("resultTemplate" ,data);
console . log(html);
//var liTag = "";
//for(var i=0; i<data.s. length;i++){
//var temp = data.s[i] ];
//liTag += "<li>"+temp+"</li>" ;
//liTag+="<li><div><span>
结果+i+" :</span><span>"+temp+"</span></div></li>"
// var ulTag = document . querySe lector( "ul" ) ;
// ulTag. innerHTML = liTag
//var ulTag= document . querySelector("ul");
//ulTag IinnerHTML = liTag;
3、将数据和模板结合起来生成 html 片段
4、将 html 片段渲染到界面中
基本语法:
得到数据中的值 {{value}}
循环操作{{each result as value i }} {/eachl}
转义: # 的使用
这种方式比较方便，拥有层次结构，也方便后期的维护。
