🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
**1 节点扫描源代码(18 scanNode.js)** ~~~ function scanNodeList(parent, vmodels) { var nodes = avalon.slice(parent.childNodes) scanNodeArray(nodes, vmodels) } function scanNodeArray(nodes, vmodels) { for (var i = 0, node; node = nodes[i++];) { switch (node.nodeType) { case 1: scanTag(node, vmodels) if (node.msCallback) { node.msCallback() node.msCallback = void 0 } break case 3: if(rexpr.test(node.nodeValue)){ scanText(node, vmodels, i) } break } } } ~~~ 2 文件分析 >[info] scanNodeList()是子节点扫描处理入口 > scanNodeArray()是子节点数组扫描处理过程 ~~~ function scanNodeList(parent, vmodels) { var nodes = avalon.slice(parent.childNodes) scanNodeArray(nodes, vmodels) } ~~~ >[info] scanNodeList()子节点扫描入口 > parent:待扫描节点, > vmodels:扫描信息保存地方 `var nodes = avalon.slice(parent.childNodes)` >[info] 调用avalon.slice分解为数组。 > avalon.slice见 avalon全局函数 `scanNodeArray(nodes, vmodels)` >[info] 扫描子孙节点数组 ~~~ function scanNodeArray(nodes, vmodels) { for (var i = 0, node; node = nodes[i++];) { switch (node.nodeType) { case 1: scanTag(node, vmodels) if (node.msCallback) { node.msCallback() node.msCallback = void 0 } break case 3: if(rexpr.test(node.nodeValue)){ scanText(node, vmodels, i) } break } } } ~~~ >[info] scanNodeArry()子节点数组扫描 > 分为普通子节点和文本子节点。 > 普通子节点递归使用scanTag进入标签扫描 > 文本子节点进入标签文本扫描处理 `for (var i = 0, node; node = nodes[i++];)` >[info] 遍历子节点数组。 `switch (node.nodeType)` >[info] 检查子节点类型 关于节点类型见基础原理的DOM接口 `case 1:` >[info] 普通元素节点,进入标签扫描scanTag() > 这里是个递归扫描子节点过程 ~~~ if (node.msCallback) { node.msCallback() node.msCallback = void 0 } ~~~