snabbdom例子

最新推荐文章于 2022-07-04 17:46:51 发布

转载最新推荐文章于 2022-07-04 17:46:51 发布 · 552 阅读

文章标签：

#vdom

js 专栏收录该内容

5 篇文章

订阅专栏

snabbdom的核心API。

核心函数就两个，一个是h函数，用于 vnode 定义。一个是 patch 函数，对 vnode 进行 patch。如果熟悉 Linux 的 diff/patch 命令，就很容易理解了。

h(‘标签名’, {属性}, [子元素])
patch(旧节点, 新节点)

    <body>
        <div id="container"></div>
        <button id='btn-change'>change</button>

        <script src="https://cdn.bootcss.com/snabbdom/0.7.1/h.js"></script>
        <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.js"></script>
        <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.js"></script>
        <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.js"></script>
        <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.js"></script>
        <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.js"></script>

        <script>
            var snabbdom = window.snabbdom

            var patch = snabbdom.init([
                snabbdom_class,
                snabbdom_props, 
                snabbdom_style,
                snabbdom_eventlisteners               
            ])

            var h = snabbdom.h

            var container = document.getElementById('container')
            // 生成vnode
            var vnode = h('ul#list', {}, [
                h('li.item', {}, 'item 1'),
                h('li.item', {}, 'item 2'),
            ])
            // 初次渲染,把vnode的内容全部添加到空白的容器中
            patch(container, vnode)

            document.getElementById('btn-change').addEventListener('click', () => {
                // 生成新的vnode
                var newVnode = h('ul#list', {}, [
                h('li.item', {}, 'item 1'),
                h('li.item', {}, 'item B'),
                h('li.item', {}, 'item 3'),
                ])
                // 再次渲染,对比new vnode 和 old vnode,将真正需要渲染的部分进行渲染,不需要渲染的部分,不会更改 
                patch(vnode, newVnode)
            })
        </script>
    </body>