扫一扫分享
虚拟dom很棒。它允许我们将应用程序的视图表示为状态的函数。但是现有的解决方案太过膨胀,太慢,缺少功能,api偏向OOP和/或缺少我需要的功能。
Snabbdom由一个非常简单,高性能和可扩展的内核组成,仅约200 SLOC。它提供了具有丰富功能的模块化体系结构,可以通过自定义模块进行扩展。为了使核心保持简单,所有非必要功能都委托给模块。
您可以将Snabbdom塑造成您想要的任何东西!选择,选择和定制所需的功能。或者,您可以只使用默认扩展名,并获得具有高性能,小尺寸和下面列出的所有功能的虚拟DOM库。
核心功能
模块中的功能
第三方功能
var snabbdom = require('snabbdom');
var patch = snabbdom.init([ // Init patch function with chosen modules
require('snabbdom/modules/class').default, // makes it easy to toggle classes
require('snabbdom/modules/props').default, // for setting properties on DOM elements
require('snabbdom/modules/style').default, // handles styling on elements with support for animations
require('snabbdom/modules/eventlisteners').default, // attaches event listeners
]);
var h = require('snabbdom/h').default; // helper function for creating vnodes
var container = document.getElementById('container');
var vnode = h('div#container.two.classes', {on: {click: someFn}}, [
h('span', {style: {fontWeight: 'bold'}}, 'This is bold'),
' and this is just normal text',
h('a', {props: {href: '/foo'}}, 'I\'ll take you places!')
]);
// Patch into empty DOM element – this modifies the DOM as a side effect
patch(container, vnode);
var newVnode = h('div#container.two.classes', {on: {click: anotherEventHandler}}, [
h('span', {style: {fontWeight: 'normal', fontStyle: 'italic'}}, 'This is now italic type'),
' and this is still just normal text',
h('a', {props: {href: '/bar'}}, 'I\'ll take you places!')
]);
// Second `patch` invocation
patch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new state
// to unmount from the DOM and clean up, simply pass null
patch(newVnode, null)
手机预览