虛擬 dom 結構概念隨著 react 的誕生而火起來，之後 vue2.0 也加入了虛擬 dom 的概念。
於是 google 一下，發現 snabbdom 實現的十分優雅，**更易讀。 所以決定先去把 snabbdom 的原始碼啃了之後，再回過頭來啃 vue 虛擬 dom 這一塊的實現。
為什麼需要 virtual dom
在前端刀耕火種的時代，jquery 可謂是一家獨大。然而慢慢的人們發現，在我們的**中布滿了一系列操作 dom 的**。這些**難以維護，又容易出錯。而且也難以測試。
所以，react 利用了 virtual dom 簡化 dom 操作，讓資料與 dom 之間的關係更直觀更簡單。
實現 virtual dom
virtual dom 主要包括以下三個方面：
使用 js 資料物件 表示 dom 結構 -> vnode
比較新舊兩棵 虛擬 dom 樹的差異 -> diff
將差異應用到真實的 dom 樹上 -> patch
下面開始來研究 snabbdom 是如何實現這些方面的
專案路徑 ：
首先看一下整體的目錄結構，原始碼主要是在src裡面，其他的目錄：test、examples分別是測試用例以及例子。
這裡我們先關注原始碼部分
── h.ts 建立vnode的函式
── 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 初始化函式
── thunk.ts 分塊
── tovnode.ts dom元素轉vnode
── vnode.ts 虛擬節點物件
import from './snabbdom';
import from './modules/attributes'; // for setting attributes on dom elements
import from './modules/class'; // makes it easy to toggle classes
import from './modules/props'; // for setting properties on dom elements
import from './modules/style'; // handles styling on elements with support for animations
import from './modules/eventlisteners'; // attaches event listeners
import 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;
// 主要匯出 snabbdombundle , 主要包含兩個函式，乙個是 修補函式 ， 乙個是 h 函式
export const snabbdombundle = ;
export default snabbdombundle;
patch函式 ， 由snabbdom.ts的init方法，根據傳入的module來初始化
h函式 ，在h.ts裡面實現。
看起來h函式比patch要簡單一些，我們去看看到底做了些什麼。
snabbdom原始碼解析（一） 準備工作
snabbdom原始碼解析（二） h函式
snabbdom原始碼解析（三） vnode物件
snabbdom原始碼解析（四） patch 方法
snabbdom原始碼解析（五） 鉤子
snabbdom原始碼解析（六） 模組
snabbdom原始碼解析（七） 事件處理
個人部落格位址
snabbdom 原始碼除錯總結
在vue.js 中的虛擬 dom 借鑑了 snabbdom,目的是為了讓開發人員避免複雜的 dom 操作也為了跨不同平台。使用 virtual dom，在首次渲染的時候會影響效能因為要建立額外的物件來描述真實 dom，在更新少量標籤的時候也不會有效能上的提公升，在 dom 結構複雜的時候更新 dom...
TFS原始碼解析一
tfs是乙個 分布式檔案系統，集群中主要涉及名字伺服器nameserver，以及資料伺服器dataserver，nameserver提供索引管理，dataserver提供資料儲存及管理。客戶端通過nameserver請求，獲取到dataserver中的資料路徑，然後通過dataserver獲取資料操...
caffe原始碼解析 一
用si載入 後 首先從caffe layer的實現看起，不同框架下最大的差異就在於層的實現也決定了層的靈活性 layer可以看成是乙個基類，下面存在data layer，activation neuron layers，vision layer，common layers，loss layer,各個...