迷你MVVM框架 avalonjs 1.3.9发布

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

原文  http://www.cnblogs.com/rubylouvre/p/4180611.html

本次升级,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

此原型项目展示了:

  • 支持cordova、browser应用,即同一套代码可用于桌面浏览器和各类手机应用。
  • 使用avalon MVVM框架
  • 使用cordova 用于移动端
  • 使用requirejs amd模块加载器
  • 使用gulp构建系统
  • 展示了页面切分和逻辑模块划分(html、css、js),及如何根据实际切换模块。适用团队分工合作
  • 页面路由技术,页面转换的有限状态机应用。
  • 支持js、coffee脚本
  • 支持css、less、sass 文件
  • 支持三种应用场景,浏览器,移动app
  • 支持生产环境,即可将js合并压缩成单个js文件,优化css文件,优化html文件
  • 支持DevOps

这是另一个朋友用avalon搭建后台系统的心得, 《使用mvvm框架avalon开发公司内部运营管理系统的一些心得》

此外,avalon已经启用 新官网

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

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

迷你MVVM框架 avalonjs 1.3.9发布

朋友们用avalon做的东西

最近,已经有三个百度部门(百度移动,百度商业,百度推广)在用avalon了,你们也快快加入吧!

来自: http://www.cnblogs.com/rubylouvre/p/4180611.html

扩展阅读

avalonjs 1.4.2 发布,迷你MVVM框架
迷你 MVVM 框架 avalonjs 1.3.6 发布
迷你MVVM框架 avalonjs 1.2 发布
迷你易用的 MVVM 框架,Avalonjs 1.4.6 发布
分享海量 iOS 及 Mac 开源项目和学习资料

为您推荐

jQuery Timelinr-垂直水平jQuery时间轴插件
创意jQuery和CSS3滑动覆盖响应式幻灯片特效
创意jQuery和CSS3滑动覆盖响应式幻灯片特效
HTML代码简写法:Emmet和Haml
渴切发布 Ta.js 触摸幻灯片解决方案

更多

avalonjs
软件编程