无论是Ajax还是跨域,目的都是为了获取服务器的数据,获取数据之后将前端界面进行渲染。
怎么渲染?
前端界面都是由标签构成的,所以前端界面的渲染主要做的就是生产html标签。
但是通过字符串拼接,有的时候会很复杂,也难以维护。
我们可以通过模板引擎来很方便的生成HTML标签
模板引擎的本质:将数据和模板结合起来生成HTML片段。所以模板引擎需要两个组成部分:模板和数据,通过数据,将模板指定的标签动态生成,方便维护。
常见的模板引擎有很多,效率最高的:artTemplate。在github上可以下载源代码。
模板引擎应用-数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板引擎</title>
<script type="text/javascript" src="./template.js"></script>
<script type="text/html" id="test">
<ul>
//在each这里循环数组data从而达到输出的目的
{{each arr as value i}}
<li>{{value}}</li>
{{/each}}
</ul>
</script>
<script>
window.οnlοad=function(){
var data=['文艺','博客','摄影','电影','民谣','旅行','吉他'];
var temp={};
temp.arr=data;
//模板和数据结合起来,生成html片段
var html=template("test",temp);
//将数组放到<div>标签内
document.querySelector("#content").innerHTML=html;
</script>
</head>
<body>
<div id="content">
</div>
</body>
</html>
模板引擎-标签转义
<p>不转义:{{#value}}</p><!--value前加#,就可以识别标签了-->
<p>默认转义:{{value}}</p>