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

来源：互联网发布：java上溯造型编辑：程序博客网时间：2024/05/18 18:00

在《【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 onclick="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 onclick="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 onclick="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】对网页节点的增删改查》（点击打开链接）。

阅读全文

0 0