迷你MVVM框架 avalonjs 1.3.3發佈

時間 2019-11-13

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

原文原文鏈接

你們能夠在倉庫中看到，多出了一個叫avalon.observe的東西，它是基於Object.observe，dataset, Promise等新API實現。其中，它也使用全新的靜態收集依賴的機制，這個機制也完成得差很少，所以avalon與avalon.mobile下一版將會應用這最新成果，進行大改。javascript

fix IE6-8下直接修改表單元素值不觸發data-duplex-changed回調的BUG, 詳見這裏
chrome瀏覽器對文本域進行Ctrl+V操做，會觸發DOMNodeRemoved事件,這會引起widget組件的VM自動調用$remove方法詳見這裏
fix ms-include 從textarea元素取得模板出錯的BUG
對SVG元素取className出錯的BUG, 如今addClass, removeClass, hasClass都是經過classList處理，若是瀏覽器支持classList，框架會經過ClassList內部方法爲它進行兼容。
重構avalon.slice, avalon.isPlainObject, Object.keys，讓它們在IE6-8下與其餘瀏覽器表現得更加一致
重構avalon.parseExprProxy
ms-disabled, ms-enabled, ms-checked, ms-selected, ms-readonly這些綁定如今的實現都改成走ms-attr的通道。
修復IE下的cloneNode BUG，讓其完美支持VML元素的複製。其一, 其二
修復getVariables BUG，讓其能從緩存直接取已經計算好的數據。
升級avalon.define, 讓其支持新的傳參方式

着重說一下最後一個新特性。原來定義一個VM大概以下：php

            var model = avalon.define("test", function(vm) {
                vm.firstName = "司徒"
                vm.lastName = "正美"
                vm.fullName = {//一個包含set或get的對象會被當成PropertyDescriptor，
                    set: function(val) {//裏面必須用this指向scope，不能使用scope
                        var array = (val || "").split(" ");
                        this.firstName = array[0] || "";
                        this.lastName = array[1] || "";
                    },
                    get: function() {
                        return this.firstName + " " + this.lastName;
                    }
                }
                vm.click = function() {
                    alert(vm.firstName)
                }
                vm.$watch("firstName", function() {
                    alert(vm.firstName)
                })
                vm.arr = ["aaa", 'bbb', "ccc", "ddd"]
                vm.selected = ["bbb", "ccc"]
                vm.checkAllbool = vm.arr.length === vm.selected.length
                vm.checkAll = function() {
                    if (this.checked) {
                        vm.selected = vm.arr
                    } else {
                        vm.selected.clear()
                    }
                }
            })
            model.selected.$watch("length", function(n) {
                model.checkAllbool = n === model.arr.size()
            })

如今還能夠這樣定義：java

            var model = avalon.define({
                $id: "test",
                firstName: "司徒",
                lastName: "正美",
                fullName: {//一個包含set或get的對象會被當成PropertyDescriptor，
                    set: function(val) {//裏面必須用this指向scope，不能使用scope
                        var array = (val || "").split(" ");
                        this.firstName = array[0] || "";
                        this.lastName = array[1] || "";
                    },
                    get: function() {
                        return this.firstName + " " + this.lastName;
                    },
                },
                click: function() {
                    alert(model.firstName)
                },
                arr: ["aaa", 'bbb', "ccc", "ddd"],
                selected: ["bbb", "ccc"],
                checkAllbool: true,
                checkAll: function() {
                    if (this.checked) {
                        model.selected = model.arr
                    } else {
                        model.selected.clear()
                    }
                }
            })
            model.checkAllbool = model.arr.length === model.selected.length
            model.$watch("firstName", function() {
                alert(model.firstName)
            })
            model.selected.$watch("length", function(n) {
                model.checkAllbool = n === model.arr.size()
            })

迷你MVVM框架在github的倉庫https://github.com/RubyLouvre/avalongit

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

avalon的新UI庫地址OniUI，多達34個UI，強大的換膚功能web