>[success] # Snabbdom -- h函數 1. `h` 用來來創建 `vnodes`，這個函數需要三個參數 * 第一個參數，一個字符串類型的 標簽或選擇器 參數類型 `string` * 第二個參數，一個數據對象（可選）參數類型 `VNodeData` * 第三個參數，一個子節點數組或字符串（可選）參數類型`VNodeChildren` **現在想生成dom** `<div id='container' class='cls' style='color:red'>我是例子<span>例子<span></div>` * 通過`h` 函數生成寫法（這個例子中第二個參數類型就是VNodeData，第三個參數類型VNodeChildren） ~~~ let vnode = h('div', { style: { backgroundColor: 'red' }, on: { click: eventHandler } }, [ '我是文本' h('h1', 'Hello Snabbdom'), h('p', '這是p標簽') ]) ~~~ 2. 具體 `h` 函數定義 `snabbdom` 通過 用 **ts 重載**說明了幾種使用情況 ~~~ export function h(sel: string): VNode; // （1） export function h(sel: string, data: VNodeData): VNode; // （2） export function h(sel: string, children: VNodeChildren): VNode; // (3) export function h(sel: string, data: VNodeData, children: VNodeChildren): VNode; // （4） export function h(sel: any, b?: any, c?: any): VNode {.....} ~~~ 上面情依次表示 * **只創建了dom節點（1）**，節點中沒有任何內容 `<div id="app"></div>` ~~~ import { init, eventListenersModule, styleModule, h } from 'snabbdom' // 2. 注冊模塊 let patch = init([styleModule, eventListenersModule]) // 3. 使用 h() 函數的第二個參數傳入模塊需要的數據（對象） let vnode = h('div#app') let app = document.querySelector('#app') patch(app, vnode) ~~~ * **創建了dom節點,并創建dom中元素（2）**，節點中沒有任何內容 `<div id="app" class="name" style="background-color: red;"></div> ` ~~~ import { init, eventListenersModule, classModule, styleModule, h, } from 'snabbdom' // 2. 注冊模塊 let patch = init([styleModule, eventListenersModule, classModule]) // 3. 使用 h() 函數的第二個參數傳入模塊需要的數據（對象） let vnode = h('div#app', { style: { backgroundColor: 'red', }, class: { name: true, age: false, }, }) let app = document.querySelector('#app') patch(app, vnode) ~~~ * **創建dom并且創建里面的內容（3）** `VNodeChildren` 類型作為`VNodeChildElement | VNodeChildElement[]`其中 `VNodeChildren`類型定義： ~~~ export type VNodeChildElement = VNode | string | number | undefined | null; export type ArrayOrElement<T> = T | T[]; export type VNodeChildren = ArrayOrElement<VNodeChildElement> ~~~ `<div id="app"><span>子節點</span>12334</div>` ~~~ import { init, eventListenersModule, styleModule, h } from 'snabbdom' // 2. 注冊模塊 let patch = init([styleModule, eventListenersModule]) // 3. 使用 h() 函數的第二個參數傳入模塊需要的數據（對象） let vnode = h('div#app', [h('span', '子節點'), 1, 23, 34]) let app = document.querySelector('#app') patch(app, vnode) ~~~ * **創建一個有屬性有內容的節點(4)** 演示省略 >[danger] ##### 源碼部分 通過 h 函數將傳入參數 轉換成了 `VNode(虛擬節點)` ~~~ export function h(sel: any, b ? : any, c ? : any): VNode { var data: VNodeData = {}, children: any, text: any, i: number; // 處理參數，實現重載的機制 if (c !== undefined) { // 處理三個參數的情況 // sel、data、children/text if (b !== null) { data = b; } if (is.array(c)) { children = c; } // 如果 c 是字符串或者數字 else if (is.primitive(c)) { text = c; } // 如果 c 是 VNode else if (c && c.sel) { children = [c]; } } else if (b !== undefined && b !== null) { // 處理兩個參數的情況 // 如果 b 是數組 if (is.array(b)) { children = b; } // 如果 b 是字符串或者數字 else if (is.primitive(b)) { text = b; } // 如果 b 是 VNode else if (b && b.sel) { children = [b]; } else { data = b; } } if (children !== undefined) { // 處理 children 中的原始值(string/number) for (i = 0; i < children.length; ++i) { // 如果 child 是 string/number，創建文本節點 // 因為你的文本節點是'我是文本'類似這種在數組中不是一個h函數的 // 表現形式因此需要被轉換成一個h函數的表現形式 if (is.primitive(children[i])) children[i] = vnode(undefined, undefined, undefined, children[i], undefined); } } if ( sel[0] === 's' && sel[1] === 'v' && sel[2] === 'g' && (sel.length === 3 || sel[3] === '.' || sel[3] === '#') ) { // 如果是 svg，添加命名空間 addNS(data, children, sel); } // 返回 VNode return vnode(sel, data, children, text, undefined); }; // 導出模塊 export default h; ~~~