JavaScript 模板引擎

做的一个模板引擎绑定Json数据的一个模板引擎，小巧便捷，简单易懂，适合json小数据

效果图

HTML

<table id="table1" class="t1" >
            <thead>
                <tr>
                    <th>编号</th>
                    <th>星期</th>
                    <th>次数</th>
                    <th>营销类型</th>
                    <th colspan="2">操作</th>
                </tr>
            </thead>
            <tbody id="tbody1">
                <tr>
                    <td>{ID}</td>
                    <td>{Week}</td>
                    <td>{counts}</td>
                    <td>{Types}</td>
                    <td><input type="button" value="编辑" onclick="editor('{ID}')" /></td>
                    <td><input type="button" value="删除" onclick="deletes('{ID}')" /></td>
                </tr>
            </tbody>
        </table>

JavaScript 引擎方法

function temp(json,id) {
            var doc = document.getElementById(id);
            var _html = "";
            var docHtmls = doc.innerHTML.replace(/[\r\t\n]/g, " ");

            for (var i = 0; i < json.length; i++) {
                var innerHtmls = docHtmls;
                for (var _json in json[i]) {
                    var value =json[i][_json];//var value = eval("(json[i]." + _json + ")");//==>json[i].ID
                    var _replace = new RegExp("[{]" + _json + "[}]", "g");
                    innerHtmls = innerHtmls.replace(_replace, value);
                }
                _html += innerHtmls;
            }
            doc.innerHTML = _html;
        }

调用

temp(json, "doc");

 

2018/05/08更新模板引擎方法

更新日志：1.添加模板缓存，

                  2.在模板引擎中添加处理json中不存在键的数据处理

//缓存要操作模板
var tempCache = {};
/**
 * 绑定数据到 table
 * @param {} json  后台json数据
 * @param {} trName 前台模板tr id
 * @returns {} object
 */
function bandTableList(json, id) {
    var data = document.getElementById(id);
    var cacheHtmls = tempCache[id] =tempCache[id] || data.innerHTML.replace(/[\r\t\n]/g, " ");
    var tbodyHtml = "";
    for (var i = 0; i < json.length; i++) {
        var innerHtmls = cacheHtmls;
        for (var _json in json[i]) {
            var value = json[i][_json];//var value = eval("(json[i]." + _json + ")");//==>json[i].ID
            var regex = new RegExp("[{]" + _json + "[}]", "g");
            innerHtmls = innerHtmls.replace(regex, value);
        }
        tbodyHtml += innerHtmls.replace(/[{][a-zA-Z0-9]*[}]/g,"");
    }
    data.innerHTML = tbodyHtml;
}

 

 

 

测试Json 

注，在使用json字符串时，注意不能使用json字符串，需要转成对象，可以使用 eval("("+json字符串+")")或者 JSON.parse(json字符串)

[{"ID":1,"Week":"周一","counts":"320","Types":"邮件营销","ord":1},{"ID":8,"Week":"周一","counts":"120","Types":"联盟广告","ord":1},{"ID":15,"Week":"周一","counts":"150","Types":"视频广告","ord":1},{"ID":22,"Week":"周一","counts":"320","Types":"直接访问","ord":1},{"ID":29,"Week":"周一","counts":"820","Types":"搜索引擎","ord":1},{"ID":2,"Week":"周二","counts":"332","Types":"邮件营销","ord":2},{"ID":9,"Week":"周二","counts":"132","Types":"联盟广告","ord":2},{"ID":16,"Week":"周二","counts":"232","Types":"视频广告","ord":2},{"ID":23,"Week":"周二","counts":"332","Types":"直接访问","ord":2},{"ID":30,"Week":"周二","counts":"932","Types":"搜索引擎","ord":2},{"ID":3,"Week":"周三","counts":"301","Types":"邮件营销","ord":3},{"ID":10,"Week":"周三","counts":"101","Types":"联盟广告","ord":3},{"ID":17,"Week":"周三","counts":"201","Types":"视频广告","ord":3},{"ID":24,"Week":"周三","counts":"301","Types":"直接访问","ord":3},{"ID":31,"Week":"周三","counts":"901","Types":"搜索引擎","ord":3},{"ID":4,"Week":"周四","counts":"334","Types":"邮件营销","ord":4},{"ID":11,"Week":"周四","counts":"134","Types":"联盟广告","ord":4},{"ID":18,"Week":"周四","counts":"154","Types":"视频广告","ord":4},{"ID":25,"Week":"周四","counts":"334","Types":"直接访问","ord":4},{"ID":32,"Week":"周四","counts":"934","Types":"搜索引擎","ord":4},{"ID":5,"Week":"周五","counts":"390","Types":"邮件营销","ord":5},{"ID":12,"Week":"周五","counts":"90","Types":"联盟广告","ord":5},{"ID":19,"Week":"周五","counts":"190","Types":"视频广告","ord":5},{"ID":26,"Week":"周五","counts":"390","Types":"直接访问","ord":5},{"ID":33,"Week":"周五","counts":"1290","Types":"搜索引擎","ord":5},{"ID":6,"Week":"周六","counts":"330","Types":"邮件营销","ord":6},{"ID":13,"Week":"周六","counts":"230","Types":"联盟广告","ord":6},{"ID":20,"Week":"周六","counts":"330","Types":"视频广告","ord":6},{"ID":27,"Week":"周六","counts":"330","Types":"直接访问","ord":6},{"ID":34,"Week":"周六","counts":"1330","Types":"搜索引擎","ord":6},{"ID":7,"Week":"周日","counts":"320","Types":"邮件营销","ord":7},{"ID":14,"Week":"周日","counts":"210","Types":"联盟广告","ord":7},{"ID":21,"Week":"周日","counts":"410","Types":"视频广告","ord":7},{"ID":28,"Week":"周日","counts":"320","Types":"直接访问","ord":7},{"ID":35,"Week":"周日","counts":"1320","Types":"搜索引擎","ord":7}]