[TOC]
* * * * *
## 1 源码目录
### 1-1 代码下载
[源代码github地址](https://github.com/RubyLouvre/avalon/tree/2)
### 1-2 代码根目录
![](https://box.kancloud.cn/2016-04-07_5705c965bac99.jpg)
~~~
avalon\ ;根目录
dist\ ;合并后代码目录
karma\ ;指令扩展目录
panel\ ;组件扩展目录
src\ ;代码核心目录
~~~
### 1-3 代码src目录
~~~
avalon\src\ ;代码核心目录
component\ ;组件实现
directives\ ;指令实现
dom\ ;dom操作
filters\ ;过滤器
seed\ ;框架入口
strategy\ ;同步刷新实现
vdom\ ;虚拟dom操作
vmdoel\ ;vmodel创建
_test_.js ;测试入口
avalon.js ;兼容版本入口
avalon.modern.js ;modern版本入口
~~~
## 2 主体流程
### 2-1 流程组织
>[info] 框架的主体流程可以分为三个支流:
>[info] 1 模板扫描;
>[info] 2 VM创建;
>[info] 3 同步刷新;
### 2-2 模板扫描
~~~
扫描入口 src\dom\ready\modern.js
节点扫描 src\dom\ready\san.js
节点解析 src\strategy\lexer.js
节点渲染 src\strategy\index.js\render
~~~
### 2-3 VM创建
~~~
创建入口 src\vmodel\parts\share.js\define()
创建实现 src\vmodel\modern.js\masterFactory()
~~~
### 2-4 同步刷新
~~~
刷新入口 src\dom\ready\san.js\avalon.batch($id, true)
刷新实现 src\strategy\batch.js
~~~
>[danger] 注:上面的源代码对应文件只分析了modern版本。
## 3 阅读说明
### 3-1 modern与兼容版本
* 兼容版本
> avalon2在前端"国内行情"下,兼容IE6版本。
> 具体实现入口在 avalon\src\avalon.js
* modern版本
> avalon2另外独立了具有进步意义的modern版本
> 具体实现入口在 avalon\src\avalon.modern.js
### 3-2 版本选择
源代码阅读**主要分析modern版本**。
对应**兼容版本**在框架驱动的兼容处理**另做说明**
- 概述
- 框架目录
- 组件目录(components\)
- 生成目录(dist\)
- 测试目录(karma\)
- 示例目录(perf\)
- 主体目录(src)
- 其他文件
- 框架流程
- 前:章节说明
- 主:模板扫描(avalon.scan())
- 主:VM创建(avalon.define())
- 主:同步刷新(avalon.batch())
- 附:节点解析(avalon.lexer())
- 附:虚拟DOM(avalon.vdomAdaptor())
- 附:渲染函数(avalon.render())
- 附:VM生成(avalon.masterFactory())
- 附:节点diff(avalon.diff())
- 主:界面事件(test)
- 框架工具
- 另:全局函数
- 另:全局正则
- 另:事件接口
- 另:组件接口
- 另:DOMApi
- 框架驱动
- D : 指令实现
- D:兼容处理
- 使用范例
- 基础原理
- js模块
- js对象
- js函数
- js数组
- js字符串
- dom接口
- 框架心得
- 心:总体思路