迷你MVVM框架 avalonjs 0.9发布-优快云博客

Avalon框架最新版本引入ms-with绑定，优化遍历对象体验，并解决旧版IE下的UI渲染问题，新增CSS3动画结束事件支持。

本版本最大的改进是引进了ms-with绑定，现在可轻松遍历对象了。

改进列表如下：

重新使用082的scanNodes方法，因为有关旧式IE下UI渲染锁死的问题已经解决了。
优化each绑定与Collection
添加CSS3 animationend事件支持
添加ms-with绑定
fix IE9-10获取option元素的value的BUG
改良 AMD加载器与jQuery这些在内部使用了全局define方法的库的兼容问题
抽象setNumber方法来处理splice,slice这两个数组方法的参数
分割Configue, AMDLoad, DomReady等模块，让框架的可读性更强

ms-with语法为 ms-with="obj" 子元素里面用$key, $val分别引用键名，键值

例子：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type='text/javascript' src="avalon.js"></script>
        <script>
            
            var a = avalon.define("xxx", function(vm) {
                vm.obj = {
                    aaa: "xxx",
                    bbb: "yyy",
                    ccc: "zzz"
                }
                vm.first = "司徒正美"
            })
            setTimeout(function() {
                a.obj.aaa = "7777777777"
                a.first = "清风火忌"
            }, 1000)
            setTimeout(function() {
                a.obj.bbb = "8888888"
            }, 3000)
        </script>
    </head>
    <body ms-controller="xxx">
        <div ms-with="obj">
            <div>{{$key}} {{$val}}</div>
        </div>
        <hr/>
        <div ms-with="obj">
            <div>{{$key}} {{$val}}</div>
        </div>
        <hr/>
        <div ms-with="obj">
            <div>{{$key}} {{$val}}</div>
        </div>
    </body>
</html>

它在chrome的截图：

o_QQ%E5%9B%BE%E7%89%8720130720094211.jpg

它在IE10的截图：

o_QQ%E5%9B%BE%E7%89%8720130720094028.jpg

它在IE6下完美运行的截图：

o_QQ%E5%9B%BE%E7%89%8720130720090305.jpg

CSS3 animationend事件的例子：

<!DOCTYPE html> <html> <head> <title>by 司徒正美</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://rubylouvre.github.io/mvvm/javascripts/avalon.js"></script> <link rel="stylesheet" type="text/css" href="http://rubylouvre.github.io/mvvm/stylesheets/animations.css" /> <style> .panels div:nth-child(1){ background:green; } .panels div:nth-child(2){ background:blue; } .panels div:nth-child(3){ background:violet; } .panels div:nth-child(4){ background:red; } .parent{ width:800px; height:400px; overflow: hidden; position: relative; } .pt-perspective { position: relative; width: 90%; height: 90%; -webkit-perspective: 1200px; -moz-perspective: 1200px; perspective: 1200px; } .pt-page { width: 100%; height: 100%; position: absolute; top: 0; left: 0; visibility: hidden; overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .pt-page-current { visibility: visible; z-index: 1; } .pt-page-ontop { z-index: 999; } </style> <script> avalon.ready(function() { var outClass, inClass, pages, lock = 0, lastIndex = 0//这个是动画的持续时间 avalon.define("apphopeui", function(vm) { vm.panels = [0, 1, 2, 3] vm.currentPageIndex = 0; vm.changePanelIndex = function() { if (!lock) { lock = 1 var index = this.$vmodel.$index; if(lastIndex !== index){ lastIndex = index vm.currentPageIndex = index; }else{ lock = 0 } } } vm.removeClass = function() { lock++ var className = this.animClass; if (className === outClass) { this.classList.remove("pt-page-current") } var el = this className.replace(/[\w-]+/g, function(c) { el.classList.remove(c) }) if(lock == 3){ lock = 0; } } vm.$watch("currentPageIndex", function(next, curr) { if (next > curr) { outClass = 'pt-page-moveToLeftFade'; inClass = 'pt-page-rotateUnfoldRight'; } else { outClass = 'pt-page-moveToRightFade'; inClass = 'pt-page-rotateUnfoldLeft'; } var currPage = pages[curr] var nextPage = pages[next] currPage.animClass = outClass; outClass.replace(/[\w-]+/g, function(c) { currPage.classList.add(c) }) currPage.classList.add("pt-page-current") nextPage.animClass = inClass inClass.replace(/[\w-]+/g, function(c) { nextPage.classList.add(c) }) nextPage.classList.add("pt-page-current") }) }) avalon.scan() avalon.nextTick(function() {//因为页面只有一个切换板做模板，只有扫描后才动态生成四个 pages = document.querySelectorAll(".panels>div") }) }) </script> </head> <body ms-controller="apphopeui"> <div class="tabs" ms-each-elem="panels"> <button type="button" ms-click="changePanelIndex">按钮{{$index}}</button> </div> <br/> <div class="parent"> <div class="panels pt-perspective" ms-each-el="panels"> <div class="pt-page" ms-class-pt-page-current="0 == $index" ms-animationend="removeClass" > 面板{{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} 司徒正美 {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} {{$index}} </div> </div> </div> </body> </html>

运行代码

迷你MVVM框架在github的仓库https://github.com/RubyLouvre/avalon

官网地址http://rubylouvre.github.io/mvvm/

入门教程http://www.cnblogs.com/rubylouvre/p/3181291.html