文档模板引擎/字符串模板

文档模板引擎用来在JS代码中生成大量的、重复的HTML代码
应用实例：
要在一个页面上动态的生成很多个ul下的li。这种情况就可以使用文档模板引擎来完成。不仅节省了力气，也节省了很多代码。
先贴已经完成封装的引擎代码：

function template(id, data) {
    var str = document.getElementById(id).innerText;
    str = "log(`"+str+"`)";
    str = str.replace(/<%=(.+)%>/g, "`); log($1); log(`");
    str = str.replace(/<%(.+)%>/g, "`); $1 log(`");
    var funcstr = `
        (function(data){
            var htmlstr = "";
            function log(str) {
                htmlstr += str;
            }
            ${str};
            return htmlstr;
        })
    `;
    var realfunc = eval(funcstr);
    return realfunc(data);
}

下面是实现时的代码：

<script id="text" type="text/html">
        <table>
            <%for(var i=0;i<data.length; i++){%>
            <tr>
                <%=data[i].username%>
            </tr>
            <%}%>
        </table>
</script>
<script type="text/javascript">
var t = template("text",
[{username:"name1",sex:"man",age:11},{username:"name2",sex:"mans",age:21},{username:"name3",sex:"woman",age:31}]);
document.body.innerHTML = t;

实现部分有两个script，分别有以下作用：
第一个：写入的是要加入页面的HTML代码和js代码。HTML代码可以正常写，JS代码需要写在<%……%>中，如果是要写到页面上的内容应扩在<%=……%>中，比如上面的<%=data[i].username%>这是要写在页面的 li 中的内容。其中的标签样式可以由自己定义。
要注意的是：给script id 和 type = “text/html”。
第二个：是正常的写ＪＳ代码的地方。包括两部分，调用函数和将内容写入到页面上。调用template函数，第一个参数是上面script的 ID 值，第二个参数是一个数组，数组的元素是一个个对象。对象的内容就是要写入到页面的内容。这个可以在上面的<%=data[i].username%>上看到他的调用。
其中实现的代码中数组的名字是data固定名（这个和封装函数有关），函数调用时的函数名也是固定名。
总结如下：
第一步：要先有个写好的模板函数
第二步：将模板函数引入，即第 9 行的script
第三步：建一个script 给 id 和 type = “text/html”。第 10 行
第四步：在script中写想要生成的HTML标签。js代码要用 <%%> 包住，要输出的内容用 <%= %> 包住
第五步：调用函数，第一个参数为script的 id ，第二个参数为一个数组，里面放对象。
第六步：使用document.body.innerHTML = 函数，将函数写到页面上