MVVM框架avalonJS入门开发教程

HTML5 herman 1359浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

现在的程序都离不开框架,而且程序员面试时首先被问到的就是你了解哪些框架,学习过哪些源码?各种框架犹如雨后春笋般的涌现出来,大的小的,前端的后端的,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>

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

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » MVVM框架avalonJS入门开发教程