瀏覽器創(chuàng)建 DOM 是很“昂貴”的。來一個經(jīng)典示例，我們可以通過 document.createElement('p') 創(chuàng)建一個簡單的 p 元素，將屬性都打印出來康康：
可以看到打印出來的屬性非常多，當(dāng)頻繁地去更新復(fù)雜的 DOM 樹時，會產(chǎn)生性能問題。虛擬 DOM 就是用一個原生的 JS 對象去描述一個 DOM 節(jié)點，所以創(chuàng)建一個 JS 對象比創(chuàng)建一個 DOM 對象的代價要小很多。
VNode
VNode 就是 Snabbdom 中描述虛擬 DOM 的一個對象結(jié)構(gòu)，內(nèi)容如下：
type Key = string | number | symbol;
interface VNode {
// CSS 選擇器，比如：'p#container'。
sel: string | undefined;
// 通過 modules 操作 CSS classes、attributes 等。
data: VNodeData | undefined;
// 虛擬子節(jié)點數(shù)組，數(shù)組元素也可以是 string。
children: Array | undefined;
// 指向創(chuàng)建的真實 DOM 對象。
elm: Node | undefined;
/**
* text 屬性有兩種情況：
* 1. 沒有設(shè)置 sel 選擇器，說明這個節(jié)點本身是一個文本節(jié)點。
* 2. 設(shè)置了 sel，說明這個節(jié)點的內(nèi)容是一個文本節(jié)點。
*/
text: string | undefined;
// 用于給已存在的 DOM 提供標(biāo)識，在同級元素之間必須唯一，有效避免不必要地重建操作。
key: Key | undefined;
}
// vnode.data 上的一些設(shè)置，class 或者生命周期函數(shù)鉤子等等。
interface VNodeData {
props?: Props;
attrs?: Attrs;
class?: Classes;
style?: VNodeStyle;
dataset?: Dataset;
on?: On;
attachData?: AttachData;
hook?: Hooks;
key?: Key;
ns?: string; // for SVGs
fn?: () => VNode; // for thunks
args?: any[]; // for thunks
is?: string; // for custom elements v1
[key: string]: any; // for any other 3rd party module
}
例如這樣定義一個 vnode 的對象：
const vnode = h(
'p#container',
{ class: { active: true } },
[
h('span', { style: { fontWeight: 'bold' } }, 'This is bold'),
' and this is just normal text'
]);
我們通過 h(sel, b, c) 函數(shù)來創(chuàng)建 vnode 對象。h() 代碼實現(xiàn)中主要是判斷了 b 和 c 參數(shù)是否存在，并處理成 data 和 children，children 最終會是數(shù)組的形式。最后通過 vnode() 函數(shù)返回上面定義的 VNode 類型格式。
Snabbdom 的運行流程
先來一張運行流程的簡單示例圖，先有個大概的流程概念：
diff 處理是用來計算新老節(jié)點之間差異的處理過程。
再來看一段 Snabbdom 運行的示例代碼：
import {
init,
classModule,
propsModule,
styleModule,
eventListenersModule,
h,
} from 'snabbdom';
const patch = init([
// 通過傳入模塊初始化 patch 函數(shù)
classModule, // 開啟 classes 功能
propsModule, // 支持傳入 props
styleModule, // 支持內(nèi)聯(lián)樣式同時支持動畫
eventListenersModule, // 添加事件監(jiān)聽
]);
//
const container = document.getElementById('container');
const vnode = h(
'p#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!"),
]
);
// 傳入一個空的元素節(jié)點。
patch(container, vnode);
const newVnode = h(
'p#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!"),
]
);
// 再次調(diào)用 patch()，將舊節(jié)點更新為新節(jié)點。
patch(vnode, newVnode);
可以看到 init() 在執(zhí)行時先遍歷各個模塊，然后把鉤子函數(shù)存到了 cbs 這個對象中。執(zhí)行的時候可以康康 patch() 函數(shù)里面：
export function init(
modules: Array>,
domApi?: DOMAPI,
options?: Options
) {
// ...
return function patch(
oldVnode: VNode | Element | DocumentFragment,
vnode: VNode
): VNode {
// ...
// patch 開始了，執(zhí)行 pre 鉤子。
for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]();
// ...
}
}
這里以 pre 這個鉤子舉例，pre 鉤子的執(zhí)行時機是在 patch 開始執(zhí)行時?？梢钥吹?patch() 函數(shù)在執(zhí)行的開始處去循環(huán)調(diào)用了 cbs 中存儲的 pre 相關(guān)鉤子。其他生命周期函數(shù)的調(diào)用也跟這個類似，大家可以在源碼中其他地方看到對應(yīng)生命周期函數(shù)調(diào)用的地方。
這里的設(shè)計思路是觀察者模式。Snabbdom 把非核心功能分布在模塊中來實現(xiàn)，結(jié)合生命周期的定義，模塊可以定義它自己感興趣的鉤子，然后 init() 執(zhí)行時處理成 cbs 對象就是注冊這些鉤子；當(dāng)執(zhí)行時間到來時，調(diào)用這些鉤子來通知模塊處理。這樣就把核心代碼和模塊代碼分離了出來，從這里我們可以看出觀察者模式是一種代碼解耦的常用模式。
重慶分公司
重慶分公司
