資訊專欄INFORMATION COLUMN
介紹
這里是 typescript 的語(yǔ)法，定義了一系列的重載方法。
h 函數(shù)主要根據(jù)傳進(jìn)來(lái)的參數(shù)，返回一個(gè) vnode 對(duì)象
代碼位置 ： ./src/h.ts
/**
* 根據(jù)選擇器 ，數(shù)據(jù) ，創(chuàng)建 vnode
*/
export function h(sel: string): VNode;
export function h(sel: string, data: VNodeData): VNode;
export function h(sel: string, children: VNodeChildren): VNode;
export function h(sel: string, data: VNodeData, children: VNodeChildren): VNode;
export function h(sel: any, b?: any, c?: any): VNode {
var data: VNodeData = {},
children: any,
text: any,
i: number;
/**
* 處理參數(shù)
*/
if (c !== undefined) {
// 三個(gè)參數(shù)的情況 sel , data , children | text
data = b;
if (is.array(c)) {
children = c;
} else if (is.primitive(c)) {
text = c;
} else if (c && c.sel) {
children = [c];
}
} else if (b !== undefined) {
// 兩個(gè)參數(shù)的情況 : sel , children | text
// 兩個(gè)參數(shù)的情況 : sel , data
if (is.array(b)) {
children = b;
} else if (is.primitive(b)) {
text = b;
} else if (b && b.sel) {
children = [b];
} else {
data = b;
}
}
if (children !== undefined) {
for (i = 0; i < children.length; ++i) {
// 如果children是文本或數(shù)字 ，則創(chuàng)建文本節(jié)點(diǎn)
if (is.primitive(children[i]))
children[i] = vnode(
undefined,
undefined,
undefined,
children[i],
undefined
);
}
}
// 處理svg
if (
sel[0] === "s" &&
sel[1] === "v" &&
sel[2] === "g" &&
(sel.length === 3 || sel[3] === "." || sel[3] === "#")
) {
// 增加 namespace
addNS(data, children, sel);
}
// 生成 vnoe
return vnode(sel, data, children, text, undefined);
}
export default h;
其他
h 函數(shù)比較簡(jiǎn)單，主要是提供一個(gè)方便的工具函數(shù)，方便創(chuàng)建 vnode 對(duì)象
snabbdom源碼解析系列snabbdom源碼解析（一） 準(zhǔn)備工作
snabbdom源碼解析（二） h函數(shù)
snabbdom源碼解析（三） vnode對(duì)象
snabbdom源碼解析（四） patch 方法
snabbdom源碼解析（五） 鉤子
snabbdom源碼解析（六） 模塊
snabbdom源碼解析（七） 事件處理
個(gè)人博客地址
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108831.html
摘要：閱讀源碼的時(shí)候，想了解虛擬結(jié)構(gòu)的實(shí)現(xiàn)，發(fā)現(xiàn)在的地方。然而慢慢的人們發(fā)現(xiàn)，在我們的代碼中布滿了一系列操作的代碼。源碼解析系列源碼解析一準(zhǔn)備工作源碼解析二函數(shù)源碼解析三對(duì)象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個(gè)人博客地址 前言 虛擬 DOM 結(jié)構(gòu)概念隨著 react 的誕生而火起來(lái)，之后 vue2.0 也加入了虛擬 DOM 的概念。 閱讀 vue 源碼的時(shí)候，想了解...
摘要：對(duì)象是一個(gè)對(duì)象，用來(lái)表示相應(yīng)的結(jié)構(gòu)代碼位置定義類型定義類型選擇器數(shù)據(jù)，主要包括屬性樣式數(shù)據(jù)綁定時(shí)間等子節(jié)點(diǎn)關(guān)聯(lián)的原生節(jié)點(diǎn)文本唯一值，為了優(yōu)化性能定義的類型定義綁定的數(shù)據(jù)類型屬性能直接用訪問(wèn)的屬性樣式類樣式數(shù)據(jù)綁定的事件鉤子創(chuàng)建對(duì)象根據(jù)傳入的 vnode 對(duì)象 vnode 是一個(gè)對(duì)象，用來(lái)表示相應(yīng)的 dom 結(jié)構(gòu) 代碼位置 ：./src/vnode.ts 定義 vnode 類型 /** ...
摘要：元素從父節(jié)點(diǎn)刪除時(shí)觸發(fā)，和略有不同，只影響到被移除節(jié)點(diǎn)中最頂層的節(jié)點(diǎn)在方法的最后調(diào)用，也就是完成后觸發(fā)源碼解析系列源碼解析一準(zhǔn)備工作源碼解析二函數(shù)源碼解析三對(duì)象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個(gè)人博客地址 文件路徑 ： ./src/hooks.ts 這個(gè)文件主要是定義了 Virtual Dom 在實(shí)現(xiàn)過(guò)程中，在其執(zhí)行過(guò)程中的一系列鉤子。方便外部做一些處理 /...
摘要：這種解決方式也是相當(dāng)優(yōu)雅，值得學(xué)習(xí)源碼解析系列源碼解析一準(zhǔn)備工作源碼解析二函數(shù)源碼解析三對(duì)象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個(gè)人博客地址 事件處理 我們?cè)谑褂?vue 的時(shí)候，相信你一定也會(huì)對(duì)事件的處理比較感興趣。 我們通過(guò) @click 的時(shí)候，到底是發(fā)生了什么呢！ 雖然我們用 @click綁定在模板上，不過(guò)事件嚴(yán)格綁定在 vnode 上的 。 event...
摘要：模塊在里面，定義了一系列的模塊，這些模塊定義了相應(yīng)的鉤子。主要接受兩個(gè)參數(shù)，。傳送門事件模塊待續(xù)。。。源碼解析系列源碼解析一準(zhǔn)備工作源碼解析二函數(shù)源碼解析三對(duì)象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個(gè)人博客地址 模塊 在 ./src/modules 里面，定義了一系列的模塊 ， 這些模塊定義了相應(yīng)的鉤子 。這些鉤子會(huì)在 patch 的不同階段觸發(fā)，以完成相應(yīng)模塊的...
閱讀 2453·2021-09-08 09:45
閱讀 3391·2021-09-08 09:45
閱讀 3131·2019-08-30 15:54
閱讀 3380·2019-08-26 13:54
閱讀 1447·2019-08-26 13:26
閱讀 1412·2019-08-26 13:23
閱讀 942·2019-08-23 17:57
閱讀 2210·2019-08-23 17:14
