avalonJS-源码阅读（一）

写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)      元素类型
1                                   元素element
2                                   属性attr
3                                   文本text
8                                   注释comments
9                                   文档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的值来断定业务需求和vm做用域，ms-duplex属性和{{}}作占位符，等待渲染和占位符替换。VMODELS object则存放着要渲染进页面的数据。