[TOC] >[success] # 分析init ~~~ 1.整個snabbdom 核心就是patch，進行新老虛擬dom比較，因此首先需要看init這里做了什么 ，因為init返回值是patch 函數，init 的功能：init(modules, domApi)，返回 patch() 函數 2.拋開init 中間其他邏輯，其實主要做的就是將這些鉤子函數就是類似vue 的聲明周期函數 進行初始化保存init() 在返回 patch() 之前，首先收集了所有模塊中的鉤子函數存儲到 cbs 對象中 ~~~ >[danger] ##### init 代碼 -- src/snabbdom.ts ~~~ 1.下面是init 的代碼片段，采用了閉包的方式，思考為什么這里使用的閉包，先看init 的使用 let patch = init([]) let patchOldVnode = patch(newVnode,oldVnode) patchOldVnode = patch(newVnode,patchOldVnode ) 這使用閉包的好處，兩次調用patch，他們的配置都是init 傳入的參數，因為閉包延長了參數的作用域鏈 可以讓后來的patch 都共享init傳入的配置參數 1.1.舉個例子 const patch = init(['a', 'b', 'c']) patch() // [ 'a', 'b', 'c' ] patch() // [ 'a', 'b', 'c' ] 將這個例子轉化成類，可以理解成init函數參數就是初始化構造函數，patch 就是這個對象的一個方法 class Init { constructor(cfgs) { this.cfgs = cfgs } patch() { console.log(this.cfgs) } } const init = new Init(['a', 'b', 'c']) init.patch() // [ 'a', 'b', 'c' ] init.patch() // [ 'a', 'b', 'c' ] 2.init 函數第一個參數為模塊，這些提供的模塊會有鉤子函數，'hooks'列出了所有的鉤子函數， 將這些模塊的鉤子函數按照'hooks'提供的進行分類'最終構建的 cbs 對象的形式 cbs = { create: [fn1, fn2], update: [], ...}' ~~~ ~~~ const hooks: (keyof Module)[] = ['create', 'update', 'remove', 'destroy', 'pre', 'post' ]; export function init(modules: Array < Partial < Module >> , domApi ? : DOMAPI) { let i: number, j: number, cbs = ({} as ModuleHooks); // 初始化轉換虛擬節點的 api const api: DOMAPI = domApi !== undefined ? domApi : htmlDomApi; // 把傳入的所有模塊的鉤子方法，統一存儲到 cbs 對象中 // 最終構建的 cbs 對象的形式 cbs = [ create: [fn1, fn2], update: [], ... ] for (i = 0; i < hooks.length; ++i) { // cbs['create'] = [] cbs[hooks[i]] = []; for (j = 0; j < modules.length; ++j) { // const hook = modules[0]['create'] const hook = modules[j][hooks[i]]; if (hook !== undefined) { (cbs[hooks[i]] as Array < any > ).push(hook); } } } ……………… return function patch(oldVnode: VNode | Element, vnode: VNode): VNode {} } ~~~