深度剖析：如何实现一个 Virtual DOM 算法

作者：戴嘉华
转载 https://github.com/livoras/blog/issues/13

    break
  default:
    throw new Error('Unknown patch type ' + currentPatch.type)
}

})
}

​
完整代码可见 [patch.js](https://github.com/livoras/simple-virtual-dom/blob/master/lib/patch.js)。
​
## 5 结语
​
Virtual DOM 算法主要是实现上面步骤的三个函数：[element](https://github.com/livoras/simple-virtual-dom/blob/master/lib/element.js)，[diff](https://github.com/livoras/simple-virtual-dom/blob/master/lib/diff.js)，[patch](https://github.com/livoras/simple-virtual-dom/blob/master/lib/patch.js)。然后就可以实际的进行使用：
​
```source-js
// 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')])
])
​
// 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 的时候也可以加入 JSX 语法。这些事情都做了的话，就可以构造一个简单的ReactJS了。
​
本文所实现的完整代码存放在 Github，仅供学习。
​

6 References