创建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

相关资源：JAVA上百实例源码以及开源项目