JavaScript对Ajax生成节点的JS模板化

Posted yongh701

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript对Ajax生成节点的JS模板化相关的知识,希望对你有一定的参考价值。

在《【javascript】兼容IE6的JS模板化》(点击打开链接)和《【jQuery】利用jTemplates实现兼容IE6的jQuery模板化》(点击打开链接)我曾经提到如何分别在javascript和jquery完成前端模板化,让前端代码规范起来。不过现在的许许多多的网页框架,好像Springmvc和Thinkphp甚至连微软的ASP.NET都有自家的一套,将前端后端形成起来,根本无须这些JS、JQ模板化插件干预,即可以完成前端的模板化。然而,这些JS、JQ模板化还是有派得上场的时候,因为你确实会遇到有些网页节点要经历一系列js,经过ajax完成一系列操作之后,才能生成。

譬如,如下图,要用户点击按钮才能生成一些节点


那么如何对Ajax生成节点的JS模板化呢?本文将说明这个问题。


一、JS模板化组件template.js对Ajax生成节点的JS模板化

上面这段代码你打算怎么写呢?如果还是像下面这种写法,那么很容易,在js部分,写很多html的代码。而且一般情况,在网页拼节点肯定不只是就<h1></h1>样式这么简单。常常伴随着<div style=""></div>这样一大串东西。就算你将js代码的html部分排版得再怎么好,这还是会导致你的js代码很难看,毕竟html是html,js是js。你在html写<></>这样的双节点,肯定是满满的违和感。

<!DOCTYPE html>
<html>
	<head>
		<title>Template_Js</title>
	</head>
	<body>
		<button οnclick="ajax_generation()">点击生成一行</button>
		<div id="generation">
		</div>
	</body>
	<script>
		function ajax_generation()
			alert("经历了一系列ajax运算之后");
			var a=Math.random();			
			document.getElementById('generation').innerHTML += "<h1>"+a+"</h1>";			
		
	</script>	
</html>

根据《【JavaScript】兼容IE6的JS模板化》( 点击打开链接)介绍过的template.js原理,我们完全可以将传统写法的js中的html代码,移回html部分。如下所示:

<!DOCTYPE html>
<html>
	<head>
		<title>Template_Js</title>
	</head>
	<body>
		<button οnclick="ajax_generation()">点击生成一行</button>
		<div id="generation"><!--一般要渲染的部分给个id-->
		</div>
		<script id="generation_tpl" type="text/html"><!--指明需要被template.js渲染的部分-->
			<h1>a=<%:=a%></h1>
		</script>
	</body>
	<script src="template.js"></script><!--引入的template.js,这里的引入必须在body节点之下,否则可能无法对上面的模板渲染-->
	<script>
		function ajax_generation()
			alert("经历了一系列ajax运算之后");
			var html = template(document.getElementById('generation_tpl').innerHTML, 
				a:Math.random()
			);			
			document.getElementById('generation').innerHTML += html;			
		
	</script>	
</html>

你需要在js生成什么,在id为generation_tpl的script写好一个模板,有数据渲染的部分,用template.js的方法写好,比如,这里的<%:=a%>就会被替换成Math.random()。

因为<script id="generation_tpl" type="text/html">是在html部分的body节点中,所以写下script下的html的东西,就能被任何html代码的ide完美解释。


二、JQ模板化组件jTemplates对Ajax生成节点的JS模板化

那么在JQ下,用jTemplates则如何写呢?这个组件,有点麻烦,因为这个组件貌似只是考虑到前端模板化的事情,似乎对Ajax生成节点的JS模板化欠缺考虑,但不代表不能完成,虽然代码写多了一点。具体如下:

<!DOCTYPE html>
<html>
	<head>
		<title>jTemplates</title>
		<script src="jquery-1.8.3.min.js"></script>
		<script src="jquery-jtemplates.js"></script>
	</head>
	<body>
		<button οnclick="ajax_generation()">点击生成一行</button>
		<textarea id="generation_tpl" style="display:none">
			<h1>a=$T.a</h1>
		</textarea>
		<div id="generation"><!--指明要被模板化的段落,给一个id-->
		</div>
	</body>
	<script>
		function ajax_generation()
			alert("经历了一系列ajax运算之后");
			var data =  
				a: Math.random() 
			;
			var id=Math.random();
			$("#generation").append("<p></p>");			
			$("#generation>p:last").setTemplateElement("generation_tpl").processTemplate(data);
			//template指上面要实现模板化的id,这里的data就是上面存放模板化数据的json变量名
		
	</script>
</html>

这里由于,不像template.js是先在javascript生成一个html,再自己手动用document.getElementById('generation').innerHTML=xx的方法放到html代码之中,而是直接封装好一个方法setTemplateElement将一个网页节点内的东西全部给替换,所以,我们需要先利用jquery,用append或者prepend,在该节点最前面或者最后面添加一个div或者p节点,再利用:first或者:last找到第一个div或者p或者最后一个div和p,也就是我们自己生成的东西,再利用方法setTemplateElement将模板<textarea id="generation_tpl" style="display:none">下面的东西放到<div id="generation">我们生成的div或者p节点当中,以免替换掉<div id="generation">里面原有的东西。

至于jquery对网页节点的增删改查不熟悉者,可以参考《【jQuery】对网页节点的增删改查》(点击打开链接)。

以上是关于JavaScript对Ajax生成节点的JS模板化的主要内容,如果未能解决你的问题,请参考以下文章

如何使用Django模板在javascript中访问ajax jquery中的模板变量

使用 Django 进行 Javascript 模板化

JavaScript之form表单的序列化和json化[form.js]

使用 javascript 库的社交网络图 [关闭]

怎么获取JavaScript语句中的文本信息?如下图所示

JavaScript中template模板引擎