avalon源码阅读（1）

来源

 

写angularJS源码阅读系列的时候，写的太垃圾了。

一个月后看，真心不忍直视，以后有机会的话得重写。

这次写avalonJS，希望能在代码架构层面多些一点，少上源码、多写思路。

 

avalon暴露句柄方式  、、已经不是这样了

(function(DOC){
...
avalon=...//没有var
...
})(document)

 

具体暴露句柄方式的讲解，在这里。

avalon Dom遍历

 

源码的末尾执行了这么avalon.ready(function(){...})一个函数,

而这个函数的末尾为avalon.scan(DOC.body)

于是乎，avalon开始了读body旅程。

在这旅程中，

 

有scanNodes、scanTag、scanAttr、scanText、scanExpr、scanTemplate需要来回流转运用。

在讲解读取dom之前，我们先了解下dom的组成，节点类型（document.nodeType）：

 

节点类型(nodeType) 元素类型

元素element
属性attr
文本text

注释comments
文档document

 

我们可以通过节点类型和

具体的元素标签

来判定将要解析的 和 不会去解析的。

scanNodes

我们先看scanNodes(parentElement,vmodels)函数，

他的作用是通过parentElement.firstChild``child.nextSibling 遍历当前dom下 的子节点，

并且通过节点类型的判定，各自调用scanTag(nodeType==1)

和scanText(NodeType==8 && 存在{{...}})函数。

 

scanTag

scanTag(elem, vmodels, node),这个函数蛮有意思的，

第三个参数node是作者不想进行var声明，直接写在参数里的。

这个函数的作用是判定avalon执行作用域的，

 

作用域有三类：ms-skip ms-import和 ms-controller(有优先顺序)，

ms-important不包含父VM，ms-controller相反会有继承效果。

当然，这时候游览器还没有执行用户自定义的avalon.defined，

所以不会调用scanAttr继续旅行的。  、、待定

 

scanText

scanText(textNode, text, vmodels),顾名思义，

会具体解析解析...{{...}}...的值。这样的话，

就会涉及avalon filter的解析，具体解析方法放在scanExpr里面，

 

scanText主要替换...{{...}}...为解析后的数据，

并且如果有用了filter的话，会调用executeBindings进行相应的处理。

该函数会产生一个记录scanText解析结果的object。数据结构为：

{
　　type: "text",//类型
　　node: node,//替换后的element
　　nodeType: 3,//节点类型

　　value: token.value,
　　filters: token.filters
　　//token 为scanExpr的返回值
}

 

scanExpr

scanExpr(str),这个函数只要知道返回的结果格式就好。

scanAttr

scanAttr(elem, vmodels)这个函数super重要的，

他会针对  avalon封装的事件 和 ms-if repeat widget 等做相应的处理。

会在下一章连同 executeBindings 一块讲解。

scanTemplate

scanTemplate属于模板加载，

以后可能会在这里补上或者新开一篇文章单独讲解它。

小记

如果  有遍历dom需求的话 ，上面代码可经过  去除依赖处理后 摘出来。

基本流程：从头到脚的开始遍历，

 

根据存放在  dom attribute的值   来判定业务需求和  v  m作用域，

ms-duplex属性和  {{}}  做占位符，等待渲染和占位符替换。

 

VMODELS object则存  放着要  渲染进页面的数据。

转载于:https://www.cnblogs.com/dhsz/p/7998731.html