虚拟dom很棒。它允许我们将应用程序的视图表示为状态的函数。但是现有的解决方案太过膨胀，太慢，缺少功能，api偏向OOP和/或缺少我需要的功能。
介绍
Snabbdom由一个非常简单，高性能和可扩展的内核组成，仅约200 SLOC。它提供了具有丰富功能的模块化体系结构，可以通过自定义模块进行扩展。为了使核心保持简单，所有非必要功能都委托给模块。
您可以将Snabbdom塑造成您想要的任何东西！选择，选择和定制所需的功能。或者，您可以只使用默认扩展名，并获得具有高性能，小尺寸和下面列出的所有功能的虚拟DOM库。
特征
核心功能
- 大约200个SLOC –您可以轻松阅读整个核心，并完全了解它的工作原理。
- 通过模块可扩展。
- 每个vnode以及模块的全局可用的丰富钩子集可以钩入diff和patch过程的任何部分。
- 出色的表现。Snabbdom是Virtual DOM Benchmark中最快的虚拟DOM库之一。
- 具有等效于缩小/扫描功能的功能签名的修补功能。可以更轻松地与FRP库集成。
模块中的功能
- h 用于轻松创建虚拟DOM节点的功能。
- SVG 只能与h助手一起使用。
- 用于执行复杂css动画的功能。
- 强大的事件监听器功能。
- Thunk进一步优化了差异和补丁过程。
第三方功能
- 借助snabbdom-pragma来支持JSX 。
- snabbdom-to-html提供的服务器端HTML输出。
- 使用snabbdom-helpers进行紧凑的虚拟DOM创建。
- 使用snabby支持模板字符串。
- 具有虚拟外观的虚拟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)
仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！
链接: https://fly63.com/nav/2798
