「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

Snabbdom中的模块

目标： 本章要介绍Snabbdom中的模块

前言

我们要从下面三个方面依次进行介绍：

模块的使用
官方提供的模块
模块的使用步骤

1. 模块的使用

Snabbdom的核心库并不能处理DOM元素的属性、样式、事件等，可以通过注册Snabbdom默认提供的模块来实现
Snabbdom中的模块可以用来拓展Snabbdom的功能
Snabbdom中的模块的实现是通过注册全局的钩子函数来实现的

2. 官方提供的模块

这些模块我们并不需要去做记忆，只要我们可以理解干嘛用的就好！

attributes： 设置VNode对应的DOM元素的属性，通过 HTML DOM setAttribute() 方法来实现的
props: 与attributes类似，都是用来设置DOM对象的属性，但是不同的是props内部设置对象的属性是通过 对象.属性的方式设置的，它内部不会处理布尔类型的属性
dataset： 用来处理HTML5中的所有自定义数据属性(data-*)集
class： 它不是用来设置类样式的，而是用来切换类样式的
style： 是用来设置行内样式
eventlisteners： 注册和移除事件

3. 模块的使用步骤

导入需要的模块
init() 中注册模块
h() 函数的第二个参数处使用模块

代码演示

纸上谈来空觉浅，接下来我们要进入模拟实战:

目标

通过虚拟dom，创建一个 div 包含 h1 和 p 两个子元素，且h1的背景为红色，p可以被点击

1. 导入模块

import { styleModule } from 'snabbdom/build/package/modules/style'
import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners'

2. 注册模块

import { init } from 'snabbdom/build/package/init'
const patch = init([
  styleModule,
  eventListenersModule
])

3.使用h()函数的第二个参数传入模块中使用的数据（对象）

import { h } from 'snabbdom/build/package/h'
let vnode = h('div', [
  h('h1', {style: { backgroundColor: 'red'}}, 'Hello World'),
  h('p',{on: { click: eventHandler}}, 'hello world')
])

function eventHandler(){
  alert('你好 JS!')
}

4. 获取节点，渲染

let app = document.querySelector('#app')
patch(app, vnode)

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snabbdom Demo</title>
  </head>
  <body>
    <div id="app">
    </div>
    <script src="./src/03-modules.js"></script>
  </body>
</html>

测试

我们使用命令行： npm run dev 启动页面

目标达成！

好了，到这关于Snabbdom中的模块我们就介绍完毕了！