snabbdom

snabbdom 介绍

虚拟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 modulesrequire('snabbdom/modules/class').default,// makes it easy to toggle classesrequire('snabbdom/modules/props').default,// for setting properties on DOM elementsrequire('snabbdom/modules/style').default,// handles styling on elements with support for animationsrequire('snabbdom/modules/eventlisteners').default,// attaches event listeners]);var h = require('snabbdom/h').default; // helper function for creating vnodesvar 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 effectpatch(container,vnode);var newVnode = h('div#container.two.classes',{on: {click: anotherEventHandler}},{style: {fontWeight: 'normal',fontStyle: 'italic'}},'This is Now italic type'),' and this is still just normal text',{props: {href: '/bar'}},'I'll take you places!')]);// Second `patch` invocationpatch(vnode,newVnode); // Snabbdom efficiently updates the old view to the new state// to unmount from the DOM and clean up,simply pass nullpatch(newVnode,null)链接: http://www.fly63.com/nav/2798

GitHub:https://github.com/snabbdom/snabbdom

网站描述:一个虚拟的DOM库专注于简化，模块化拥有强大的功能和性能

snabbdom

官方网站：