JS前端开发模拟虚拟dom转真实dom详解

<div class="box">
    <p name="dog">xiao ming</p>
  </div>

 let vnode = {
  tag:"div",
  attrs:{
    class:["box"]
  },
  childrens:[
    {
      tag:"p",
      attrs:{
        name:"dog"
      },
      childrens:[
        {
          tag:'text',
          content:"xiao ming"
        }
      ]
    }
  ]
}

const vnode = {
  tag: 'DIV',
  attrs: {
      id: 'app'
  },
  children: [{
          tag: 'SPAN',
          children: [{
              tag: 'A',
              children: []
          }]
      },
      {
          tag: 'SPAN',
          children: [{
                  tag: 'A',
                  children: []
              },
              {
                  tag: 'A',
                  children: []
              }
          ]
      }
  ]
}
/*虚拟dom转换真实dom设计*/
function render(vnode) {
  //核心递归函数
  const main = (node,parent=null) => {
    let ele
    ele = document.createElement(node.tag.toLowerCase())
    //添加属性
    if(node.attrs) {
      for(let key in node.attrs) {
        ele.setAttribute(key,node.attrs[key])
      }
    }
    //添加孩子，递归
    if(node.children && node.children.length) {
      for(let val of node.children) {
        main(val,ele)
      }
    }
    if(parent) {
      parent.appendChild(ele)     
    }else{
      parent = ele
    }
    return parent
  }
  let dom = main(vnode)
  return dom
}
render(vnode)