Snabbdom -- 理解虛擬dom和diff算法 · 前端工程化學習筆記

>[success] # Snabbdom 1. **Vue 2.x** 內部使用的 `Virtual DOM` 就是改造的 `Snabbdom`,官網對其介紹Snabbdom 則**極其簡單、高效并且可拓展，同時核心代碼 ≈ 200 行**。我們提供了一個**具有豐富功能同時支持自定義拓展的模塊化結構**。為了使核心代碼更簡潔，所有**非必要的功能都將模塊化引入** >[info] ## Snabbdom 基本使用 1. `yarn init -y` 初始化項目 2. `yarn add snabbdom` 安裝snabbdom 3. `yarn add webpack webpack-cli` 安裝打包工具方便看運行效果 * 項目結構目錄 ~~~ |-- dist | | -- index.html | | -- main.js // webpack 打包后產出打包文件 |-- package.json |-- pnpm-lock.yaml |-- src | |-- index.js ~~~ >[danger] ##### 簡單案例 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"></div> <script src="./src/index.js"></script> </body> </html> ~~~ * src/index.js ~~~ import { init, classModule, propsModule, styleModule, eventListenersModule, h, } from 'snabbdom' // 注冊使用模塊 let patch = init([ classModule, // 開啟 classes 功能 propsModule, // 支持傳入 props styleModule, // 支持內聯樣式同時支持動畫 eventListenersModule, // 添加事件監聽 ]) // 創建虛擬node 節點 let vnode = h('div#container.cls', 'hello word') let app = document.querySelector('#app') // 將虛擬node 節點插入指定容器中 let oldVnode = patch(app, vnode) setTimeout(() => { // 假設的時刻改變后的內容 vnode = h( 'div', { style: { color: 'yellow' }, }, 'Hello Snabbdom' ) // patch 傳入新老的虛擬dom對象，進行比較重新渲染 patch(oldVnode, vnode) }, 1000) ~~~ >[info] ## 使用 Snabbdom 簡單說明 1. **Snabbdom 的核心庫**并不能處理元素的**屬性/樣式/事件**等，如果需要處理的話，可以使用模塊注冊進入 2. 官方提供了六個模塊 * `attributes設置 DOM 元素的屬性`，使用`setAttribute ()`處理布爾類型的屬性 * `props和 attributes 模塊相似`，**設置 DOM 元素的屬性中attributes設置 DOM 元素的屬性**，使用 `setAttribute ()`處理布爾類型的屬性`props`是`element[attr] = value`**不處理布爾類型的屬性** * `class切換類樣式`,給元素設置類樣式是通過 sel 選擇器 * `dataset設置 data-* `的自定義屬性 3. 決定使用模塊進行導入模塊，在`init()` 中注冊模塊使用 `h()` 創建`Vnode`，`init`函數返回的`patch` * 關于`patch`函數會接受兩個參數，**一個 DOM 元素**或者 **一個表示當前視圖的 vnode**，第一次創建時候第一個參數一般往往都是**一個 DOM 元素**，因為如果第一個參數傳入一個包含父節點的 `DOM `元素，那么新的 `vnode `將轉換為一個 `DOM `節點并替換傳入的元素，后續為了進行比較新`老虛擬dom` 來優化渲染，所以新老的 `Vnode` 都要經過 `patch` 函數 * 案例點擊時候切換dom ~~~ import { init, eventListenersModule, styleModule,h } from 'snabbdom' // 2. 注冊模塊 let patch = init([styleModule, eventListenersModule]) // 3. 使用 h() 函數的第二個參數傳入模塊需要的數據（對象） let vnode = h( 'div', { style: { backgroundColor: 'red', }, on: { click: eventHandler, }, }, [h('h1', 'Hello Snabbdom'), h('p', '這是p標簽')] ) let app = document.querySelector('#app') let oldVnode = patch(app, vnode) function eventHandler() { vnode = h('div', 'hello') patch(oldVnode, vnode) } ~~~ >[info] ## 項目結構目錄 ~~~ │ h.ts h()函數，用來創建 VNode │ hooks.ts 所有鉤子函數的定義 │ htmldomapi.ts 對 DOM API 的包裝 │ is.ts 判斷數組和原始值的函數 │ jsx-global.d.ts jsx 的類型聲明文件 │ jsx.ts 處理 jsx │ snabbdom.bundle.ts 入口，已經注冊了模塊 │ snabbdom.ts 初始化，返回 init/h/thunk │ thunk.ts 優化處理，對復雜視圖不可變值得優化 │ tovnode.ts DOM 轉換成 VNode │ vnode.ts 虛擬節點定義 │ ├─helpers │ attachto.ts 定義了 vnode.ts 中 AttachData 的數據結構 │ └─modules 所有模塊定義 / 鉤子函數 attributes.ts class.ts dataset.ts eventlisteners.ts hero.ts example 中使用到的自定義鉤子 module.ts 定義了模塊中用到的鉤子函數 props.ts style.ts ~~~ >[info] ## 參考 [參考一個全程帶注釋鏈接](https://github.com/tramp-xu/codeAnalysis/blob/master/snabbdom-js/snabbdom.js)