實現一個 render(template,data) 方法，將 template 中的佔位符用 data中對應的值填充
var template = "{{name}}很厲害，才{{age}}歲,{{name}}很厲害，才{{age}}歲",
data = {name:"XXX",age:"16"};
render(template,data) //XX很厲害，才16歲
思路：
獲取字符串中的形如{{key}}這樣的佔位符，並將其用data[key]替換。所以我們得到{{key}}和key兩個量
實現之前，我們需要了解一下字符串操作MDN和正則表達式JavaScript正則進階之路——活學妙用奇淫正則表達式
1.實現render函數
/**
* [render render函數實現將template中的佔位符用data中對應的值填充]
* @param {[type]} template [模板]
* @param {[type]} data [數據]
* @return {[type]} [渲染後的值]
*/
//方法1 - 直接匹配template中的佔位符並替換之,推薦
function render(template, data) {
return template.replace(/\{\{(.*?)\}\}/g, (match, $1) => data[$1.trim()]);
}
//方法2 - 根據data中key,匹配template中的佔位符並替換之
// function render(template, data) {
// Object.keys(data).forEach(key => {
// template = template.replace(new RegExp(`{{${key}}}`,'g'), data[key]);
// });
// return template;
// }
2.在html文檔中使用模板
定義模板的方式：
(1)先在真實的dom結構中使用模板語法將結構與樣式調整完畢
(2)將調整完畢的html代碼放在一個被改變了type類型無法執行的script標籤內(最好是 type="text/template")
(3)替換模板語法中的佔位符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template</title>
</head>
<script type="text/javascript" src='stringTemplate.js'></script>
<!-- 定義模板 -->
<script type="text/template" id='template'>
<a href="{{href}}">{{text}}</a>
</script>
<body>
</body>
<script type="text/javascript">
// 通過標籤獲取模版
var templateDom = document.querySelector("#template"),
template = templateDom.innerHTML;
data = {
href:"http://blog.hackerwen.tech",
text:"我的博客"
}
var resultTemplate = render(template,data);
document.body.innerHTML = resultTemplate;
</script>
</html>