标签：
之前在一个项目的时候，很多页面需要AJAX传值来渲染页面，每到这个时候，自己也觉得很头痛，因为每次渲染的时候，都使用的是把HTML代码拼接上去，一代代码量大了，很容易出错，还有就是没有易读性，在做完整个项目后，自己也觉得一定会有更好的办法，后来在一个朋友的帮助下，认识总算的到了一个他们使用的方案，让我豁然开朗，不一定是最优解，但是一定比使用HTML拼接更加容易维护更容易让人读懂。我把代码认真的读了几次，几乎把每一行都注释了，也写出了自己的疑问，希望大神解答。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery.js"></script>
<title>Document</title>
</head>
<body>
<!--非循环-->
<div id="container" class="">
<p>$[name]</p>
<p>$[age]</p>
<p>$[salary]</p>
</div>
<!--循环-->
<!--模板 （不显示）-->
<div id="template" style="display:none">
<div>
$[name]<br/>
$[title]
</div>
</div>
<div id="container1" class="">
</div>
<a id="more">点击加载更多</a>
</body>
</html>
<script type="text/javascript">
var json = {
name:‘test‘,
age:15,
salary:5500
}
//不循环绑定数据的话就直接指定容器
replaceElementInnerText($(‘#container‘),json)
var json1 = {
name : "这是循环的结果",
title:"这是循环结果2"
}
$(‘#more‘).click(function(){
var json2 = [{name:‘name测试1‘,title:‘title测试1‘},{name:‘name测试2‘,title:‘title测试2‘},{name:‘name测试3‘,title:‘title测试3‘}]
var temp = $(‘#template‘).children().prop(‘outerHTML‘);//获取template的子元素的HTML（包括自身）
for(var i = 0;i <3;i++){//确定需要生成新模板的循环
var $temp = $(temp);//把模板转换为JQ对象
replaceElementInnerText($temp,json2[i]);
$(‘#container1‘).append($temp);
}
})
//替换函数
function replaceElementInnerText (ele, data) {
var $ele,innerHTML;//创建两个变量
if(typeof ele == ‘string‘){//判断ele是否为对象还是字符串，是字符串就再次转换为对象
$ele=$(ele);
innerHTML=$ele.html();//然后调出此对象的HTML
}else{//如果是对象
$ele=(ele instanceof jQuery)?ele:$(ele);//就判断ele的实例对象是否为jq如果不是则转换为jq对象
innerHTML=$ele.html();//得到此对象的HTML
}
var pattern=/\$\[(\w+\.*\w*)]/g;//正则式，根据自己规则来编写
var replace_attr=[];//创建一个空数组，用来装即将匹配的文本
var i=0;
while(i++<100) {
var result = pattern.exec(innerHTML);//把innerHTML放入正则式去搜索
if (!result) {//如果搜索不到，循环结束
break;
}
replace_attr.push(result[1]);//把搜索到的文本添加到预先准备的数组里
}
for(var key in replace_attr){//给数组循环
var replace=new RegExp(‘\\$\\[‘+replace_attr[key]+‘\\]‘,‘g‘);//创建一个正则式
if(replace_attr[key].indexOf(".")>0){//如果当前名字里有.去掉点，拆分为数组（注：这里自己感觉太累赘，可能我哪里没有想到）
var replace_attr_keys=replace_attr[key].split(".");
var replace_attr_str="data";//创建一个字符串，用于后面的拼接
if(!data[replace_attr_keys[0]]||typeof data[replace_attr_keys[0]]!==‘object‘){
continue;
}
for(var _key in replace_attr_keys){//循环拆分出来的数组
replace_attr_str+=‘[\‘‘+replace_attr_keys[_key]+‘\‘]‘;//拼接拆分猪来的数组
}
if(eval(replace_attr_str)!=null){
innerHTML=innerHTML.replace(replace,eval(replace_attr_str));//把值替换为后台服务器传值
}
}else{
if(data[replace_attr[key]]!=null){
innerHTML=innerHTML.replace(replace,data[replace_attr[key]]);//把值替换
}
}
}
$ele[0].innerHTML=innerHTML;
/* $ele.find(‘img[img-load="load"]‘).each(function () {
var reg=new RegExp("(http|ftp|https):\/\/w*");
if(reg.exec($(this).attr(‘_src‘))){
$(this).attr("src",$(this).attr(‘_src‘));
}
});图片替换原理相同，这里没有图片所以注释*/
return $ele[0].outerHTML;//函数返回值
}
再次感谢这位朋友，让我认识到前后端分离，框架，模块化管理。共勉！！
标签：
原文地址：http://www.cnblogs.com/daizixiaobai/p/5766037.html
