ajax-模板引擎的使用

ゝ一纸荒年。 2023-07-07 08:18 23阅读 0赞

无论是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.onload=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>
    		<p>默认转义：{
       {value}}</p>