Avalon1.5源代码阅读学习.pdf

目 录 概述 框架流程 前 ：章节简介 主 ：(domready.js)事件注册 主 ：(scan.js)文件扫描 主 ：(scanTag.js)标签扫描 主 ：(scanAttr.js)标签属性扫描 主 ：(scanNode.js)标签节点扫描 主 ：(scanText.js)标签文本扫描 主 ：(Bindings)核心绑定处理 主 ：(modelFactory.js)生成vmodel 附 ：(variable.js)全局变量 框架工具 另 ：avalon全局函数 另 ：avalon内置加载器 基础原理 浏览器执行流程 DOM接口 使用范例 框架总结 本文档使用 看云 构建 - 2 - 概述 概述 0 文档说明 1 mvvm含义 2 目录导航 0 文档说明 2016-4-7 avalon作者发布avalon2教程 为了同步最新版本avalon2。 avalon1.5版本源代码阅读停止更新 开始avalon2源代码阅读分析 1 mvvm含义 mvvm作为前端目前最为流行的框架设计模式 ， 解耦了mvc框架开发中前后端配合问题。 对比mvc与mvvm ，mvvm将c层换成了vm层。 mvc层中 m层对应数据库对象model mvc层中 v层对应视图模板对象view mvc层中 c层对应控制器对象Controller mvvm中的m层是服务器后端数据封装层。通常是ajax获取m层数据 ，传递到vm层的vmodel中。 mvvm中的vm可以看做c层 ，avalon中使用avalon.define()定义vmodel对象 ，用来沟通m层与v层。 mvvm中的v层是html代码中 ，avalon可以扫描标签内容。 如下代码 !DOCTYPE html html head meta charset UTF-8 script src avalon.js/script script var vm avalon.define({ $id: test, aaa: 司徒正美 , bbb: bxxx/b, ccc: pxxx{{aaa}}yyy/p })// window .onload function () { 本文档使用 看云 构建 - 3 - 概述 } //safari, chrome 的innerHTML, outerHTML都会转义 /script /head body ms-controller test div ms-text aaa没有东西/div div ms-text bbb没有东西/div div ms-text ccc没有东西/div /body /html avalon使用ms-important,ms-controller标签属性标记可扫描内容 avalon.define()的$id与ms-important/ms-controller属性值关联v层与vm层 aaa,bbb,ccc是avalon框架的m层 ，也可以通过ajax获取服务器值。 vm就是avalon框架的vm层 ，关联m层与v层的数据。 标签内容是**avalon框架的v层** ，可以用来输出m层内容 ，接受用户操作信息。 2 目录导航 前 章节简介 主 Domread