前端实用框架avalonJS入门

2017-06-21 15:07:05 0

简介： avalonjs 是国内大神司徒正美开发的一个迷你MVVM框架,可以轻松实现数据的隔离和双向绑定。

接触到avalonjs有半年多，并总结了几个使用了avalon的项目来说，avalon有如下几点优点： 1.使用简单，只需通过指令就能将数据绑定到视图上并实现相关操作； 2.实现双向绑定，操作model或者操作view都会同步到view和model； 2.兼容到IE6，其他MVVM框架，KnockoutJS(IE6), AngularJS(IE9), EmberJS(IE8), WinJS(IE9) ； 3.大量减少DOM操作，这对于有大量的dom选择和操作的项目绝对是很爽的； 4.实现数据和视图的隔离，可维护性好。

如今 avalonjs已经更新到了2.2版本，从2.0开始，avalon会跟之前的版本有了很大的不同，我们还是从新版讲起：

开始第一步：只需将avalon.js引入页面中，接着为视图(html)指定一个控制域，并绑定一个容器（avalon称之为vm），这样avalon就能够扫描并监听控制域的内容。第二步：使用avalon.define({})定义一个VM实例，$id对应控制域名，告诉avalon这个实例属于哪个控制域。第三步，将VM中的数据(实例中的a、b等，需要自己定义)绑定到视图中，可以使用{{@***}}或者指令，个人比较喜欢用指令，低版本的avalon使用{{}}会导致某种bug。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>=-=</title>
    <script type="text/javascript" src="avalon.js"></script>
</head>
<body>
    <div ms-controller="frist">
        <p>{{@a}}</p>
        <span ms-text="@b"></span>
    </div>
    <script type="text/javascript">
        var vm = avalon.define({//定义一个vm,
            $id : 'frist',//命名跟ms-controller一致
            a : 'hello world !',
            b : '不一样的世界，一样的精彩'
        })

    </script>
</body>
</html>

这样，代码运行之后会将vm的数据值同步到视图上，如下：

指令和数据同步 avalon拥有很多个指令，可以对DOM进行一些事件操作，或者样式修改，也可以用ms-duplex将元素跟数据绑定在一起，它就可以实现数据与视图的同步，就是说如果有其中一个的值改变另一个值也将改变:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>=-=</title>
    <script type="text/javascript" src="avalon.js"></script>
</head>
<body>
    <div ms-controller="frist">
        {{@a}}<input type="text" ms-duplex="@a" ms-on-blur="@b">
        <!-- 将a绑定到input上，并指定其焦点事件为b -->
    </div>
    <script type="text/javascript">
    var vm = avalon.define({//定义一个vm,
        $id : 'frist',//命名跟ms-controller一致
        a : 'hello world !',
        b : function(){
            vm.a = "这是一个焦点事件";
        }
    })
    </script>
</body>
</html>

其实现结果：作者定义的指令也不算多，只是基本满足了一些常见的事件，所以作者支持与jquery混用，而且avalon跟其他jquery插件也不会起冲突，能够让我们在日常开发过程中加入其他插件，这个我觉得也是非常不错的。 过滤器 avalon本身为我们准备了很多的过滤器，例如date、number等文本过滤器、循环过滤器；avalon也提供了方法让我们根据所需定义自己的过滤器，例如我们定义一个mytest的个性化过滤器，并加在元素上，同样我们也可以使用avalon本身定义的过滤器：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>=-=</title>
    <script type="text/javascript" src="avalon.js"></script>
</head>
<body>
    <div ms-controller="frist">
        a ：{{a | mytest}}
        <br/>
        b ：{{b | date('yyyy-MM-dd HH:mm:ss')}}
        <!-- 使用过滤器date,并传入时间格式 -->
    </div>
    <script type="text/javascript">
    avalon.filters.mytest = function(){
        return "这是我们自定义的过滤器";
    };
    var vm = avalon.define({//定义一个vm,
        $id : 'frist',//命名跟ms-controller一致
        a : 'hello world !',
        b : 1482878745000 //将时间戳赋值给b
    })
    </script>
</body>
</html>

执行之后：这一篇就先介绍这么多，有机会再继续。

上一篇：无

下一篇： CSS之预处理器