怎么将带{{}}真实dom的数据转成带数据dom

怎么将带{ {}}真实dom的数据转成带数据dom

• 怎么将p标签中的{ {name}} 替换成小陈

<div id="root">
  <p>{
    
    {
    
    name}}</p>
</div>

• 好奇不？接下来就开始进行dom操作了

1.首先拿到模板,获取dom对象,这里尽量模仿vue中的做法
let templateTest = document.querySelector("#root");
2.准备好要填充的对象 data.XXX
let data = {
    
    
   name: "小陈"
};

• 拿到root dom有什么用？通过compiler函数来遍历dom中的各个子节点
  在文本节点中通过正则表达式来匹配{ {}} 不懂正则请先学习正则

//正则,用来匹配{
    
    {}} 
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);
         }
      }
  }

• 根据上文的代码就可以得到一个带有数据的rootDOM了,下一步就是将带有
  数据的DOM进行替换了- 。-

    let generateNode = templateTest.cloneNode(true); //克隆原来的dom节点
    console.log(templateTest);//带{
    
    {}}dom
  	compiler(generateNode, data);
    console.log(generateNode);//替换成数据dom
     //获取root父节点替换成数据dom
    root.parentNode.replaceChild(generateNode, root);

总结: 虽然这样可以简单的做到文本替换，还是有很多问题。只能是静态,{ { obj.xxx }}也不能实现。