Virtual Dom开源项目简介

banq 14-11-10
              



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修改过]

              

1