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

文檔模板引擎用來在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 = 函數，將函數寫到頁面上