虚拟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