JavaScript操作自定义Html模板

用到的样式：

/*模板内容，不需要显示*/
.html-template { display:none; }

模板内容示例:

<!--数据行模板-->
<tr id="template" class="html-template">
    <td align="center">
        <span class="checkall" style="vertical-align: middle">
            <input type="checkbox" /></span>
        <label style="display: none">{id}</label>
        <label style="display: none">{channel_id}</label>
    </td>
    <td class="nowrap" title="{title}">{title}</td>
    <td>{call_index}</td>
    <td class="item-mobile-hide">{category_title}</td>
    <td class="item-mobile-hide">{add_time}</td>
    <td>
        {sort_id}
        <p class="item-mobile-show">{category_title}</p>
    </td>
    <td>
        <div class="btn-tools">
            <a href="javascript:;" class="msg {msg_css}" title="评论"><i class="iconfont icon-comment"></i></a>
            <a href="javascript:;" class="top {top_css}" title="置顶"><i class="iconfont icon-top"></i></a>
            <a href="javascript:;" class="red {red_css}" title="推荐"><i class="iconfont icon-good"></i></a>
            <a href="javascript:;" class="hot {hot_css}" title="热门"><i class="iconfont icon-hot"></i></a>
            <a href="javascript:;" class="pic {pic_css}" title="幻灯片"><i class="iconfont icon-pic"></i></a>
        </div>
        <p class="item-mobile-show">{add_time}</p>
    </td>
</tr>
<!--/数据行模板-->

JavaScript 代码：

//由数据实体填充模板变量
function buildTemplate(template, model) {
    /*由index作为起始索引值，next_index作为结束索引值，
    分段处理模板字符串，每一个段落中只会有一个模板变量，
    可以方便处理模板变量，替换的内容由数组临时保存，减少字符串的拼接操作*/

    var arr = [];//保存拼接的字符串数组
    var index = 0;//区间起始索引
    var next_index = template.indexOf('{', index + 1);//区间结束索引（每一个段落只处理一个模板变量）
    var regex = new RegExp('\{(\w+)\}');//无效呢...
    var s = template.substring(index, next_index).replace('html-template', '');//移除模板内容隐藏样式（他应该在第一个变量之前出现）
    arr.push(s);//保存第一个区间字符串到数组
    index = next_index;
    var match = null;//保存正则匹配的模板变量
    var isContinue = true;
    while (isContinue) {
        next_index = template.indexOf('{', index + 1);//定位区间结尾
        if (next_index == -1) {
            //最后一个区间段落
            next_index = template.length - 1;
            isContinue = false;
        }
        s = template.substring(index, next_index);//获取区间段落子字符串,substring(start,end) 返回从start位置开始到end位置的子串（不包含end）
        index = next_index;
        match = /\{(\w+)\}/.exec(s);
        //当前区间段落匹配的模板变量，替换为数据实体或数据模型属性值
        arr.push(s.replace(match[0], model[match[1]]));
    }
    var result = arr.join('');//连接字符串数组为字符串
    return result;
}

//模板助手
var templateHelper = {
    list: [],
    selector: '.ltable',
    template: '',
    create: function (selector) {
        this.list = [];
        this.template = '';
        this.template = $(selector).find('.html-template')[0].outerHTML;
        return this;
    },
    append: function (item) {
        this.list.push(buildTemplate(this.template, item));
    },
    html: function () {
        return this.list.join(' ');
    },
    build: function () {
        $(this.selector).append(this.list.join(' '));
    }
}

//js语法示例：

var entity = {id: 1, title:"标题", add_time:"2020-05-23"......}
buildTemplate($('#template')[0].outerHTML, entity)