• virtual-dom 虚拟dom

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

    virtual-dom

    介绍

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

    Livoras—simple-virtual-dom

    张歆琳—虚拟DOM介绍

    我的demo

    实现思路

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    		 
    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> 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    		 
    <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中的代码

    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
    		 
    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中的

    /////基础操作工具 
    1
    2
    3
    		 
    diff.js  /////比较dom树不同的算法 ***核心
    element.js  /////虚拟dom创建函数
    patch.js   ////虚拟dom挂载到真正的dom
    Share

    我的博客-virtual-dom
  • 相关阅读:
    Jquery小技巧
    搭建Eclipse+MyEclipse+Tomcat开发环境
    ASP.NET:就是喜欢Web Form，就是喜欢拖控件（二）
    ASP.NET:就是喜欢Web Form，就是喜欢拖控件（一）
    程序员能力矩阵 你属于哪一层？
    WEB
    ASP.NET:就是喜欢Web Form，就是喜欢拖控件（四）
    ASP.NET:就是喜欢Web Form，就是喜欢拖控件（五）
    jQuery：简单6行代码实现tab效果
    iPhone程序开发新人FAQ
  • 原文地址：https://www.cnblogs.com/yezhanpeng/p/9646834.html
Copyright © 2020-2023  润新知