虚拟dom生成真实dom

65 阅读1分钟
<div id="app"></div>

function render(vnode, container) {
  if (typeof container !== 'object') {
    container = document.querySelector(container)
   }
  container.appendChild(_render(vnode))
}

function _render(vnode) {
      //字符串
  if (typeof vnode !== 'object') {
    return document.createTextNode(vnode)
  } else {
    let dom = document.createElement(vnode.tag)
    if (vnode.attrs) {
      for (let key in vnode.attrs) {
        let curValue = vnode.attrs[key]
        dom.setAttribute(key, curValue)
      }
    }
    if (vnode.children) {
      if (typeof vnode.children === 'object') {
        vnode.children.forEach(child => {
          render(child, dom)
        })
      } else {
        render(vnode.children, dom)
      }
    }
    return dom
  }
}
    
    //虚拟dom
    let obj = {
      tag: 'div',
      attrs: {
        class: 'title'
      },
      children: [
        {
          tag: 'h1',
          attrs: {
            class: 'h1',
          },
          children: '我是h1标签'
        }, {
          tag: 'h4',
          attrs: {
            class: 'h4'
          },
          children: '我是h4标签'
        }
      ]
    }

    render(obj, '#app')