Something About Virtual DOM

implement virtual dom by yourself :)

Transcript

1. Something About Virtual DOM
2. What is DOM
3. DOM 就是一个页面的文档结构，是浏览器各自实现的，我们可以通 过 JavaScript 和 CSS 来与它们交互
4. DOM Problem
5. DOM 最主要的问题就在于它对创建动态 UI 的可优化程度很低。 以前我们有 jQuery 可以很方便的批量操纵 DOM，但随着现在页面 越来越复杂，DOM 元素越来越多，层级越来越深，慢慢的性能和速 度都会出现问题
6. W3C 也意识到了这个问题，提出了 Shadow DOM 的标准，实际上 它也是用标准的 API 去把组合多个 DOM tree 到一个 host 节点里 形成组件，使得 DOM tree 之间更好的交互，更好的组合 Shadow DOM ‒ Ediror's Draft Shadow DOM v1: self‒contained web components
7. Virtual DOM
8. Virtual DOM 的思想在于，把 DOM tree 转成 JavaScript 的 Object，因为浏览器处理 JavaScript 更快，而且更简单。 一个 Node 节点可以很容易的用 Object 来表示
9. // <a href="https://github.com/jasonliao">Follow Me:)</a> const Follow = { tag: 'a', props: { href: 'https://github.com/jasonliao' }, children: ['Follow Me:)'] }; // <div class="intr"> // <p>Hi, my name's Jason</p> // <a href="https://github.com/jasonliao">Follow Me:)</a> // </div> const Intr = { tag: 'div', props: { className: 'intr' }, children: [{ tag: 'p', children: ['Hi, my name\'s Jason'] }, Follow] };
10. 因此我们就可以用这样的对象来构建整一个 DOM tree。所以每当状 态变更的时候，就可以更新这个对象，但是更新这个对象并不会对 视图造成影响，但我们可以通过前后的两个对象做 diff，从而快速找 到 DOM tree 前后的差异，再仅把差异渲染成 DOM，应用到 DOM tree 里
11. Virtual DOM 的算法包括几个步骤 1. 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构 建一个真正的 DOM 树，插到文档当中(toHTML) 2. 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和 旧的树进行比较，记录两棵树差异(diff) 3. 把 2 所记录的差异应用到步骤 1 所构建的真正的DOM树上， 视图就更新了(patch)
12. toHTML(Element.js) 我们创建一个 Element 对象，传入 tagName 、 props 、 children 三 个参数，再通过 toHTML 方法，把这个对象转成 HTML
13. Diff(diff.js) Diff 是 Virtual DOM 最核心的部分，它的算法关乎整个运行的效 率，我不会高深的算法，但按照基本思路，我实现了一个自己的 Diff 首先定义一个差异对象 patches ， patches 的 key 是树的节点， 用 0, 1, 2 表示，每个值则为一个数组，里面装着这个节点的差异。 归结起来有四种差异：
14. 1. 文字内容的改变 { type: 'TEXT', content: newTree }
15. 2. 属性的改变 { type: 'PROPS', content: propsobj }
16. 3. 结点的替换 { type: 'REPLACE', node: newTree }
17. 4. 结点的新增 { type: 'ADD_CHILD', node: newTree }
18. 例如 // <p>Awesome</p> => <p class="wow">Fantastic</p> patches: { '0': [{ type: 'PROPS', content: { className: 'wow' } }, { type: 'TEXT', content: 'Fantastic' }] }
19. Patch(patch.js) patch 函数就是把变化应用到原来的视图里
20. DEMO
21. 我们有两个对象， HVVD 和 HVD
22. const HVVD = { tagName: 'div', children: [{ tagName: 'h1', children: ['Hello, ', { tagName: 's', children: ['Visual'] }, 'Virtual DOM'] }, { tagName: 'button', props: { id: 'btn' }, children: ['Tada!'] }] } const HVD = { tagName: 'div', children: [{ tagName: 'h1', children: ['Hello, Virtual DOM'] }] }
23. 先把 HVVD 渲染在页面上,并为 button 绑定一个事件，点击按钮 时，把 HVVD 和 HVD 做 Diff，得到 patches ，并用 patch 函数应 用到视图中 const root = document.querySelector('#root'), btn = document.querySelector('#btn'); root.appendChild(new Element(HVVD).toHTML()); btn.addEventListener('click', function() { const patches = diff(HVVD, HVD); console.log(patches); patch(root, patches); })
24. 先来看看两棵树
25. 然后看下打印出来的 patches { "2": [{ type: "TEXT", content: "Hello, Virtual DOM" }], "3": [{ type: "REPLACE", node: undefined }], "5": [{ type: "REPLACE", node: undefined }], "6": [{ type: "REPLACE", node: undefined }], }
26. 通过 patches 可以看到 2 节点文本发生了变化，3、5、6 节点都被 undefined 给替换，换句话说就是删除了节点
27. Thanks by JasonLiao(jiebinliao)