JS代码题5

实现一个简单的虚拟 DOM 渲染

let domNode = {
  tagName: 'ul',
  props: { class: 'list' },
  children: [{
    tagName: 'li',
    children: ['item1']
  }, {
    tagName: 'li',
    children: ['item1']
  }]
};

// 构建一个 render 函数，将 domNode 对象渲染为 以下 dom
<ul class="list">
    <li>item1</li>
    <li>item2</li>
</ul>

实现render函数：

function render(domNode){
    if (!domNode) return 
    var $el
    if (typeof domNode === 'object') {
        $el = document.createElement(domNode.tagName)
        if (domNode.hasOwnProperty('props')) {
            for(var key in domNode.props){
                $el.setAttribute(key,domNode.props[key])
            }
        }
        if (domNode.hasOwnProperty('children')) {
            domNode.children.forEach(child=>{
                var $child = render(child)
                $el.append($child)
            })
        }
    }else{
        $el = document.createTextNode(domNode)
    }
    //document.documentElement.append($el) 如果希望直接渲染到页面上
    return $el
}

主要用到了DOM API 和递归