实现一个 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>
网友评论