[TOC] * * * * * ## 1 源代碼文件 ### 1-1刷新入口 ~~~ src\dom\read\scan.js\avalon.batch() ~~~ ### 1-2刷新實現 ~~~ src\strategy\batch.js ~~~ ## 2 流程分析 2-1 入口分析 ~~~ src\dom\read\scan.js avalon.batch($id, true) ~~~ > scan.js中掃描節點 > 經過解析，生成渲染函數 > 然后調用batch()函數同步刷新vm與視圖 2-2 實現分析 ~~~ src\strategy\batch.js module.exports = avalon.batch = batchUpdate ~~~ > 導出batchUpdate到avalon.batch() ~~~ function batchUpdate(id, immediate) { var vm = avalon.vmodels[id] if (!document.nodeName || !vm || !vm.$render || vm.$render === avalon.noop) return if (dirtyTrees[id]) { avalon.Array.ensure(needRenderIds, id) } else { dirtyTrees[id] = true } if (isBatchingUpdates) { return } var dom = vm.$element if (dom) { flushUpdate(function () { isBatchingUpdates = true var vtree = vm.$render() avalon.diff(vtree, dom.vtree || []) patch([dom], vtree) dom.vtree = vtree avalon.log('rerender', new Date - avalon.rerenderStart) isBatchingUpdates = false delete dirtyTrees[id] for (var i in dirtyTrees) { batchUpdate(i, true) break } }, immediate) } } ~~~ > id:vmodel的$id > immediate:是否立即刷新 * * * * * >[info] 環境與參數檢查 * * * * * > document.nodeName,檢查運行環境， > vm，vm.$render的參數檢查 * * * * * >[info] 1 檢查dirtyTrees的當前刷新vm * * * * * > dirtyTress以id為索引保存當前刷新vm > needRenderIds中保存需要刷新的vm * * * * * >[info] 2 檢查是否在更新 * * * * * > isBatchingUpdates 當前更新狀態判斷 * * * * * >[info] 3 對比刷新 * * * * * >首先獲取vm對應的元素節點vm.$element >獲取節點成功 **遞歸調用flushUpdate() batchUpdate()** 進行節點刷新操作 >有點繞，待分析 >重點函數avalon.diff() patch() 分析見附:虛擬DOM ## 3 其他代碼 ## 4 總結