迷你MVVM框架 avalonjs 1.3.9发布

时间 2019-11-13

标签迷你 mvvm 框架 avalonjs 1.3.9 发布繁體版

原文原文链接

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

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相关的定时器

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

在以前的版本，若是咱们对VM的某个监控属性连续地改动，每次改动都当即同步到视图，并触发对应的$watch回调。html

<!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,3jquery

<!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的频繁操做很是有利，大大提高性能。git

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

此原型项目展现了：web

支持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开发公司内部运营管理系统的一些心得》chrome

此外，avalon已经启用新官网。gulp

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

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

朋友们用avalon作的东西

最近，已经有三个百度部门（百度移动，百度商业，百度推广）在用avalon了，大家也快快加入吧！