[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 总结