🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[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版本**。 对应**兼容版本**在框架驱动的兼容处理**另做说明**