迷你MVVM框架 avalonjs 0.9發佈

時間 2019-11-14

標籤迷你 mvvm 框架 avalonjs 0.9 發佈简体版

原文原文鏈接

本版本最大的改進是引進了ms-with綁定，如今可輕鬆遍歷對象了。javascript

改進列表以下：css

從新使用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分別引用鍵名，鍵值html

例子：java

<!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的截圖：git

它在IE10的截圖：github

它在IE6下完美運行的截圖：web

CSS3 animationend事件的例子：chrome

<!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/avalonruby

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

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