关于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;
}