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

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

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

var json ={
    "dataInfo": [
        {
            "name": "李红",
            "sex": "女",
            "age": "12"
        },
        {
            "name": "李四",
            "sex": "男",
            "age": "18"
        },
        {
            "name": "张明",
            "sex": "男",
            "age": "98"
        }
    ]
}

接下来看看HTML模板长啥样儿

 <table border="1" style="width: 500px;">
                <tbody></tbody>
                <tbody id="body" style="display: none;">
                    <tr>
                        <td>{$name$}</td>
                        <td>{$sex$}</td>
                        <td>{$age$}</td>
                    </tr>
                </tbody>
</table>

OK,接下来就是我们的JavaScript代码了，先定义名为MiniCore的命名空间，JSON数据定义在Box里，剩下的工作就是替换模板循环数据追加的工作了

//1、命名空间
var MiniCore = {};
MiniCore.Box = function () {
    this.Data = {};
}
//2、定义替换$key$为数据的模板
String.prototype.ReplaceTemplate = function (key, recnt)
{
    var content = this; 
    var tkey = "content.replace(/\\{\\$" + key + "\\$\\}/g,'" + recnt + "')";
    var tkey2 = "content.replace(/\\%7B\\$" + key + "\\$\\%7D/g,'" + recnt + "')";
    try {
        content = eval(tkey);
    } catch (e) {
        tkey = "content.replace(/\\{\\$" + key + "\\$\\}/g,'')";
        content = eval(tkey);
    }
    try {
        content = eval(tkey2);
    } catch (e) {
        tkey2 = "content.replace(/\\%7B\\$" + key + "\\$\\%7D/g,'')";
        content = eval(tkey2);
    }
    return content;
}
//3、运用模板将$key$全替换成数据（本例中<tr>标签中含有$key$替换成json数据）
String.prototype.ReplaceJson= function (json)
{
    if (json == null) { return this };
    var tmp = this;
    for (n in json) {       
        if (json[n] == null) {

            tmp = tmp.ReplaceTemplate(n, "");
        }
        else {
            tmp=tmp.ReplaceTemplate(n,json[n]);
        }
    } 
    return tmp;
}
//4、定义移除模板的函数
function Clear(templateID)
{
    var parent = $("#" + templateID).prev(); 
    var tid = "ID" + new Date().getTime();
    parent.attr("ID", tid);
    $("#" + tid + ">[id!='" + templateID + "']").remove();
    return parent;    
}
//5、循环绑定追加Json数据
MiniCore.Box.prototype.Bind = function (templateID)
{
    var instance = Clear(templateID);
    var templateHtml = $("#" + templateID).html();   
    for (var i = 0; i < this.Data.length; i++) {        
        instance.append(templateHtml.ReplaceJson(this.Data[i]));
    }
    return this;
}

前端调用，几行代码就ok

 $(function () {
            var box = new MiniCore.Box();
            box.Data = json.dataInfo;
            box.Bind("body");
 });

就这么简单，一切搞定，还是上张效果图

再看看生成的代码截图，到这儿你是否明白了呢

好了，代码基本就这些，也不多吧，Js代码提取出来也就可以用了。如果觉得不错，欢迎转载，请注明出处http://www.cnblogs.com/gtzhou/archive/2013/03/30/2990810.html，如果有更好的实现也期待你的分享。