虚拟节点转真实节点
2020-10-20 本文已影响0人
罗不错
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)
}
}