[TOC]
* * * * *
## 0 文檔說明
2016-4-7 avalon作者發布[avalon2教程](https://segmentfault.com/a/1190000004882326)
為了同步最新版本avalon2。
avalon1.5版本源代碼閱讀停止更新
開始[avalon2源代碼閱讀分析](http://www.hmoore.net/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.hmoore.net/zmwtp/avalon/121954)
[主 Domready注冊](http://www.hmoore.net/zmwtp/avalon/122155)
[主 文件掃描](http://www.hmoore.net/zmwtp/avalon/122156)
[主 標簽掃描](http://www.hmoore.net/zmwtp/avalon/122157)
[主 標簽屬性掃描](http://www.hmoore.net/zmwtp/avalon/122158)
[主 標簽子節點掃描](http://www.hmoore.net/zmwtp/avalon/122159)
主 標簽文本掃描
主 vmodel生成
