let oDiv = {
tag:'div',
props:{
id:'box'
}
}；
let oP = createElement('p',{'class':'list'},['周一']);
//创建一个div标签
let oDiv1 = createElement('div',{
id:'box',
class:'wrap',
style:{
width:'100px',
height:'100px',
background:'red'
},
},['2000',oP])
//创建标签方法
function createElement(tag,props,children){
return {
tag,
props:{...props},
children:[...children]
}
}
// 把虚拟的dom转成真实的dom，并且把它渲染到页面里面
render(oDiv1,document.getElementById('root'));
function render(vTree,root){
let target = createDom(vTree);
root.appendChild(target);
//把虚拟的dom转成真实的dom
function createDom(vTree){
let {tag,props,children} = vTree;
//创建节点
let targetDom = document.createElement(tag);
//添加属性
Object.entries(props).forEach(item => {
let [key,value] = item;
if(typeof value == 'object'){//[[id,box], [class,list]]
value = Object.entries(value).map(item1 => item1[0]+':'+item1[1]).join(';')
}
targetDom.setAttribute(key,value)
})
//添加子节点
if(children){
children.forEach(item => {
let targetText = typeof item == 'string' ? document.createTextNode(item) : createDom(item);
targetDom.appendChild(targetText)
})
}
return targetDom;
}
}