转载

迷你MVVM框架 avalonjs 1.3.9发布

本次升级，avalon改进了许多内部方法，大大提升性能，并且带来异步刷新视图的新功能。

ms-html内部不再使用异步
head元素中的avalon元素加入ms-skip指令
重构计算属性，现在超级轻量化
重构CG回收，不会每次都全部检测所有绑定对象
重构内部方法isArrayLike，更好的判定非负整数
重构number过滤器
重构widget的节点回收，去掉onTree方法
重构Collection内部工厂
重构modelFactory, 现在 VM.$event.$digest 开启 异步刷新视图 功能
重构offsetParent
重构ms-repeat，不再触发多余的回调
针对IE下 MutationObserver 会撕碎文本节点BUG，添加 mergeTextNode 内部方法
优化短路与，短路或的处理逻辑
支持CommonJS和AMD和单文件三种方式引用，支持通过bower命令加载avalon
avalon.modern.js遗漏了 parseJSON补上，并且修正parseJSON的逻辑与原生的JSON.parse保持一致
去掉所有与scanCallback相关的定时器

本次升级带来的最大的特性是$digest

在之前的版本，如果我们对VM的某个监控属性连续地改动，每次改动都立即同步到视图，并触发对应的$watch回调。

<!DOCTYPE html> <html>  <head>   <title>TODO supply a title</title>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width">   <script src="avalon.js"></script>   <script>    var vm = avalon.define({     $id: "test",     aaa: 111    })    vm.$watch("aaa", function(v) {     console.log(v)    })    vm.aaa = 1    vm.aaa = 2    vm.aaa = 3   </script>  </head>  <body ms-controller="test">   {{aaa}}  </body> </html>

控制台会依次输出1,2,3

<!DOCTYPE html> <html>  <head>   <title>TODO supply a title</title>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width">   <script src="avalon.js"></script>   <script>    var vm = avalon.define({     $id: "test",     aaa: 111    })    vm.$events.$digest = true    vm.$watch("aaa", function(v) {     console.log(v)    })    vm.aaa = 1    vm.aaa = 2    vm.aaa = 3   </script>  </head>  <body ms-controller="test">   {{aaa}}  </body> </html>

这时只输出一次，这对于一些类似于mousemove的频繁操作非常有利，大大提升性能。

最近一朋友用avalon做的一个使用avalon的模板项目。 https://github.com/pinghe/seedfrontend

此原型项目展示了：