经过难苦奋战，avalon2终于面世了。这花了大半年时间，其中1.6还胎死腹中。长达半年没有产出，我都担心自己会被裁掉……

avalon2许多API与1.4.×保持一致，当然也添加了一些1.5的功能，此外随着react的红红火火，对它的研究，也集成到此框架中。

我们先来一个简单的例子

 <!DOCTYPE html>

 <html>

     <head>

         <title>TODO supply a title</title>

         <meta charset="UTF-8">

         <meta name="viewport" content="width=device-width, initial-scale=1.0">

         <script src="./dist/avalon.js"></script>

         <script>

             var vm = avalon.define({

                 $id: "test",

                 a: 111

             })

         </script>

         <style>

             .ms-controller{

                 display:none;

             }

         </style>

     </head>

     <body>

         <div ms-controller="test">

             <input ms-duplex="@a" />

             <p>{{@a}}</p>

         </div>

     </body>

 </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，我们只要给它添加一些指令与绑定属性，它就像活着一样，替我们干活了。

总结一下本节课的内容。

  1. MVVM将程序分为两大块，我们需要用avalon.define创建vm，用指令预先指定会变动的部分
  2. ms-controller是圈定vm的作用域。ms-controller其实是可以套嵌的。
  3. ms-duplex是双向指令，通过一些事件监听我们的输入操作，从而同步vm。
  4. {{}}是用于输出数据。

大家可以到这里下载avalon.js，最好为本项目打一下星，支持国内开源项目，然后下回来自己照例子敲一遍。

avalon2学习教程01的更多相关文章

  1. avalon2学习教程06样式操作

    avalon2的ms-css的变革思路与ms-attr一样,将多个操作合并成到一个对象里面处理,因此没有ms-css-name="value",只有ms-css="Obj ...

  2. avalon2学习教程15指令总结

    avalon的指令在上一节已经全部介绍完毕,当然有的语焉不详,如ms-js.本节主要总结我对这方面的思考与探索. MVVM的成功很大一语分是来自于其指令,或叫绑定.让操作视图的功能交由形形式式的指令来 ...

  3. avalon2学习教程14动画使用

    avalon2实际上没有实现完整的动画模块,它只是对现有的CSS3动画或jquery animate再包装一层. 我们先说如何用CSS3为avalon实现动画效果.首先要使用avalon.effect ...

  4. avalon2学习教程13组件使用

    avalon2最引以为豪的东西是,终于有一套强大的类Web Component的组件系统.这个组件系统媲美于React的JSX,并且能更好地控制子组件的传参. avalon自诞生以来,就一直探索如何优 ...

  5. avalon2学习教程12数据验证

    avalon2砍掉了不少功能(如ms-include,ms-data),腾出空间加了其他更有用的功能.数据验证就是其中之一.现在avalon2内置的验证指令是参考之前的oniui验证框架与jquery ...

  6. avalon2学习教程09循环操作

    avalon2的循环指令的用法完全改变了.avalon最早期从knockout那样抄来ms-each,ms-with,分别用于数组循环与对象循环.它们都是针对元素内容进行循环.后来又从angular那 ...

  7. avalon2学习教程08插入移除操作

    本节介绍的ms-if指令与ms-visible很相似,都是让某元素"看不见",不同的是ms-visible是通过CSS实现,ms-if是通过移除插入节点实现. ms-if的用法与1 ...

  8. avalon2学习教程05属性操作

    avalon2与avalon1的属性操作虽然都是使用ms-attr,但用法完全不一样. avalon1是这样操作属性的 其语法为 ms-attr-valueName="vmProp" ...

  9. avalon2学习教程 03数据填充

    数据填充是一个模版最基础的功能,直接从JSON(vm)取出数据,放到适当的位置上.在静态模板中,不区分文本与HTML,只看你的字符串是否有< >来决定生成文本节点与元素节点.但MVVM中, ...

随机推荐

  1. CVE-2017-12149漏洞利用

    CVE-2017-12149 JBOOS AS 6.X 反序列化漏洞利用 这次分析一下 CVE-2017-12149 ,漏洞已经爆出有几天了,今天就把这个漏洞看一下.                  ...

  2. mysql中min和max查询优化

    mysql max() 函数的需扫描where条件过滤后的所有行: 在测试环境中重现: 测试版本:Server version:         5.1.58-log MySQL Community ...

  3. CF533A Berland Miners

    线段树维护贪心 /* */ #include<cstdio> #include<algorithm> #include<cstring> #include<i ...

  4. Python开发之AJAX

    一.概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用:一个简单操作 ...

  5. day6需要记忆（元组字典集合）

    一:基本使用:(元组 tuple)优先掌握的操作1.按索引取值(正向取+反向取):只能取2.切片(顾头不顾尾,步长)3.长度  len()4.成员运算in和not in5.循环需要掌握的操作1.cou ...

  6. [UGUI]图文混排(六)：点击区域

    点击区域可以分成两部分来分析: 0.Rect 搜索api:Rect和Rect.Rect,可以知道: 在GUI和GUILayout中,Rect的原点在左上角,向右为x轴正方向,向下为y轴正方向: 除此之 ...

  7. SFTP 常用命令 —— SecureCRT版本

    SecureCRT按下ALT+P就开启新的会话 进行ftp操作. 输入:help命令,显示该FTP提供所有的命令 pwd: 查询linux主机所在目录(也就是远程主机目录) lpwd: 查询本地目录( ...

  8. 32.纯 CSS 创作六边形按钮特效

    原文地址:https://segmentfault.com/a/1190000015020964 感想:简简单单的动画特效,位置,动画. HTML代码: <nav> <ul> ...

  9. ClassNotFoundException: javax.validation.ValidatorFactory

    spring mvc 程序. 浏览器一访问controller 则出现: ClassNotFoundException: javax.validation.ValidatorFactory ... 很 ...

  10. jar 问题 ： java.io.IOException: invalid header field

    通过本文, 我们明白了什么是 jar的清单文件 MANIFEST.MF, 简单示例: E:\ws\Test\WEB-INF\classes>jar cvfm testCL.jar ListTes ...