avalon2学习教程01
经过难苦奋战，avalon2终于面世了。这花了大半年时间，其中1.6还胎死腹中。长达半年没有产出，我都担心自己会被裁掉……
avalon2许多API与1.4.×保持一致，当然也添加了一些1.5的功能，此外随着react的红红火火，对它的研究，也集成到此框架中。
我们先来一个简单的例子
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>TODO supply a title</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <script src="./dist/avalon.js"></script> 8 <script> 9 var vm = avalon.define({ 10 $id: "test", 11 a: 111 12 }) 13 </script> 14 <style> 15 .ms-controller{ 16 display:none; 17 } 18 </style> 19 </head> 20 <body> 21 <div ms-controller="test"> 22 <input ms-duplex="@a" /> 23 <p>{{@a}}</p> 24 </div> 25 </body> 26 </html>
如果大家学过avalon1.*就好办，没学也没关系。作为时下兼容性最好的MVVM框架，avalon绝对是值得你进行智力投智的。
avalon.define要求入传一个带$id属性的对象，它会返回一个vm的特殊对象，以后我们对它进行赋值就会自动同步页面。这比jQuery每次都取CSS选择器来找元素进行操作方便多。
这也就是为什么MVVM框架一下子铺天盖地的火起来的原因。
这是JS部分，在页面部分，或者叫HTML部分，我们需要一些特殊标记来圈定这个vm的作用范围，这就是ms-controller的出场。$id也是在这里用到的。
在这作用范围内，我们还有另外两个指令，一个是ms-duplex指令，相当于ng-model(如果大家学过angular的话)，另一个是插值表达式{{}}，这是位于元素内部的innerText中的。ms-duplex是双向指令，它既能将vm中对应的属性显示在页面上，为了标识这是vm上的属性， 我们要求用@符号带头。这可能与.NET的一些模板引擎相冲突，但据我所知，这些在.NET 中都是可以配置的。{{}}是纯粹的文本指令，它与ms-text很像，但更方便，用于单向将数据拍到页面上。
当我们改动文本域的内容时，ms-duplex会通过一些事件将元素的value值取出来同步到vm上。vm再比较 下它的这个属性值与之前是否一样，不一样就再次同步到视图。这期间涉及到虚拟DOM 复杂处理，但虚拟DOM远远比真实DOM轻量，因此有了这缓存层，我们的性能就大大提高。并且更新是最小化刷新的，不会将ms-controller圈定的所有元素都替换掉（如backbone自带的模板引擎）。它只是将{{}}那个区域的文本节点的nodeValue改一下（因为input.value是一样的，这次刷新只改一个地方）。
我们也可以看到ms-duplex其实也做了光标处理。当然ms-duplex的威力远远不止这些，以后我们再分说。
总而言之，MVVM其实将我们的程序划分两部分，让专业的语言做它们的擅长的事。JS用于处理业务逻辑，但类啊，模块啊，太复杂，那只给你一个类似普通对象的vm你们操作就好了。在视图部分，如何显示，如何变动，如何交互，就交给HTML，我们只要给它添加一些指令与绑定属性，它就像活着一样，替我们干活了。
总结一下本节课的内容。
- MVVM将程序分为两大块，我们需要用avalon.define创建vm，用指令预先指定会变动的部分
- ms-controller是圈定vm的作用域。ms-controller其实是可以套嵌的。
- ms-duplex是双向指令，通过一些事件监听我们的输入操作，从而同步vm。
- {{}}是用于输出数据。
大家可以到这里下载avalon.js，最好为本项目打一下星，支持国内开源项目，然后下回来自己照例子敲一遍。
