vdom(2)

[zwhu]

let vdom = {
    tag: 'div',
    props: {
        style: 'display:none'
    },
    children: [{
        tag: 'a',
        props: {
            id: '1',
            href: 'http://test.com',
            target: '_blank'
        },
        children: ["click!"]
    }, 'this is text!!!', {
        tag: 'div',
        props: {
            class: 'class1 class2',
            'data-attr': 'hello'
        },
        children: ['haha', {
            tag: 'br'
        }]
    }, {
        tag: 'br'
    }]
}

function render(root) {

    function dfs(node) {
        let element
        if (node.tag) {
            element = createElement(node.tag, node.props)
            node.children && node.children.map(dfs).forEach(element.appendChild)
        } else if (typeof node === 'string')
            element = createTextNode(node)

        return element
    }
    return dfs(root)
}

function createElement(tag, props = {}) {
    const element = document.createElement(tag)
    Object.keys(props).forEach((key) => { element.setAttribute(key, props[key]) })
    return element
}

function createTextNode(text) {
    return document.createTextNode(text)
}

console.log(render(vdom))

运行结果如下：