经过难苦奋战，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. sqlserver in 和 exist 子查询

    1 in 子查询 use StudentManageDB go --select StudentName from Students --where StudentId=(select Student ...

  2. es5中类与继承

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. springmvc前端控制器的三种拦截方式

    *.do :只拦截.do文件 / :拦截除jsp页面的所有请求,包括restful类型的url /*  :拦截所有请求包括jsp页面

  4. ​游戏设计思考：对COK的理解和思考

    转自:http://www.gameres.com/804983.html 一.前言 发此文的起因是最近加入了一个游戏研究群,受到大家对游戏研究热情的感染,也想将自己对游戏的理解和感悟发出来和大家一起 ...

  5. python中str相关函数

    capitalize 将字符串的首字母大写 title 每个单词的首字母大写 (不是字母隔开的单词首字母都大写) upper 所有字母大写 lower 所有字母小写 swapcase 大写变小写 co ...

  6. 常见的web安全及防护原理

    1.0 sql注入 sql注入原理:就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令. sql注入防护: 1.永远不要信任用户的输入,要 ...

  7. JavaWeb中四大域对象的作用范围

    JavaWeb的四大作用域为:PageContext,ServletRequest,HttpSession,ServletContext: PageContext域:作用范围是整个JSP页面,是四大作 ...

  8. Javascript的闭包及其使用技巧实例

    Javascript的闭包及其使用技巧实例 一.闭包的基本概念 闭包(Closure)是一个引用了自由变量的函数,记录了该函数在定义时的scope chain.又称词法闭包(Lexical Closu ...

  9. js保留两位小数点

    var temp = 2.222222222; temp.toFixed(2); //得出结果2.22

  10. Java 递归详解

    递归详解: 1.递归一句话通俗讲就是一个方法自动重复调用自己的过程. 2.因为是重复调用自己了,所以看起来像一个循环,所以为了避免内存溢出系统崩溃,我们需要在方法里加一个返回值判断,用于递归循环的跳出 ...