[TOC]
* * * * *
## 1 源碼目錄
### 1-1 代碼下載
[源代碼github地址](https://github.com/RubyLouvre/avalon/tree/2)
### 1-2 代碼根目錄

~~~
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接口
- 框架心得
- 心:總體思路