虚拟DOM分析学习篇

昨天分享了一篇关于“虚拟DOM”的文章，但是今天感觉自己还是放不下它，决定细细探究一下

整体结构分析

创建的目录结构如下：

首先初始化package.json文件: npm init

然后全局安装Browserify ：npm install -g browserify

最后使用browserify编译：browserify main.js > compiled.js

各个文件之间的关系：

各个文件的作用的分析

分析diff.js

dfsWalk函数

首先对参数进行判断：

• newNode为空，标记删除
• oldNode和newNode都是字符串，则直接比较字符串是否相等，如果不相等，则currentPatch放入关于当前newNode的描述
• 如果oldNode和newNode的tagName相同，且它们的key相同，则就需要判断它们的属性的差异，就调用diffProps函数（该函数会返回一个两者属性不同的部分，包括两部分，一部分是oldNode和newNode都包含的属性，另一部分就是newNode中包含的新属性，总感觉有种被启发的feel）,在dfsWalk函数中进行判断返回值，如果返回值为空，则就在currentPatch放入这个返回的对象和不同的类型，然后就需要去对比它们的children的不同，调用的是diffChildren这个函数
• 如果oldNode和newNode的类型不同，直接替换

该函数的返回值：返回patches，就是一个描述两个虚拟DOM不同的对象，这个对象的键是节点的下标，值是currentPatch

分析patch.js

这个模块中，总的来说的作用就是记录着两个虚拟DOM之间的差异，在它的内部也有一个dfsWalk函数，它的作用就是深度优先遍历DOM结构，而applyPatches函数，则是真正将两个虚拟DOM的差异变成真实DOM的操作

Velement.js

在这个模块中，主要有两个作用，一个作用就是构建虚拟DOM，另外一个就是渲染函数render，这个在之前的博客中有提及，这里就不详细赘述了

util.js

这个就是一个公共类的模块，里面包含了一些常用的函数，比如数组的判断，each函数等

main.js

这个文件中就是对于上面模块的调用

var vdom = velement('div', { 'id': 'container' }, [
    velement('h1', { style: 'color:red' }, ['simple virtual dom']),
    velement('p', ['hello world']),
    velement('ul', [velement('li', ['item #1']), velement('li', ['item #2'])]),
]);
var rootnode = vdom.render();
document.body.appendChild(rootnode);
var newVdom = velement('div', { 'id': 'container' }, [
    velement('h5', { style: 'color:red' }, ['simple virtual dom']),
    velement('p', ['hello world']),
    velement('ul', [velement('li', ['item #1']), velement('li', ['item #2']), velement('li', ['item #3'])]),
]);

var patches = diff(vdom, newVdom);
console.log(JSON.stringify(patches));
patch(rootnode,patches);

vdom和newVdom的图示：

下面就是patches的内容，和上面用红色圈出来的地方一一对应

到现在基本对于虚拟DOM的实现有了基本的认识，在学习它的过程中，也收获了许多新知识，比如Browserify 之后的博客中会详细介绍，欢迎关注^_^

代码下载地址：http://download.csdn.net/detail/dear_mr/9847701