写一个函数实现把虚拟dom转化为真实dom,(虚拟dom:{tag:'', attr:[],children:[]})

// 写一个函数实现把虚拟dom转化为真实dom,(虚拟dom:{ tag: '', attr: [], children: [] } )

function  render(vdom) {
  let {tag, attr, children} = vdom
  const ele = document.createElement(tag)
  for (const attrName in attr) {
    if (Object.hasOwnProperty.call(attr, attrName)) {
      ele.setAttribute(attrName, attr[attrName])
    }
  }
  
  for (let i = 0; i < children.length; i++) {
    const child = children[i];
    let childEle
    if (typeof child == 'string')  childEle = document.createTextNode(child)
    else childEle = render(child)
    ele.appendChild(childEle)
  }
  
  return ele
}

render({ tag: 'div', attr: {id:'testid',name:'testname'}, children: [
  { tag: 'input', attr: { id: '1', name: '1' }, children: [] },
  { tag: 'p', attr: { id: '2', name: '2' }, children: [] },
  'content'
] })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
更新时间: 5/5/2023, 11:19:52 AM