前端模板渲染原理小试牛刀
2018-01-20 本文已影响0人
403undefined
今天简单对常见的前端模板数据渲染进行一个小小的解析
- demo1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>你好 名字是{{name}}</div>
</div>
</body>
<script>
let data = {
name:'hello name'
}
</script>
</html>
问题
如何把{{name}}和想对应的数据进行渲染?
实现方法compile
function compileDemo(el, data) {
let init = document.querySelector(el)//获取指定元素
let Fragment = document.createDocumentFragment() //创造Fragment对象用来对#app下的内容进行操作
for (; init.firstChild;) {
//将el下内容存入Feagment中
let child = init.firstChild
Fragment.appendChild(child)
}
replace(Fragment)
function replace(frg) {
Array.from(frg.childNodes).forEach(node => {
//遍历传入内容的子节点
let Text = node.textContent;
//取出节点文本内容
let Reg = /\{\{(.*)\}\}/;
//编写匹配{{}}正则
if (node.nodeType === 3 && Reg.test(Text)) {
//如果该节点为文本节点&&内容可以跟正则进行匹配进行一下操作
let value = data[RegExp.$1] //取出匹配到的值 name
node.textContent = Text.replace(/\{\{(.*)\}\}/, value) //将节点的文本内容进行替换
}
if (node.childNodes) {
//如果该节点还存在子节点 重复操作
replace(node)
}
})
}
//在Feagment替换完毕后重新插入指定元素
init.appendChild(Fragment)
console.log(Fragment)
}
