美文网首页
虚拟dom(virtual-dom)

虚拟dom(virtual-dom)

作者: 欧巴归来不看山 | 来源:发表于2018-10-23 08:27 被阅读0次

介绍

一直在用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的代码

    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
            <title>virtual dom demo</title>
            <link rel="stylesheet" type="text/css" href="./css/index.css" >
        </head>
        <body onload="init()">
            <div class="header">
                <h1>虚拟dom实现方法</h1>
            </div>
            <div id="virtualdom">   
            </div>
            <script src="./lib/util.js"></script>
            <script src="./lib/diff.js"></script>       
            <script src="./lib/element.js"></script>        
            <script src="./lib/patch.js"></script>      
            <script src="./index.js"></script>
        </body>
    </html>

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)

    介绍 一直在用Vue进行项目开发,很好奇这框架是怎么做到数据和视图之间的快速响应绑定的,因为如果是单纯的dom操作...

  • Virtual-Dom

    Virtual-Dom virtual-dom是一种利用JavaScript构建dom的技术,主要解决了复杂应用程...

  • virtual DOM 实现原理

    virtual DOM 实现: virtual-dom Snabbdom 对比 数据结构virtual Node ...

  • virtual-dom

    编程中永恒不变的两大主题:效率和质量 历史背景:web开发几个阶段 石器时代web页面展示简单的静态图文信息,那个...

  • vitual-dom原理与简单实现

    前言 目前广为人知的React和Vue都采用了virtual-dom,Virtual DOM凭借其高效的diff算...

  • Virtual-Dom算法

    React的virtual Dom React组件挂载:JSX/TSX ==>JavaScript对象==>真实D...

  • virtual-dom & diff

    S: 实际dom树非常复杂(单个node挂载的属性巨多,200来个),没有优化策略,频繁触发重排,对性能消耗严重 ...

  • 学习笔记(十六)Vue.js源码剖析 - 虚拟DOM

    Vue.js源码剖析 - 虚拟DOM 虚拟DOM概念回顾 什么是虚拟DOM? 虚拟DOM(Virtual DOM)...

  • 理解虚拟 DOM ,React 选择它是为了性能吗?

    虚拟 DOM 是什么 虚拟 DOM 是 JS 对象 虚拟 DOM 是对真是 DOM 的描述 虚拟 DOM 的本质是...

  • Vue.js 源码剖析-虚拟 DOM

    什么是虚拟DOM 虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象来描述 DOM,虚拟 ...

网友评论

      本文标题:虚拟dom(virtual-dom)

      本文链接:https://www.haomeiwen.com/subject/oyfgzftx.html