本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Snabbdom 基本使用

本篇目标

• 通过代码演示，了解 Snabbdom 的使用。

代码演示

基本使用

import { h } from 'snabbdom/build/package/h'
import { init } from 'snabbdom/build/package/init'
​
// 使用 init() 函数创建 patch()
// init() 的参数是数组，将来可以传入模块，处理属性/样式/事件等
let patch = init([])
​
// 使用 h() 函数创建 vnode
let vnode = h('div.cls', [
  h('h1', 'Hello Snabbdom'),
  h('p', '这是段落')
])
​
const app = document.querySelector('#app')
// 把 vnode 渲染到空的 DOM 元素（替换）
// 会返回新的 vnode
let oldVnode = patch(app, vnode)
​
setTimeout(() => {
  vnode = h('div.cls', [
    h('h1', 'Hello World'),
    h('p', '这是段落')
  ])
  // 把老的视图更新到新的状态
  oldVnode = patch(oldVnode, vnode)
  // h('!') 是创建注释
  patch(oldVnode, h('!'))
}, 2000)

模块

Snabbdom 的核心库并不能处理 DOM 元素的属性/样式/事件等，如果需要处理的话，可以使用模块。

常用模块

• 官方提供了 6 个模块

  • attributes

    • 设置 DOM 元素的属性，使用 setAttribute()；
    • 处理布尔类型的属性；

  • props

    • 和 attributes 模块相似，设置 DOM 元素的属性 element[attr] = value；
    • 不处理布尔类型的属性；

  • class

    • 切换类样式；
    • 注意：给元素设置类样式是通过 sel 选择器；

  • dataset

    • 设置 data-* 的自定义属性；

  • eventlisteners

    • 注册和移除事件；

  • style

    • 设置行内样式，支持动画；
    • delayed/remove/destroy；

模块使用

• 模块使用步骤：

  • 导入需要的模块；
  • init() 中注册模块；
  • 使用 h() 函数创建 VNode 的时候，可以把第二个参数设置为对象，其他参数往后移；

代码演示

import { h } from 'snabbdom/build/package/h'
import { init } from 'snabbdom/build/package/init'
// 导入需要的模块
import { styleModule } from 'snabbdom/build/package/modules/style'
import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners'
​
// 使用 init() 函数创建 patch()
// init() 的参数是数组，将来可以传入模块，处理属性/样式/事件等
let patch = init([
  // 注册模块
  styleModule,
  eventListenersModule
])
​
// 使用 h() 函数创建 vnode
let vnode = h('div.cls', {
  // 设置 DOM 元素的行内样式
  style: { color: '#DEDEDE', backgroundColor: '#181A1B' },
  // 注册事件
  on: { click: clickHandler }
}, [
  h('h1', 'Hello Snabbdom'),
  h('p', '这是段落')
])
​
function clickHandler () {
  // 此处的 this 指向对应的 vnode
  console.log(this.elm.innerHTML)
}