Open jabez128 opened 8 years ago
自从React开始在前端圈大火以后，virtual dom作为React的一个重要部分也开始为被大多数前端开发者所熟知。目前，除了React框架本身的内部实现之外，还有一下几个比较成熟的（github星星比较多的）库实现了virtual dom：
初次接触virtual-dom这个概念的时候，我猜很大一部分人都会被这个“高级”的概念所吓到，然后望 virtual-dom 而却步，毕竟不是所有人都有心情和精力去阅读React源码。但是事实上，virtual-dom是并不是什么神秘的黑科技，用一句话就可以总结virtual-dom：
virtual-dom是真实DOM的一个映射
这个看似简单的总结听起来也不像是什么人话。我们可以更加用更加形象的方法来进行讲解，比如下面这段HTML代码：
<div> <span></span> <span></span> </div>
一个div标签里面包含着两个span标签，两个span标签是并列关系。假如div是一个鸡蛋灌饼，span是一根烤肠，那么我们就可以把上面的这段真实的DOM映射成一个夹着两根烤肠的鸡蛋灌饼，这个豪华版鸡蛋灌饼就可以看做是一个virtual-dom。
div
span
当然，我们在写代码的时候并没有那么多的鸡蛋灌饼，当然也没有烤肠，我们有的只是JavaScript代码。我们可以想一想，在Javascript中用什么结构可以和DOM的定义和结构更加贴近呢？答案就是对象字面量。对象字面量表示方法可以设定属性，我们可以用其中的一个属性来记录DOM标签的类型，另一个属性来记录对象本身的一些属性，通过对象的相互嵌套也可以很好的表示DOM的层级结构。
mark
daemonchen
commented
8 years ago daemonchen
commented
8 years ago
自从React开始在前端圈大火以后，virtual dom作为React的一个重要部分也开始为被大多数前端开发者所熟知。目前，除了React框架本身的内部实现之外，还有一下几个比较成熟的（github星星比较多的）库实现了virtual dom：
初次接触virtual-dom这个概念的时候，我猜很大一部分人都会被这个“高级”的概念所吓到，然后望 virtual-dom 而却步，毕竟不是所有人都有心情和精力去阅读React源码。但是事实上，virtual-dom是并不是什么神秘的黑科技，用一句话就可以总结virtual-dom：
这个看似简单的总结听起来也不像是什么人话。我们可以更加用更加形象的方法来进行讲解，比如下面这段HTML代码：
一个
div标签里面包含着两个span标签，两个span标签是并列关系。假如div是一个鸡蛋灌饼，span是一根烤肠，那么我们就可以把上面的这段真实的DOM映射成一个夹着两根烤肠的鸡蛋灌饼，这个豪华版鸡蛋灌饼就可以看做是一个virtual-dom。当然，我们在写代码的时候并没有那么多的鸡蛋灌饼，当然也没有烤肠，我们有的只是JavaScript代码。我们可以想一想，在Javascript中用什么结构可以和DOM的定义和结构更加贴近呢？答案就是对象字面量。对象字面量表示方法可以设定属性，我们可以用其中的一个属性来记录DOM标签的类型，另一个属性来记录对象本身的一些属性，通过对象的相互嵌套也可以很好的表示DOM的层级结构。