虚拟DOM和版本比较算法：virtual-dom
jopen
9年前
virtual-dom是一个JavaScript DOM 模型 支持元素创建, 差异计算 和 patch operations 来实现高效的重新渲染。
示例
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: Create a function that declares what the DOM should look like 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: Initialise the document 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: Wire up the update logic setInterval(function () { count++; var newTree = render(count); var patches = diff(tree, newTree); rootNode = patch(rootNode, patches); tree = newTree; }, 1000);