虚拟dom(virtual-dom)

介绍

一直在用Vue进行项目开发,很好奇这框架是怎么做到数据和视图之间的快速响应绑定的,因为如果是单纯的dom操作是很耗费性能的,所以在一番搜索之后才发现是用了一种"虚拟dom"的思路,就是用js去模拟dom,监听变化,最后再讲改变的dom整个的更新到dom树上。
这里推荐两篇写的很好的博客,我的很多代码就是从中copy简化的,然后用原始的js代码重新实现了一遍。这里将所有的关注点放在虚拟dom上,所以就不用打包工具了。

Livoras---simple-virtual-dom

张歆琳---虚拟DOM介绍

我的demo

实现思路

    1. 数据 => 视图 初始化
        1.1构建虚拟DOM
        var tree = el('div', {'id': 'container'}, [
            el('h1', {style: 'color: blue'}, ['simple virtal dom']),
            el('p', ['Hello, virtual-dom']),
            el('ul', [el('li')])
        ]);

        1.2通过虚拟DOM构建真正的DOM
        var root = tree.render();
        document.body.appendChild(root);

    3. 数据更新,生成新的虚拟DOM
    var newTree = el('div', {'id': 'container'}, [
        el('h1', {style: 'color: red'}, ['simple virtal dom']),
        el('p', ['Hello, virtual-dom']),
        el('ul', [el('li'), el('li')])
    ]);

    4. 比较两棵虚拟DOM树的不同
    var patches = diff(tree, newTree)

    5. 在真正的DOM元素上应用变更
    patch(root, patches)

虚拟dom实现方法

index.html的代码

    
        
            
            
            virtual dom demo
            
        
        
            

虚拟dom实现方法

index.js中的代码

    function init(argument) {
        // 1. 构建虚拟DOM
        const tree = Element('div', { id: 'app' }, [
            Element('ul', {class: 'list' }, [
                Element('li', { class: 'item' }, ['第一步:用JS对象模拟DOM树']),
                Element('li', { class: 'item' }, ['第二步:比较两棵虚拟DOM树的差异']),
                Element('li', { class: 'item' }, ['第三步:把差异应用到真正的DOM树上']),
            ]),
        ]);

        // 2. 通过虚拟DOM构建真正的DOM
        const root = tree.render();
        document.getElementById('virtualdom').appendChild(root);

        // 3. 生成新的虚拟DOM
        const newTree = Element('div', { id: 'app' }, [
            Element('ul', {class: 'list' }, [
                Element('li', { class: 'item' }, ['第一步:用JS对象模拟DOM树']),
                Element('li', { class: 'item' }, ['第二步:比较两棵虚拟DOM树的差异']),
                Element('li', { class: 'item' }, ['第三步:把差异应用到真正的DOM树上']),
                Element('li', { class: 'item' }, ['新目录树1:1把差异应用到真正的DOM树上']),
                Element('p', { class: 'item' }, ['新目录树2:2把差异应用到真正的DOM树上']),
            ]),
        ]);

        // 4. 比较两棵虚拟DOM树的不同
        var patches = diff(tree, newTree);

        // 5. 在真正的DOM元素上应用变更
        patch(root, patches);   
    }

详细的核心代码请看lib中的

    diff.js  /////比较dom树不同的算法 ***核心
    element.js  /////虚拟dom创建函数
    patch.js   ////虚拟dom挂载到真正的dom

你可能感兴趣的:(虚拟dom(virtual-dom))