您的位置：首页 > 其它

简单实现一个模板引擎

2020-06-30 09:32 120 查看

html代码

<body>
<div id="app">
<div>123<div>{{name}}</div>123
</div>
<div>

<div>
<div>
<div>{{age}}</div>
</div>
</div>
</div>
<div>{{gender}}</div>
<div>{{height}}</div>
</div>
</body>

js代码

var data = {
name:"yjt",
age:18,
gender:"man",
height:"178"
}
var app = document.getElementById("app")

function createFragment(app){
var fragment = document.createDocumentFragment()
var child = app.firstChild
while(child){
fragment.appendChild(child)
child = app.firstChild
}
return fragment
}
var fragment = createFragment(app)
var reg = /\{\{(.*)\}\}/
function compile(fragment){
var childNodes = fragment.childNodes
childNodes.forEach(node => {
if(isNode(node)){
compile(node)
}else{
if(reg.test(node.textContent)){
var name = reg.exec(node.textContent)[1]
node.textContent = node.textContent.replace(reg.exec(node.textContent)[0], data[name])
}
}
});
return fragment
}
function isNode(node){
return node.nodeType === 1 ? true:false
}
app.appendChild(compile(fragment))

总体思路：首先将页面的节点，全部添加到模拟的节点，等模拟的节点将模板全部替换完了，再一次插入，这主要就是为了减少dom更新的次数。主要就是有这两个函数
createFragment() 将app节点里的所有子节点添加到模拟节点fragment
compile() 遍历递归所有节点，如果是标签的就调用自己，用正则匹配所有文本节点的是否满足 {{变量名}} 的形式，如果满足替换，当所有都完成替换，将最终的模拟节点返回出去，再插入到app节点中

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航