成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

snabbdom源碼解析（一） 準(zhǔn)備工作

defcon / 2394人閱讀

摘要：閱讀源碼的時(shí)候，想了解虛擬結(jié)構(gòu)的實(shí)現(xiàn)，發(fā)現(xiàn)在的地方。然而慢慢的人們發(fā)現(xiàn)，在我們的代碼中布滿了一系列操作的代碼。源碼解析系列源碼解析一準(zhǔn)備工作源碼解析二函數(shù)源碼解析三對象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個(gè)人博客地址

前言

虛擬 DOM 結(jié)構(gòu)概念隨著 react 的誕生而火起來，之后 vue2.0 也加入了虛擬 DOM 的概念。

閱讀 vue 源碼的時(shí)候，想了解虛擬 dom 結(jié)構(gòu)的實(shí)現(xiàn)，發(fā)現(xiàn)在 src/core/vdom/patch.js 的地方。作者說 vue 的虛擬 DOM 的算法是基于 snabbdom 進(jìn)行改造的。

于是 google 一下，發(fā)現(xiàn) snabbdom 實(shí)現(xiàn)的十分優(yōu)雅，代碼更易讀。 所以決定先去把 snabbdom 的源碼啃了之后，再回過頭來啃 vue 虛擬 DOM 這一塊的實(shí)現(xiàn)。

什么是虛擬 DOM 結(jié)構(gòu)（Virtual DOM） 為什么需要 Virtual DOM

在前端刀耕火種的時(shí)代，jquery 可謂是一家獨(dú)大。然而慢慢的人們發(fā)現(xiàn)，在我們的代碼中布滿了一系列操作 DOM 的代碼。這些代碼難以維護(hù)，又容易出錯(cuò)。而且也難以測試。

所以，react 利用了 Virtual DOM 簡化 dom 操作，讓數(shù)據(jù)與 dom 之間的關(guān)系更直觀更簡單。

實(shí)現(xiàn) Virtual DOM

Virtual DOM 主要包括以下三個(gè)方面：

使用 js 數(shù)據(jù)對象 表示 DOM 結(jié)構(gòu) -> VNode

比較新舊兩棵 虛擬 DOM 樹的差異 -> diff

將差異應(yīng)用到真實(shí)的 DOM 樹上 -> patch

下面開始來研究 snabbdom 是如何實(shí)現(xiàn)這些方面的

目錄

項(xiàng)目路徑 ： https://github.com/snabbdom/snabbdom

首先看一下整體的目錄結(jié)構(gòu)，源碼主要是在 src 里面，其他的目錄：test 、examples 分別是測試用例以及例子。

這里我們先關(guān)注源碼部分

── h.ts   創(chuàng)建vnode的函數(shù)
── helpers
 └── attachto.ts
── hooks.ts  定義鉤子
── htmldomapi.ts   操作dom的一些工具類
── is.ts   判斷類型
── modules  模塊
 ├── attributes.ts
 ├── class.ts
 ├── dataset.ts
 ├── eventlisteners.ts
 ├── hero.ts
 ├── module.ts
 ├── props.ts
 └── style.ts
── snabbdom.bundle.ts 入口文件
── snabbdom.ts  初始化函數(shù)
── thunk.ts  分塊
── tovnode.ts   dom元素轉(zhuǎn)vnode
── vnode.ts  虛擬節(jié)點(diǎn)對象
snabbdom.bundle.ts 入口文件

我們先從入口文件開始看起

import { init } from "./snabbdom";
import { attributesModule } from "./modules/attributes"; // for setting attributes on DOM elements
import { classModule } from "./modules/class"; // makes it easy to toggle classes
import { propsModule } from "./modules/props"; // for setting properties on DOM elements
import { styleModule } from "./modules/style"; // handles styling on elements with support for animations
import { eventListenersModule } from "./modules/eventlisteners"; // attaches event listeners
import { h } from "./h"; // helper function for creating vnodes

// 入口文件

// 初始化，傳入需要更新的模塊。
var patch = init([
    // Init patch function with choosen modules
    attributesModule,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule
]) as (oldVNode: any, vnode: any) => any;

// 主要導(dǎo)出 snabbdomBundle , 主要包含兩個(gè)函數(shù)，一個(gè)是 修補(bǔ)函數(shù) ， 一個(gè)是 h 函數(shù)
export const snabbdomBundle = { patch, h: h as any };
export default snabbdomBundle;

