编程中永恒不变的两大主题：效率和质量
历史背景：web开发几个阶段
-
石器时代
web页面展示简单的静态图文信息，那个时候还没有FE(前端)，通常是一个叫美工的妹子兼职。javascript脚本做的做多的事情可能就是表单提交。 -
青铜时代
大概2005年的时候，AJAX 大火，你的网站没有局部更新太low了。
也是这个时候，前端这个职业开始萌芽。 -
白银时代
后续的几年了，javascript如火如荼。AJAX大规模的普及，网站上各种炫酷的轮播，跑马灯等特效开始出现。2006年jquery诞生，开始了它将近10年的光辉之路。
2008年nodejs发布，它将在不久的将来将前端推进全新的时代。
同时，移动智能手机和桌面软件开始流行，也为前端后面的方向快速发展埋下时代伏笔。 -
黄金时代
2012年左右Bankbone.js、Angularjs开始展露头角，把其他软件编程领域中编程模式带到前端领域中。前端已经开始承担越来越多的开发任务，代码量和业务复杂度不断增加。 -
铂金时代
2014年左右，伴随着互联网+的概念大行其道。React、Vue等前端UI框架迅速爆红，数据驱动、前后端分离等理念得到越来越多青睐。
以上总结属于个人的看法，肯定有失偏颇，但对于前端的职业化、规模化、工程化理解 影响不大。
前端开发越来越复杂。
什么是Virtual DOM
使用普通的javascript对象映射原生DOM Tree。
解决什么问题？
- 大型前端应用中，大量的DOM操作变的难以维护：结合数据驱动UI 的思想，能够很好的解耦数据和DOM 操作。
- 效率：能够兼顾开发效率和维护成本（数据驱动视图变化，省去了手动的操作dom 的繁杂过程）的同时 保证一定的高效性（不一定比原生手写dom更新操作 高效）
- 有Virtual DOM 这个脱离了DOM 接口的限制，使得跨平台有了新的解决方案。理论上只要能够实现了Virtual DOM 标准的任何平台（包含js解析引擎）都能运行javascript应用。
内部技术原理
- 创建
virtual dom树 - 比较两树，找出更新点
-
经常进行的
DOM操作
① 替换节点
② 节点删除
③ 新增节点
④ 属性增删改
⑤ 改变文本节点的内容 -
diff 算法过程
① 如果新节点 为空， 则 删除节点
② 如果新老节点 都是文本节点， 替换文本内容
③ 如果老节点为空，新节点不为空，则插入新节点
④ 如果新节点和老节点 类型不同，则替换
⑤ 如果新节点和老节点类型相同，就更新属性，并且对齐子节点进行对比。
⑥ 针对子节点比较的话，使用key来进行优化， 参考：https://github.com/livoras/list-diff
-
- 更新操作
根据diff算法搜集的patchs,进行对应的更新操作。
源码解读
https://github.com/livoras/simple-virtual-dom/
JSX 语法
如果直接使用js来使用virtual dom 库，效率和后期维护将非常困难。
前端开发人员书写UI 界面 最熟悉的还是使用 html语法结构，JSX 就非常棒了。
它允许我们像使用html那样来实现UI界面，最终通过运行前编译预处理成js代码，或者提供运行时解析器动态解析JSX 来达到正确运行的目的。
具体参考：https://facebook.github.io/jsx/
使用babel将jsx编译成javascript virtual dom：
https://babeljs.io/docs/en/babel-plugin-transform-react-jsx/
参考
- https://www.w3cplus.com/javascript/understand-the-Virtual-DOM.html
- https://github.com/snabbdom/snabbdom
- Understanding the Virtual DOM
- Matt-Esch/virtual-dom
- https://github.com/livoras/simple-virtual-dom/
- https://facebook.github.io/jsx/
- https://babeljs.io/docs/en/babel-plugin-transform-react-jsx/
- 50行代码实现Virtual DOM
- 如何实现一个 Virtual DOM 算法
- 网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么
网友评论