如何实现一个 Virtual DOM 算法

1 用JS对象模拟DOM树 2 比较两棵虚拟DOM树的差异 3 把差异更新到真实的DOM上去渲染页面

1 用JS模拟DOM树，节点类型，节点属性，子节点children

function Element (tagName, props, children) { this.tagName = tagName this.props = props this.children = children }

module.exports = function (tagName, props, children) { return new Element(tagName, props, children) }

然后引入创建虚拟DOM树方法

var el = require('./element')

var ul = el('ul', {id: 'list'}, [ el('li', {class: 'item'}, ['Item 1']), el('li', {class: 'item'}, ['Item 2']), el('li', {class: 'item'}, ['Item 3']) ])

现在对象只是一个虚拟DOM树，然后根据虚拟DOM树，更新到真实的DOM上面。 github.com/livoras/blo…