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/2798GitHub:https://github.com/snabbdom/snabbdom
网站描述:一个虚拟的DOM库专注于简化,模块化拥有强大的功能和性能