JavaScript与JSON数据交互实现的基于HTML的模板

JavaScript与JSON数据交互实现的基于HTML的模板

每每完成一个项目或多或少总是有些收获的，有时候有很多好多东西需要积累分享，这样以后的项目开发就会越来越效率的哈，这不现在准备用以前项目开发中用到的东西，觉得还不错，整理了写出来分享下。写文章前我也在网上找了挺多Javascript模板之类的文章，没发现太多满意的，就找到一篇可着得给力点儿的，兴许还有许多给力的没发现，欢迎你推荐分享，好了，费话不多说，切入正题了。

首先准备我们要的Json数据，简单点儿的来这第一串数据

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
== null) {
33
34             tmp = tmp.ReplaceTemplate(n, "");
35         }
36         else {
37             tmp=tmp.ReplaceTemplate(n,json
);
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代码提取出来也就可以用了。如果觉得不错，欢迎转载，请注明出处/article/5449615.html，如果有更好的实现也期待你的分享。