虚拟DOM（1）

代码如下：

html

    
    
    
    



    

        
hello
        
jirengu
    

js

class VNode {
    constructor(tag, children, text) {
        this.tag = tag
        this.children = children
        this.text = text
    }

    render() {
        if (this.tag === '#text') {
            return document.createTextNode(this.text)
        }
        let el = document.createElement(this.tag)
        this.children.forEach(vChild => {
            el.appendChild(vChild.render())
        })
        return el
    }
}

function v(tag, children, text) {
    if (typeof children === 'string') {
        text = children
        children = []
    }
    return new VNode(tag, children, text)
}

let vNodes = v('div', [
    v('p', [
        v('span', [v('#text', 'xiedaimala.com')])
    ]),
    v('span', [
        v('#text', 'jirengu.com')
    ])
])

console.log(vNodes)
console.log(vNodes.render())

vNodes

vNodes

vNodes.render()

vNodes.render()