性能强大的虚拟 DOM 库 Snabbdom

• 授权协议: MIT
• 开发语言: JavaScript TypeScript
• 操作系统: 跨平台
• 软件首页: https://github.com/snabbdom/snabbdom
• 软件文档: https://github.com/snabbdom/snabbdom/blob/master/README.md
• 官方下载: https://github.com/snabbdom/snabbdom/releases

软件介绍

Snabbdom 是一个虚拟 DOM 库，专注提供简单、模块性的体验，以及强大的功能和性能。

核心功能特性

• 约 200 SLOC 的代码行 —— 你能轻松阅读整个项目的核心并理解其原理

• 可通过模块进行扩展

• 优异的性能，在 Virtual DOM Benchmark 测试中，Snabbdom 是最快的虚拟 DOM 库之一

示例代码(Inline example)

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

本文地址：https://codercto.com/soft/d/2891.html