虚拟dom

发表于 | 分类于 ，

  1. 什么是虚拟dom

    可以看作是一个使用javascript模拟了DOM结构的树形结构

    1
    2
    3
    <div class="box" id="box" style="width: 100px;height: 100px;" onclick="console.log('vdom')">
        <span>vdom</span>
    </div>

  2. 如何解析这个虚拟 dom

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    const vdom = {
        nodeName: 'div',
        attrs: {
            className: 'box',
            id: 'box' 
        },
        css: {
            width: '100px',
            height: '100px'
        },
        events: {
            onclick: (e)=> {
                console.log(e)
            }
        },
        childrens: [
            {
                nodeName: 'span',
                attrs: {
                    innerText: 'vdom'
                }
            }
        ]
    }
    function render(vdom) {
        const dom = document.createElement(vdom.nodeName)
        const {attrs, css, events, childrens} = vdom
        //添加属性
        for(let item in attrs) {
            dom[item] = attrs[item]
        }
        //样式
        for(let item in css) {
            dom['style'][item] = css[item]
        }
        //添加事件
        for(let item in events) {
            dom[item] = events[item]
        }
        if(childrens && childrens.length > 0) {
            for(let children of childrens) {
                const childrenNode = render(children)
                dom.append(childrenNode)
            }
        }
        return dom
    }
    const dom = render(vdom)
    document.body.append(dom)