snabbdom Features

103 阅读1分钟

实现一个虚拟dom,大概需要3个大的步骤:

  1. compile,把真实dom编译成vnode
  2. diff,oldNode和newVnode的变化
  3. patch,把变化用打补丁的方式更新到真实的dom

snabbdom也被用在了vue2中。

  • Core features
    • About 200 SLOC – you could easily read through the entire core and fully understand how it works.
    • Extendable through modules.
    • A rich set of hooks available, both per vnode and globally for modules, to hook into any part of the diff and patch process.
    • Splendid performance. Snabbdom is among the fastest virtual DOM libraries.
    • Patch function with a function signature equivalent to a reduce/scan function. Allows for easier integration with a FRP library.
  • Features in modules
    • h function for easily creating virtual DOM nodes.
    • SVG just works with the h helper.
    • Features for doing complex CSS animations.
    • Powerful event listener functionality.
    • Thunks to optimize the diff and patch process even further.
  • Third party features
    • JSX support thanks to snabbdom-pragma.
    • Server-side HTML output provided by snabbdom-to-html.
    • Compact virtual DOM creation with snabbdom-helpers.
    • Template string support using snabby.
    • Virtual DOM assertion with snabbdom-looks-like

源码:github.com/snabbdom/sn…