JavaScript模板引擎實現原理和封裝
阿新 • • 發佈:2018-12-23
這裡以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.定義模板
2.用id取到模板內容<script id="contentTemplate" type="text/html"> <h1>{{title}}</h1> <ul> {{each list}} <li>你好,{{name}} 我來自{{from}}</li> {{/each}} </ul> </script><div id="content">準備的盒子</div>
var str = document.querySelector("#contentTemplate").innerHTML;
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;
}