[TOC]
* * * * *
## 0 文档说明
2016-4-7 avalon作者发布[avalon2教程](https://segmentfault.com/a/1190000004882326)
为了同步最新版本avalon2。
avalon1.5版本源代码阅读停止更新
开始[avalon2源代码阅读分析](http://www.kancloud.cn/zmwtp/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: '<b>xxx</b>',
ccc: '<p>xxx{{aaa}}yyy</p>'
})//
window.onload = function () {
}
//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层
>[info]aaa,bbb,ccc是**avalon框架的m层**，也可以通过ajax获取服务器值。
>[info] vm就是**avalon框架的vm层**，关联m层与v层的数据。
>[info] <body ms-controoler="test"></body>标签内容是**avalon框架的v层**，可以用来输出m层内容，接受用户操作信息。
## 2 目录导航
[前 章节简介](http://www.kancloud.cn/zmwtp/avalon/121954)
[主 Domready注册](http://www.kancloud.cn/zmwtp/avalon/122155)
[主 文件扫描](http://www.kancloud.cn/zmwtp/avalon/122156)
[主 标签扫描](http://www.kancloud.cn/zmwtp/avalon/122157)
[主 标签属性扫描](http://www.kancloud.cn/zmwtp/avalon/122158)
[主 标签子节点扫描](http://www.kancloud.cn/zmwtp/avalon/122159)
主 标签文本扫描
主 vmodel生成
