模拟Dom转换为真实Dom

将虚拟DOM转化为真实DOM

var diffDom = {
  tag:'DIV',
  attrs:{
   id:'app'
  },
  children:[
    {
      tag:'APAN',
      children:[
	    {tag:'A',children:[]}
	  ]
    },
    {
    	tag:'APAN',
    	children:[
    	  {tag:'A',children:[]},
    	  {tag:'A',children:[]}	
    	]	
    }
  ]
}
// 把上面的虚拟Dom转化成下方真实Dom

<div id="app">
  <span>
    <a>a>
  span>
  <span>
    <a>a>
    <a>a>
  span>
div>

实现：

// 定义函数
function _render(vnode){
  if(typeof vnode === "number"){
	vnode = String(vnode)
	}
	if(typeof vnode === "string"){
	return document.createTextNode(vnode);
	}
	const dom = document.createElement(vnode.tag)
	if(vnode.attrs){
	  Object.keys(vnode.attrs).forEach((key)=>{
		const value = vnode.attrs[key];
		dom.setAttribute(key,value);
		})
	}
	vnode.children.forEach((child)=> dom.appendChild(_render(child)));
	return dom;
}
_render(diffDom)