Render函数简单实现

“ Talk is cheap, show me the code”

// ast语法树
let ast = {
  tag: 'div',
  attr: {
    class: 'banner',
    id: 'banner'
  },
  text: '商品Banner',
  children: [
    {
      tag: 'div',
      attr: {
        class: 'bannerItem',
        key: '101'
      },
      text: '图片1',
      children: [
        {
          tag: 'img',
          attr: {
            class: 'bannerCover',
            src: 'https://www.baidu.com/imgs/1.png'
          }
        }
      ]
    },
    {
      tag: 'div',
      attr: {
        class: 'bannerItem',
        key: '102'
      },
      text: '图片2',
      children: [
        {
          tag: 'img',
          attr: {
            class: 'bannerCover',
            src: 'https://www.baidu.com/imgs/1.png'
          }
        }
      ]
    },
  ]
}

function render(root, ast) {
  let { tag, attr, text, children } = ast
  let ele = document.createElement(tag)
  for (let key in attr) ele.setAttribute(key, attr[key])
  ele.innerText = text
  children && children.forEach(item => render(ele, item))
  root.appendChild(ele)
}

let root = document.getElementById('app')
render(root, ast)