Ruby's Louvre

每天学习一点点算法

导航

统计

avalon v0.4发布,迷你简单易用的MVVM框架

avalon已经从mass Framework抽取出来,没有任何依赖。

主要优点如下

  • 使用简单,在HTML中添加绑定,在JS中用avalon.define定义ViewModel,再调用avalon.scan方法,它就能动了!
  • 兼容到IE6
  • 没有任何依赖,只有77K,压缩后22K
  • 支持管道符风格的过滤函数,方便格式化输出
  • 局部刷新的颗粒度已细化到一个文本节点,特性节点
  • 要操作的节点,在第一次扫描就与视图刷新函数相绑定,并缓存起来,因此没有选择器出场的余地。
  • 让DOM操作的代码近乎绝迹
  • 使用类似CSS的重叠覆盖机制,让各个ViewModel分区交替地渲染页面
  • 节点移除时,智能卸载对应的视图刷新函数,节约内存
  • 动用一切可使用的访问器,及时定向地通知双向绑定链的上层(复合型的Computed属性,监控数组,根据绑定值编译而成的求值函数,视图刷新函数)。

与其他框架比较

  • 它体积更少,在主要的几个MVVM框架(拥有双向绑定机制),knockout是三千多行,angularjs 1.6万, emberjs2-3万行, winjs是几M, kendoui是几M!
  • 兼容情况,kendoui与 knockoutjs IE6, angularjs IE7, emberjs IE8, winJS IE9
  • 让用户写代码更少(可见我给出的todos)
  • 上手难度,与knockout差不多,但借鉴了angularjs的{{}},更为易用。
  • 与knockoutjs, angular, winjs一样是使用动态模板,至少保持第一屏数据是真实的,对SEO友好。
  • 源码也是它们中最易读的。简单的代码也意味着扩展调试等容易。

下面用avalon实现一个tabs

   <div ms-controller="tabs" >
        <div ms-each-tab="tabs" class="triggers">
            <a href="###" class="trigger" ms-class-selected="activated === $index" ms-click="activate($index)">{{tab.title}}</a>
        </div>
        <div ms-each-tab="tabs" >
            <div  class="panel" ms-visible="activated === $index">{{tab.panel}}</div>
        </div >
    </div >
            avalon.ready(function() {
                avalon.define("tabs", function(a) {
                    a.tabs = [
                        {
                            title: "aaaa",
                            panel: "aaaa panel"
                        },
                        {
                            title: "bbbb",
                            panel: "ffffffffffffffffffff"
                        },
                        {
                            title: "cccc",
                            panel: "cccc panel"
                        }
                    ]
                    a.activated = 0
                    a.activate = function(i){
                         a.activated = i
                    }
                })
                avalon.scan();
            })
{{tab.panel}}

更多例子与介绍可参看这里

posted on 2013-04-25 14:08  司徒正美  阅读(...)  评论(...编辑  收藏