创建createElement

Posted 2022-02-23 wzybnzy

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;