clothe years = {
tag: 'div'
props:{
id:'box'
}
}；
let oP = createElement('p',{'class':'list'},['周一']);
// Create a div tag
let oDiv1 = createElement('div',{
id:'box',
class:'wrap',
style:{
width:'100px',
height:'100px',
background:'red'
},
}, [ '2000', oN])
// Create label method
function createElement(tag,props,children){
return {
tag,
props:{...props},
children:[...children]
}
}
// the virtual dom turn into real dom, and it rendered to the inside pages
render(oDiv1,document.getElementById('root'));
function render(vTree,root){
let target = createDom(vTree);
root.appendChild(target);
// turn into the virtual real dom dom
function createDom(vTree){
let {tag,props,children} = vTree;
// Create node
let targetDom = document.createElement(tag);
// add properties
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)
})
// add a child node
if(children){
children.forEach(item => {
let targetText = typeof item == 'string' ? document.createTextNode(item) : createDom(item);
targetDom.appendChild(targetText)
})
}
return targetDom;
}
}