關於js模板的創建、使用，以及{{}}的簡單實現

在js里面，經常需要使用js往頁面中插入html內容。給script標簽設置type="text/template"屬性，標簽里的內容不會被執行，也不會顯示在頁面上，但是可以在另外一個script里面通過獲取插入到頁面上。這樣可以把大段的html和js進行分離（摘自 https://blog.csdn.net/appke846/article/details/80066681）。

 

以下是只通過JavaScript來實現的方式。

 

body內的元素：

 <div id="div" style="background:green;"></div> 

script標簽的模板：

模板1：

<script type="text/template" id="div1">
　　<span>這是一個模板</span>
</script>

模板2：

<script type="text/template" id="div2">
    <div>數據：{{data}}</div>
    <div>年齡：{{age}}</div>
    <div>姓名：{{name}}</div>
</script>

JavaScript代碼：

var div = document.querySelector('#div');
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');

 

對於模板1，可以通過 div.innerHTML = div1.innerHTML; 來實現，即將div1內的元素都放入div內（目前未想到其他實現方式）。

實現效果：

 

對於模板2，當需要傳入數據時，比如data數據： var data = { data: "123", name: "csdn", age: "xxoo" }; 

這時可以通過正則表達式、replace來實現：

 div.innerHTML = div2.innerHTML.replace(/\{\{([\s\S]+?)\}\}/g, function($0, $1) { return data[$1] || ''; }); 

實現效果：

 

為了方便，也可以將其寫成一個函數：

/**
* 模板替換
* @param {string} dom 
* @param {json} data 
*/
function template(dom, data) {
    // /s任何空白字符，包括空格、制表符、換頁符等 <=> [ \f\n\r\t\v]
    // /S任何非空白字符 <=> [^ \f\n\r\t\v]
    // 在+/?/*/{min, max}的后面再加上一個?可以開啟懶惰模式，正則引擎盡可能少的重復匹配字符
    var replaceDom = dom.replace(/\{\{([\s\S]+?)\}\}/g, function($0, $1) {
        return data[$1] || '';
    });
    return replaceDom;
}