avalon2学习教程01

经过难苦奋战,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的一些模板引擎(如Razor)相冲突,但据我所知,这些在.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,最好为本项目打一下星,支持国内开源项目,然后下回来自己照例子敲一遍。

你可能感兴趣的文章

15 条评论
WilsonLiu95 · 2016年04月07日

司徒大神也来传经布道了 (^__^) 嘻嘻……

回复

唐朝的唐 · 2016年04月13日

正在学avalon1.5,2就已经来了,请问改动大吗,我这儿的文章,公司用1.5有没有影响text-align: justify

回复

chisbug · 2016年04月14日

先评为敬。

回复

allen9046 · 2016年04月15日

司大是否考虑增加一个功能在定义vm的时候可以替换默认的@符号,本人使用net mvc razor 的情况下@符号是冲突的,

回复

sunkinux · 2016年04月27日

你只要项目里的av1.5 不升级到2.0就没影响啊

回复

隨風飄遠 · 2016年05月09日

我来看看avalon2……不知道有哪些新变化!

回复

lostlover · 2016年05月12日

1.5 已经用在项目中上线了 持续关注2.0

回复

扬帆 · 2016年08月02日

之前用过avalon1.5,现在想用2.0,突然发现变量前面必须加上@符号,由于asp.net mvc的razor中@符号是代码块的起始符,造成程序无法正常编译,请楼主能够修正一下或者用其他符号代码。

回复

司徒正美 作者 · 2016年08月03日

官网上有解决方法 http://avalonjs.coding.me/

回复

jifeng118 · 2016年09月01日

之前一直用1.4.5,也看过1.5,现在都已经2.1.5啦,请问之前项目引用vm属性都是不带@的,想要换成2.0的,是不是不能换了啊

回复

lincs · 2016年09月09日

请问这段代码有什么作用吗?我去掉也没有什么影响啊

<style>
    .ms-controller{
        display:none;
    }
</style>

回复

webdevelop · 2016年09月18日

遮羞布,作用类似于angular的ng-cloak作用

回复

Quiet · 2016年11月29日

哈哈哈

回复

风过留笑 · 2016年11月30日
不错不错,值得一学。

回复

瑜我佳音 · 12 小时前

大神,可以建个QQ群么?

回复

载入中...
司徒正美 司徒正美

2k 声望

发布于专栏

javascript魔法师

涉及我的学习心得与经验

184 人关注

系列文章