虚拟节点转真实节点

let vNode = [{
tag: 'div',
attr: {
class: 'luo'
},
children: [{
tag: 'span',
attr: {
id: 'jie',
events: {
onclick() {
alert(1)
}
}
},
children: 'hello world !'
}]
}]
let domOper = {
insert(el, target) {
el.appendChild(target)
},
createElement(tag) {
return document.createElement(tag)
},
setAttribute(el, attrs) {
Object.keys(attrs).forEach(key => {
if (key == 'events') {
let events = attrs[key]
Object.keys(events).forEach(event => {
el[event] = events[event]
})
} else {
el.setAttribute(key, attrs[key])
}
})
},
setText(el, text) {
el.innerText = text
}
}
let container = document.getElementById('container')
renderVNode(vNode, container)

            function renderVNode(vNode, container) {

                if (Array.isArray(vNode)) {
                    vNode.forEach(item => {
                        let el = domOper.createElement(item.tag)
                        domOper.setAttribute(el, item.attr)
                        domOper.insert(container, el)
                        renderVNode(item.children, el)
                    })
                } else if (typeof vNode == 'string') {
                    domOper.setText(container, vNode)
                }
            }