虚拟dom转真实dom

初版

// 文本节点  vDom: string
// 元素节点  vDom: object  {tag:'div', classList: [], value: 'div', children: [{...},{...}]}
const virtualDomToDom = vDom => {
  let parentNode = document.querySelector('body')
  const toDom = vDom => {
    const vDomType = typeof vDom
    const createTextNode = val => {
      return document.createTextNode(val)
    }

    const createElement = val => {
      const { tag, classList, value } = val
      const element = document.createElement(tag)
      if (value) {
        element.textContent = value
      }
      if (classList && classList.length > 0) {
        classList.forEach(item => {
          element.classList.add(item)
        })
      }
      return element
    }

    if (vDomType === 'string') {
      const textNode = createTextNode(vDom)
      parentNode.appendChild(textNode)
    } else {
      const elementNode = createElement(vDom)
      parentNode.appendChild(elementNode)
      if (vDom.children && vDom.children.length > 0) {
        parentNode = elementNode
        vDom.children.forEach(item => {
          toDom(item)
        })
      }
    }
  }
  toDom(vDom)
}

测试用例

const son1 = 'i am son1'
      const son2 = {
        tag: 'button',
        value: 'click',
      }

      const son3 = {
        tag: 'div',
        value: 'son3',
        classList: ['son3']
      }
      const obj = {
        tag:'div', 
        classList: ['w','test'],
        value: 'div',
        children: [son1,son2,son3]
      }
      virtualDomToDom(obj)