MVVM框架avalonJS入门开发教程

现在的程序都离不开框架,而且程序员面试时首先被问到的就是你了解哪些框架,学习过哪些源码?各种框架犹如雨后春笋般的涌现出来,大的小的,前端的后端的,MVC的,MVP的,MVVM的,太多太多了,以至于很多网友在论坛里提问我读无法回答。深感歉意!

随着前端MVVM的流行,小型框架现在越来越难存活了!一个框架的好坏很多时候都是取决于她的社区,她背后的站台公司。像react, angular等这样拥有大公司背景的框架占了半壁江山,而avalon以其良好兼容性在国内份额不断上升。最后剩下的框架只有两种:有后台的和没后台的。

avalonJS是司徒正美开发和维护的前端mvvm框架,最早发布于2012.09.15,它可以轻松实现数据的隔离和双向绑定,相比angularJS等前端框架它有如下优势:
1.压缩后仅有60多kb,而angular的min版是2MB左右(无视其gzip版);
2.兼容IE6+,符合天朝市场需求;
3.效率更高,跑起来比angular和knockout都要更快,在移动端上该优势会更大(avalon有移动端专版的avalon.modern.js)。关于其性能更详细的介绍可以看 这里 ;
4.涵盖了angular的大部分功能,且实现方式更为便捷、上手更容易;
5.有配套的UI库(当然这个按需选择即可),由司徒正美及其“去哪儿”团队维护,有相关的中文文档(下方会提到),除了在github提交issue,你也可以加入正美的Q群79641290 来交流问题或提交bug。

现在的avalon是我在完全消化了knockout发展起来的,通过Object.defineProperties与VBScript实现了与普通对象看起来没什么两样的VM,VM里面充满了访问器属性,而访问器属性肯定对应一个setter,一个getter, 我们就在setter, getter中走knockout的老路,实现自动收集依赖,然后放进一个简单的观察者模式中,从而实现双向绑定。将绑定属性分解为求值函数与视图刷新函数,早前,avalon也与knockout一样使用一个简单的parser,然后通过with实现, 0.82一个新的parser 上马,同样的迷你,但生成的求值函数,更方便依赖收集,并且没有with语句,性能更佳。angular也不是一无是处,我也从它那里抄来了{{}}插值表达式,过滤器机制,控制器绑定什么的。

官方入门demo:

<!DOCTYPE html>
<html>
<head>
    <title>first example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="avalon.js"></script>
    <script>
        // :www.xttblog.com
        var vm = avalon.define({
            $id: "test",
            name: "司徒正美"
        });
    </script>
</head>
<body ms-controller="test">
    <input ms-duplex="name">
    <p>Hello,{{name}}!</p>
</body>
</html>

avalon的控制域属性名叫做“ms-controller”,你可以把它当作一个监听器,把它绑定到一个容器后,avalon就能扫描和监听这个容器内的所有 (绑定了avalon方法或带有插值表达式的) 元素了。demo中给body加上这个监听器,并在里面写一个 avalon插值表达式{{ XXX }} 。

在avalon中,我们用 avalon.define({ …}) 的形式来定义一个Model实例(其参数可以看做一个avalon数据对象),其中的$id是内置属性,对应所要扫描和监控的控制域名。内部定义了一个属性"name",故在对应的控制域(如这段代码对应的域是绑定ms-controller="test"的body标签)里,我们使用avalon插值表达式{{name}}的话,可以自动绑定其值“司徒正美”。还有一个需要注意的是<input ms-duplex="name"/> ,其中的ms-duplex是avalon的双工绑定属性,它除了负责将VM中对应的值(如本例是a)放到表单元素的value中,还对元素偷偷绑定一些事件,用于监听用户的输入从而自动刷新VM。
avalonJS

avalon在内部使用了许多巧妙的设计,因此能涵盖angular绝对大多数功能,但体积却非常少。此外,在性能上,现在除了chrome外,它都比knockout快,angular则是最慢的。 在移动端上,avalon这个优势会被大大放大化的。比如我们要实现下面的功能,使用avalonJS只需要几行代码就可以搞定。
avalonJS

<body>
<script type="text/javascript">
    var gg=[{"id":"1","title":"公告文章标题1"},{"id":"2","title":"公告文章标题2"},{"id":"3","title":"公告文章标题3"},{"id":"4","title":"公告文章标题4"}];
    var bd=[{"id":"1","title":"媒体报道文章标题1"},{"id":"2","title":"媒体报道文章标题2"},{"id":"3","title":"媒体报道文章标题3"},{"id":"4","title":"媒体报道文章标题4"}];
</script>
<div ms-controller="list">
    <span ms-mouseover="changeUl(1)">公告</span>
    <span ms-mouseover="changeUl(0)">媒体报道</span>
    <a ms-href="'#!/'+ more_name">{{more_text}}</a>
    <ul>
        <li ms-repeat="infoList">
            <a ms-href="'#!/'+ more_name + '/' + el.id" ms-title="el.title">{{el.title}}</a>
        </li>
    </ul>
</div>
<script type="text/javascript">
    var vm = avalon.define({
        $id: "list",
        more_name: "gg",
        more_text: "更多公告",
        gg:gg,
        bd:bd,
        infoList:gg,
        changeUl:function(flag){
            if(flag){  //鼠标移过“公告”选项卡头部
                vm.more_name = "gg";
                vm.more_text = "更多公告";
                vm.infoList = vm.gg;
            }else{  //鼠标移过“媒体报道”选项卡头部
                vm.more_name = "bd";
                vm.more_text = "更多报道";
                vm.infoList = vm.bd;
            }
        }
    });
    avalon.scan();
</script>
</body>

版权声明:本文为博主原创文章,未经博主允许不得转载。

MVVM框架avalonJS入门开发教程

: » MVVM框架avalonJS入门开发教程

原创文章,作者:745907710,如若转载,请注明出处:https://blog.ytso.com/251155.html

(0)
上一篇 2022年5月2日
下一篇 2022年5月2日

相关推荐

发表回复

登录后才能评论