我們可以看到，入口文件主要導(dǎo)出兩個(gè)函數(shù) ，

patch函數(shù) ， 由 snabbdom.ts 的 init 方法，根據(jù)傳入的 module 來初始化

h函數(shù) ，在 h.ts 里面實(shí)現(xiàn)。

看起來 h函數(shù)比 patch 要簡單一些，我們?nèi)タ纯吹降鬃隽诵┦裁础?/p> snabbdom源碼解析系列

snabbdom源碼解析（一） 準(zhǔn)備工作

snabbdom源碼解析（二） h函數(shù)

snabbdom源碼解析（三） vnode對象

snabbdom源碼解析（四） patch 方法

snabbdom源碼解析（五） 鉤子

snabbdom源碼解析（六） 模塊

snabbdom源碼解析（七） 事件處理

個(gè)人博客地址

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108832.html

相關(guān)文章

  • snabbdom源碼解析（二） h函數(shù)

    介紹 這里是 typescript 的語法，定義了一系列的重載方法。h 函數(shù)主要根據(jù)傳進(jìn)來的參數(shù)，返回一個(gè) vnode 對象 代碼 代碼位置 ： ./src/h.ts /** * 根據(jù)選擇器 ，數(shù)據(jù) ，創(chuàng)建 vnode */ export function h(sel: string): VNode; export function h(sel: string, data: VNodeData...

    Jensen 評論0 收藏0

  • snabbdom源碼解析（五） 鉤子

    摘要：元素從父節(jié)點(diǎn)刪除時(shí)觸發(fā)，和略有不同，只影響到被移除節(jié)點(diǎn)中最頂層的節(jié)點(diǎn)在方法的最后調(diào)用，也就是完成后觸發(fā)源碼解析系列源碼解析一準(zhǔn)備工作源碼解析二函數(shù)源碼解析三對象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個(gè)人博客地址 文件路徑 ： ./src/hooks.ts 這個(gè)文件主要是定義了 Virtual Dom 在實(shí)現(xiàn)過程中，在其執(zhí)行過程中的一系列鉤子。方便外部做一些處理 /...

    Worktile 評論0 收藏0

  • snabbdom源碼解析（三） vnode對象

    摘要：對象是一個(gè)對象，用來表示相應(yīng)的結(jié)構(gòu)代碼位置定義類型定義類型選擇器數(shù)據(jù)，主要包括屬性樣式數(shù)據(jù)綁定時(shí)間等子節(jié)點(diǎn)關(guān)聯(lián)的原生節(jié)點(diǎn)文本唯一值，為了優(yōu)化性能定義的類型定義綁定的數(shù)據(jù)類型屬性能直接用訪問的屬性樣式類樣式數(shù)據(jù)綁定的事件鉤子創(chuàng)建對象根據(jù)傳入的 vnode 對象 vnode 是一個(gè)對象，用來表示相應(yīng)的 dom 結(jié)構(gòu) 代碼位置 ：./src/vnode.ts 定義 vnode 類型 /** ...

    willin 評論0 收藏0

  • snabbdom源碼解析（七） 事件處理

    摘要：這種解決方式也是相當(dāng)優(yōu)雅，值得學(xué)習(xí)源碼解析系列源碼解析一準(zhǔn)備工作源碼解析二函數(shù)源碼解析三對象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個(gè)人博客地址 事件處理 我們在使用 vue 的時(shí)候，相信你一定也會(huì)對事件的處理比較感興趣。 我們通過 @click 的時(shí)候，到底是發(fā)生了什么呢！ 雖然我們用 @click綁定在模板上，不過事件嚴(yán)格綁定在 vnode 上的 。 event...

    Kross 評論0 收藏0

  • snabbdom源碼解析（六） 模塊

    摘要：模塊在里面，定義了一系列的模塊，這些模塊定義了相應(yīng)的鉤子。主要接受兩個(gè)參數(shù)，。傳送門事件模塊待續(xù)。。。源碼解析系列源碼解析一準(zhǔn)備工作源碼解析二函數(shù)源碼解析三對象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個(gè)人博客地址 模塊 在 ./src/modules 里面，定義了一系列的模塊 ， 這些模塊定義了相應(yīng)的鉤子 。這些鉤子會(huì)在 patch 的不同階段觸發(fā)，以完成相應(yīng)模塊的...

    zone 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<