virtual-dom 虚拟dom

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

virtual-dom

实现思路

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>

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

/////基础操作工具

1
2
3

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

我的博客-virtual-dom