JS使用正则+JSON对HTML模板进行数据填充

在WEB前端开发中，经常会根据动态的数据加载一些具有相同结构、不同内容的HTML控件，如果把这些HTML代码全写入JS中，根据不同的数据显示的控件也不一样，操作起来会显得比较繁琐，而且极不利于代码的维护，怎么办呢？不知道你是否听说过模板，模板渲染，数据填充。使用模板方法，直接把数据往里面套就好了。憋说话，先上个示例，用心去感受。

这里有个非常重要的方法，此方法是对原生js的string类进行的扩展，也就是我们要用来填充格式数据的方法。

JS:

String.prototype.tmp = function(obj) {
    return this.replace(/\$\w+\$/g, function(matchs) {
        var returns = obj[matchs.replace(/\$/g, "")];
        return (returns + "") == "undefined"? "": returns;
    });
};

方法定义好了，接下来写好HTML模板：
HTML:

<div class="container">
    <ul class="list_box" id="list_box">
        <script type="text/template" data-id="list_tpl">
            <li class="list_item">
                <h3>$title$</h3>
                <p>$content$</p>
            </li>
        </script>
    </ul>
</div>

不知道慧眼如炬的你有没有注意到这段HTML与普通的HTML有什么不同之处，首先是script标签，标签里有type=”text/template”属性；其次就是 $title$ 和 $content$ 。前者所包括的html内容就是我们需要填充的模板，后者就是我们需要替换数据的字符串。

假设我们从服务器取到了如下json数据：

{
    page: "1",
    records: "3",
    data: [{
        title: "title1",
        content: "content1"
    },{
        title: "title2",
        content: "content2"
    },{
        title: "title3",
        content: "content3"
    },{
        title: "title4",
        content: "content4"
    },{
        title: "title5",
        content: "content5"
    },]
}

现在我们要将其填充在之前的html模板中，假设上面的json数据存储在变量json_data中，假设我们已经引入了jquery：
JS：

    var htmlList = '',
    htmlTemp = $("#list_box script[data-id='list_tpl']").html();
    json_data.data.forEach(function(object) {
        htmlList += htmlTemp.tmp(object);
    });
    $("#list_box").html(htmlList);

配合适当的CSS：

    ul,li{
        list-style: none;
    }
    .container{
        width: 200px;
        margin: 20px auto;
        padding: 5px;
        background-color: #1B6540;
    }
    .list_box li{
        color: #fff;
        height: 60px;
        margin-bottom: 5px;
        background-color: #4FA46B;
    }

便达到了如下效果：

当然这只是一个很简单的例子，只需要填充两个变量，但不管有多复杂，道理都一样，是吧。

好了，现在来解释解释为什么把模板代码放在script标签中间，假如，你把模板代码放在某个div中并隐藏起来，那么可能你的代码中会用到$(‘input[type=”text”]’)查找控件时，不好意思，就会把模板中的也统计进去了，这个并不是你想要的。所以我用script，这么做还有一个好处，就是不会被当成HTML来执行显示出来，但我们也得保证不能当成js来执行，所以加了个type=”text/template”，其实并没有这个类型，明白就好。

一点也不难，对吧，这里总共就用到两js函数：{字符串替换函数：replace()，数组遍历函数：forEach()}

更多推荐

JS使用正则+JSON对HTML模板进行数据填充