JavaScript与JSON数据交互实现的基于HTML的模板
JavaScript与JSON数据交互实现的基于HTML的模板
每每完成一个项目或多或少总是有些收获的，有时候有很多好多东西需要积累分享，这样以后的项目开发就会越来越效率的哈，这不现在准备用以前项目开发中用到的东西，觉得还不错，整理了写出来分享下。写文章前我也在网上找了挺多Javascript模板之类的文章，没发现太多满意的，就找到一篇可着得给力点儿的，兴许还有许多给力的没发现，欢迎你推荐分享，好了，费话不多说，切入正题了。
首先准备我们要的Json数据，简单点儿的来这第一串数据
1 var json = {
2 "dataInfo" : [
3 {
4 "name": "李红" ,
5 "sex": "女" ,
6 "age": "12"
7 },
8 {
9 "name": "李四" ,
10 "sex": "男" ,
11 "age": "18"
12 },
13 {
14 "name": "张明" ,
15 "sex": "男" ,
16 "age": "98"
17 }
18 ]
19 }
接下来看看HTML模板长啥样儿
1 < table border ="1" style =" 500px;" >
2 < tbody ></ tbody >
3 < tbody id ="body" style ="display: none;" >
4 < tr >
5 < td > {$name$} </ td >
6 < td > {$sex$} </ td >
7 < td > {$age$} </ td >
8 </ tr >
9 </ tbody >
10 </ table >
OK,接下来就是我们的JavaScript代码了，先定义名为MiniCore的命名空间，JSON数据定义在Box里，剩下的工作就是替换模板循环数据追加的工作了
View Code
1 // 1、命名空间
2 var MiniCore = {};
3 MiniCore.Box = function () {
4 this .Data = {};
5 }
6 // 2、定义替换$key$为数据的模板
7 String.prototype.ReplaceTemplate = function (key, recnt)
8 {
9 var content = this ;
10 var tkey = "content.replace(/\\{\\$" + key + "\\$\\}/g,'" + recnt + "')" ;
11 var tkey2 = "content.replace(/\\%7B\\$" + key + "\\$\\%7D/g,'" + recnt + "')" ;
12 try {
13 content = eval(tkey);
14 } catch (e) {
15 tkey = "content.replace(/\\{\\$" + key + "\\$\\}/g,'')" ;
16 content = eval(tkey);
17 }
18 try {
19 content = eval(tkey2);
20 } catch (e) {
21 tkey2 = "content.replace(/\\%7B\\$" + key + "\\$\\%7D/g,'')" ;
22 content = eval(tkey2);
23 }
24 return content;
25 }
26 // 3、运用模板将$key$全替换成数据（本例中<tr>标签中含有$key$替换成json数据）
27 String.prototype.ReplaceJson= function (json)
28 {
29 if (json == null ) { return this };
30 var tmp = this ;
31 for (n in json) {
32 if (json[n] == null ) {
33
34 tmp = tmp.ReplaceTemplate(n, "" );
35 }
36 else {
37 tmp= tmp.ReplaceTemplate(n,json[n]);
38 }
39 }
40 return tmp;
41 }
42 // 4、定义移除模板的函数
43 function Clear(templateID)
44 {
45 var parent = $("#" + templateID).prev();
46 var tid = "ID" + new Date().getTime();
47 parent.attr("ID" , tid);
48 $("#" + tid + ">[id!='" + templateID + "']" ).remove();
49 return parent;
50 }
51 // 5、循环绑定追加Json数据
52 MiniCore.Box.prototype.Bind = function (templateID)
53 {
54 var instance = Clear(templateID);
55 var templateHtml = $("#" + templateID).html();
56 for ( var i = 0; i < this .Data.length; i++ ) {
57 instance.append(templateHtml.ReplaceJson( this .Data[i]));
58 }
59 return this ;
60 }
前端调用非常简单的
1 $( function () {
2 var box = new MiniCore.Box();
3 box.Data = json.dataInfo;
4 box.Bind("body" );
5 });
前端调用，几行代码就ok
1 $( function () {
2 var box = new MiniCore.Box();
3 box.Data = json.dataInfo;
4 box.Bind("body" );
5 });
就这么简单，一切搞定，还是上张效果图
再看看生成的代码截图，到这儿你是否明白了呢
好了，代码基本就这些，也不多吧，Js代码提取出来也就可以用了。如果觉得不错，欢迎转载，请注明出处 http://www.cnblogs.com/gtzhou/archive/2013/03/30/2990810.html ，如果有更好的实现也期待你的分享。
分类: jQuery , ASP.NET
标签: JavaScript , JSON数据 , HTML模板
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于JavaScript与JSON数据交互实现的基于HTML的模板的详细内容...