Virtual Dom开源项目简介

Virtual-dom能够替代RxJS实现前端轻量Reactive MVC，React其实是虚拟DOM的渲染，因为Reactive编程模型下，我们会根据事件随时更新DOM，每次重新渲染整个DOM是非常重量的，通过过滤器能够将对DOM的修改降低到最小。

手工直接更新DOM还会导致混乱，必须跟踪之前DOM的状态，在Reactive情况下，触发事件非常频繁，一旦有事件就重新创建整个DOM会导致应用非常慢。

Virtual-dom是一系列模板用来提供DOM的虚拟表示，当需要更新DOM时，你只要简单创建一个虚拟树VTree，代表你需要的DOM状态，Virtual-dom会在不需要创建整个DOM节点的情况下知道如何将DOM和虚拟树进行映射。

通过创建Vtree你就可以随时更新视图，带来清晰可维护的渲染逻辑。


var h = require('virtual-dom/h');
var diff = require('virtual-dom/diff');
var patch = require('virtual-dom/patch');
var createElement = require('virtual-dom/create-element');

// 1: 创建一个函数定义DOM是什么样。
function render(count)  {
    return h('div', {
        style: {
            textAlign: 'center',
            verticalAlign: 'center',
            lineHeight: (100 + count) + 'px',
            border: '1px solid red',
            width: (100 + count) + 'px',
            height: (100 + count) + 'px'
        }
    }, [String(count)]);
}

// 2: 初始化文本
var count = 0;      // We need some app data. Here we just store a count.

var tree = render(count);               // We need an initial tree
var rootNode = createElement(tree);     // Create an initial root DOM node ...
document.body.appendChild(rootNode);    // ... and it should be in the document

// 3: 与更新逻辑绑定
setInterval(function () {
      count++;

      var newTree = render(count);
      var patches = diff(tree, newTree);
      rootNode = patch(rootNode, patches);
      tree = newTree;
}, 1000);

MVI是一种Reactive MVC
[该贴被banq于2014-11-10 14:45修改过]