Como converter dados com { {}} dom real em dom com dados
- Como substituir { {name}} na tag p por Xiao Chen
<div id="root">
<p>{
{
name}}</p>
</div>
- Curioso? Em seguida, inicie a operação dom
1.首先拿到模板,获取dom对象,这里尽量模仿vue中的做法
let templateTest = document.querySelector("#root");
2.准备好要填充的对象 data.XXX
let data = {
name: "小陈"
};
- Qual é o uso de root dom? Use a função do compilador para percorrer cada nó filho
no dom. Use expressões regulares para fazer a correspondência no nó de texto. { {}} Se você não entende a regularidade, aprenda a regularidade primeiro
//正则,用来匹配{
{}}
let r = /\{\{(.+?)\}\}/g;
3.data与模板结合难点!!!! 正则,递归,js原生语法
在Vue源码中是 字符串 DOM===>字符串模板===>虚拟DOM===>真正的DOM
/**
*@params template:DOM
*@params data:Object
*/
function compiler(template, data) {
let childNodes = template.childNodes; //取出root下的子节点
// 遍历子节点
for (let index = 0; index < childNodes.length; index++) {
let type = childNodes[index].nodeType; //获取子节点的类型
//type === 3 文本节点
if (type === 3) {
//文本节点 判断 是否有{
{}}
let txt = childNodes[index].nodeValue; //只有文本节点才有
text = txt.replace(r, (_, g) => {
let key = g.trim(); //两边去空格 key = 'name'
return data[key];
});
//文本赋值
childNodes[index].nodeValue = text;
}
//type === 1 元素节点
else if (type === 1) {
//如果是元素,要判断其子节点是否要插值,递归
compiler(childNodes[index], data);
}
}
}
- De acordo com o código acima, um rootDOM com dados pode ser obtido.O próximo passo é
substituir o DOM por data-. -
let generateNode = templateTest.cloneNode(true); //克隆原来的dom节点
console.log(templateTest);//带{
{}}dom
compiler(generateNode, data);
console.log(generateNode);//替换成数据dom
//获取root父节点替换成数据dom
root.parentNode.replaceChild(generateNode, root);
Resumo: embora isso possa simplesmente substituir o texto, ainda existem muitos problemas. Só pode ser estático e { {obj.xxx}} também não pode ser implementado.