snabbdom源码解析（六） 模块

共计 4265 个字符，预计需要花费 11 分钟才能阅读完成。

模块
在 ./src/modules 里面，定义了一系列的模块，这些模块定义了相应的钩子。这些钩子会在 patch 的不同阶段触发，以完成相应模块的功能处理
了解生命周期更多的内容，请查看 钩子

主要的模块有：

attributes.ts
class.ts
dataset.ts
eventlisteners.ts
hero.ts
module.ts
props.ts
style.ts

其中 attributes class dataset props 四个比较简单，都是定义了 create update 两个钩子,
eventlisteners hero style 这三个模块就复杂一点。
另外 module.ts 只是定义了这些模块所用到的一些钩子
// 定义模块的钩子
export interface Module {
pre: PreHook;
create: CreateHook;
update: UpdateHook;
destroy: DestroyHook;
remove: RemoveHook;
post: PostHook;
}
接下来我们来看看其他的模块
attributes 模块
文件位置：./src/modules/attributes.ts
我们先拉到最后
// 创建以及更新的钩子
export const attributesModule = {
create: updateAttrs,
update: updateAttrs
} as Module;
export default attributesModule;
attributesModule 导出了两个方法，都是调用了 updateAttrs。
这个表示，在创建元素的时候，以及更新的时候，都会触发这两个钩子，来更新 attribute。
updateAttrs
updateAttrs 主要接受两个参数，oldVnode、vnode。
主要逻辑如下：

遍历新 vnode 所有的属性，判断在 oldVnode 中是否相等，修改不相等的属性
删除不存在于 vnode 的属性

代码如下：
/**
* 更新属性
*/
function updateAttrs(oldVnode: VNode, vnode: VNode): void {
var key: string,
elm: Element = vnode.elm as Element,
oldAttrs = (oldVnode.data as VNodeData).attrs,
attrs = (vnode.data as VNodeData).attrs;

if (!oldAttrs && !attrs) return;
if (oldAttrs === attrs) return;
oldAttrs = oldAttrs || {};
attrs = attrs || {};

// update modified attributes, add new attributes
// 遍历新的属性，修改不相等的
for (key in attrs) {
const cur = attrs[key];
const old = oldAttrs[key];
if (old !== cur) {
if (cur === true) {
elm.setAttribute(key, ”);
} else if (cur === false) {
elm.removeAttribute(key);
} else {
if (key.charCodeAt(0) !== xChar) {
// 如果不是 x 开头
elm.setAttribute(key, cur);
} else if (key.charCodeAt(3) === colonChar) {
// Assume xml namespace
elm.setAttributeNS(xmlNS, key, cur);
} else if (key.charCodeAt(5) === colonChar) {
// Assume xlink namespace
elm.setAttributeNS(xlinkNS, key, cur);
} else {
elm.setAttribute(key, cur);
}
}
}
}
// remove removed attributes
// use `in` operator since the previous `for` iteration uses it (.i.e. add even attributes with undefined value)
// the other option is to remove all attributes with value == undefined
// 删除多余的属性
for (key in oldAttrs) {
if (!(key in attrs)) {
elm.removeAttribute(key);
}
}
}
class 模块
文件位置：./src/modules/class.ts
与 attribute 类似，class 也是定义了 create 和 update 两个钩子，统一由 updateClass 处理
这块逻辑比较简单，直接看代码吧

function updateClass(oldVnode: VNode, vnode: VNode): void {
var cur: any,
name: string,
elm: Element = vnode.elm as Element,
oldClass = (oldVnode.data as VNodeData).class,
klass = (vnode.data as VNodeData).class;

// 新老的 className 都没有
if (!oldClass && !klass) return;

// 新老的 className 没变
if (oldClass === klass) return;

oldClass = oldClass || {};
klass = klass || {};

// 删除不存在与新的 classList 的 className
for (name in oldClass) {
if (!klass[name]) {
elm.classList.remove(name);
}
}

// 新增 或删除 class
for (name in klass) {
cur = klass[name];
if (cur !== oldClass[name]) {
(elm.classList as any)[cur ? ‘add’ : ‘remove’](name);
}
}
}
dataset 模块
文件位置：./src/modules/dataset.ts
与 attribute 类似，dataset 也是定义了 create 和 update 两个钩子，统一由 updateDataset 处理
这块逻辑比较简单，直接看代码吧
const CAPS_REGEX = /[A-Z]/g;

/**
* 更新或创建 dataset
*/
function updateDataset(oldVnode: VNode, vnode: VNode): void {
let elm: HTMLElement = vnode.elm as HTMLElement,
oldDataset = (oldVnode.data as VNodeData).dataset,
dataset = (vnode.data as VNodeData).dataset,
key: string;

// 不变的情况下不处理
if (!oldDataset && !dataset) return;
if (oldDataset === dataset) return;

oldDataset = oldDataset || {};
dataset = dataset || {};
const d = elm.dataset;

// 删除多余的 dataset
for (key in oldDataset) {
if (!dataset[key]) {
if (d) {
if (key in d) {
delete d[key];
}
} else {
// 将驼峰式改为中划线分割 eg: userName —-> user-name
elm.removeAttribute(
‘data-‘ + key.replace(CAPS_REGEX, ‘-$&’).toLowerCase()
);
}
}
}

// 修改有变化的 dataset
for (key in dataset) {
if (oldDataset[key] !== dataset[key]) {
if (d) {
d[key] = dataset[key];
} else {
elm.setAttribute(
// 将驼峰式改为中划线分割 eg: userName —-> user-name
‘data-‘ + key.replace(CAPS_REGEX, ‘-$&’).toLowerCase(),
dataset[key]
);
}
}
}
}

props 模块
文件位置：./src/modules/props.ts
与 attribute 类似，props 也是定义了 create 和 update 两个钩子，统一由 updateProps 处理
这块逻辑比较简单，直接看代码吧
function updateProps(oldVnode: VNode, vnode: VNode): void {
var key: string,
cur: any,
old: any,
elm = vnode.elm,
oldProps = (oldVnode.data as VNodeData).props,
props = (vnode.data as VNodeData).props;

if (!oldProps && !props) return;
if (oldProps === props) return;

oldProps = oldProps || {};
props = props || {};

// 删除多余的属性
for (key in oldProps) {
if (!props[key]) {
delete (elm as any)[key];
}
}

// 添加新增的属性
for (key in props) {
cur = props[key];
old = oldProps[key];
// key 为 value 的情况，再判断是否 value 有变化
// key 不为 value 的情况，直接更新
if (old !== cur && (key !== ‘value’ || (elm as any)[key] !== cur)) {
(elm as any)[key] = cur;
}
}
}
eventlisteners 模块
eventlisteners 这一块内容稍微多一点，故将其独立出来一个章节。传送门：事件
style 模块
待续。。。
hero 模块
待续。。。
snabbdom 源码解析系列
snabbdom 源码解析（一）准备工作
snabbdom 源码解析（二）h 函数
snabbdom 源码解析（三）vnode 对象
snabbdom 源码解析（四）patch 方法
snabbdom 源码解析（五）钩子
snabbdom 源码解析（六）模块
snabbdom 源码解析（七）事件处理
个人博客地址