经过难苦奋战，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. css定位(后盾网)

    1.绝对定位:脱离了文档流,如果设置了left和top,位置相对浏览器来定位,如果不设值top和left,还是按照原来的文档流的位置站位,位置移走后,原来的空间位被其他元素占据 ***应用:一般来说我 ...

  2. gulp_css2js

    var gulp = require('gulp'); var rename = require('gulp-rename'); var concat = require('gulp-concat') ...

  3. geoserver sld显示中文标签 style配置

    样式1: <?xml version="1.0" encoding="GB2312"?><sld:StyledLayerDescriptor ...

  4. Servlet --简单用户留言系统

    1.创建用户表和留言表 2.编写数据库连接工具类 public class SqlserverDBConn { private Statement stmt; private Connection c ...

  5. PS添加透明立体水印

    PS: CS2 本文我们介绍用Photoshop为图片添加透明立体水印的方法和技巧. 原图: Duplicate Layer,并输入文字: 设置Layer->Layer Style->Be ...

  6. RSA加密解密，String转PublicKey、PrivateKey；附Base64.JAR

    网络请求的数据需要加密,服务器给的他们那一套在Android一直报错,自己写了一个: package com.cc.common.util; import javax.crypto.Cipher; i ...

  7. 【CF1132F】Clear the String (DP)

    /* 区间dp题目, 考虑当前区间l,r 是可以枚举最后一次拿的分界点来考虑最右边节点是不是具有贡献 */ #include<cstdio> #include<algorithm&g ...

  8. 常见sql注入的防范总结

    在平时的开发过程中,我们可能很少会刻意的去为项目做一个sql注入的防范,这是因为你可能因为使用了某些框架,而无意间已经有了对应sql注入的一些防范操作(比如mybatis使用#{XX}传参,属于预编译 ...

  9. idea error：Command line is too long

    今天在正在本地运行的项目中写了一个无关项目的测试类,执行main函数时报错如下: 解决方案: 找到项目根目录下的.idea/workspace.xml,添加内容: <component name ...

  10. bootstrap-datepicker实现日期input readonly 标签中选择时间功能

    引用datepicker css,js,zh-CH文件 ps: 都是基于bootstrap,所以得先引入bootstrap文件才可以使用 <link href="https://cdn ...