這裡以art-template為例

先看例子

<!-- 引入模板引擎js檔案-->
<script type="text/javascript" src="arttemplate.js"></script>

<div id="content"></div>
<!-- 編寫模板,此模板放在html頁面中,模板也可放在js檔案中 -->
<script id="contentTemplate" type="text/html">
    <h1>{{title}}</h1>
    <ul>
        {{each list}}
            <li>你好，{{name}} 我來自{{form}}</li>
        {{/each}}
    </ul>
</script>
<!-- 渲染模板 -->
<script type="text/javascript">
    var data = {// 準備模板中涉及的資料
        name:"姜文", form:"西安"
    };
    var html = template('contentTemplate', data);// 呼叫template()方法將模板與資料結合進行渲染
    document.getElementById('content').innerHTML = html;// 將渲染結果寫入div
</script>
 

定義好模板，用id拿到模板內容的字串，用正則去匹配雙花括號，找到之後使用定義好的物件屬性進行替換

1.定義模板

<script id="contentTemplate" type="text/html">
    <h1>{{title}}</h1>
    <ul>
        {{each list}}
            <li>你好，{{name}} 我來自{{from}}</li>
        {{/each}}
    </ul>
</script><div id="content">準備的盒子</div>
 

3.定義替換物件和正則表示式

// 要替換的物件

 var data = {

  name:"姜文",

  from:"西安"

 }

 //正則表示式(不會正則也沒關係，這塊匹配的是{{name}}這種格式的字串)

 var reg = /{{(\w+)}}/;

4.查詢並替換內容 

 //注意：result的結果是一個數組 陣列的第一個元素是匹配到的內容{{name}}，第二個元素是 name

 var result = reg.exec(str);

 while(result){

  str = str.replace(result[0],data[result[1]])

result = reg.exec(str);

}

 //str插入到準備的盒子裡面

<div id = content></div>

 document.querySelector("#content").innerHTML = str;

封裝實現

function template(id,data){

var str = document.querySelector("#"+id).innerHTML;

 var reg = /{{(\w+)}}/;

 var result = reg.exec(str);

 while(result){

  str = str.replace(result[0],data[result[1]])

result = reg.exec(str);

}

return str;


}