创建createElement

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;

　　}

}

 

转载于:https://www.cnblogs.com/wzybnzy/p/11106014.html