首页 > 代码库 > 迷你MVVM框架 avalonjs 1.3.3发布

迷你MVVM框架 avalonjs 1.3.3发布

这应该是1.3X系列最后一个版本了,大家可以在仓库中看到,多出了一个叫avalon.observe的东西,它是基于Object.observe,dataset, Promise等新API实现。其中,它也使用全新的静态收集依赖的机制,这个机制也完成得差不多,因此avalon与avalon.mobile下一版将会应用这最新成果,进行大改。

  • 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大概如下:

            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()            })

现在还可以这样定义:

            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/avalon

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

avalon的新UI库地址OniUI, 多达34个UI,强大的换肤功能


朋友们用avalon做的东西

  • 移动应用:读酷
  • chrome插件:饭否客户端
  • 为知笔记
  • 金山WPS office 会员中心
  • 桑夏资产官网
  • 企业级应用:超博CRM客户关系管理系统(帐号:crm_ceo 密码:nncb_ceo)
  • uliweb Python框架与avalon的组合示例
  • avalon+jQuery实现域名注册查询
  • 路由器示例
  • 边锋活动页
  • 记者考试题
  • 基于avalonJS实现的2048游戏