Avalon2之VM

原创 2017年07月31日 16:29:08

上一篇《Avalon2简介》中介绍了Avalon的基本信息,今天我们紧跟着上一篇文章来详细看一下VM的内容。
按照Avalon官方文档的说法,VM属于比较重型的对象。

  1. 超轻量 Object.create(null)
  2. 轻量 一般的对象 {}
  3. 重量 带有访问器属性的对象, avalon VM对象
  4. 超重量 各种节点或window对象

内部属性

VM中以$开头的属性都是框架保留使用的特殊属性,为数据起名字时要小心避开。以$开头的属性,目前除了$id, $events, $watch, $fire, $model比较稳定外, 其他系统属性在不同版本存在增删的情况。在使用的时候,我们需要注意版本间的区别。

  1. $id,vm的名字
  2. $watch,用于添加监听函数
  3. $fire,用于触发监听函数
  4. $events,用于储存监听函数
  5. $model,返回一个纯净的JS对象
  6. $element,2.0新增,当我们用ms-controller,ms-important指定一个VM的作用域,对应元素节点会放到这个属性上
  7. $computed,2.2.1新增,用来集中定义计算属性

注:avalon在VBScript或Object.defineProperty模式下不支持追加新属性与方法。VM中的数据更新,只能通过 = 赋值方式实现。但要注意在IE6-8,由于VM是一个VBScript对象,为VM添加新属性会抛错, 因此我们想批量更新属性要时格外小心了,需要用hasOwnProperty进行过滤。

如果我们需要向VM中添加新属性,我们可能会这样写:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vm1</title>
        <script type="text/javascript" src="js/avalon.js"></script>
        <script>
            var vm = avalon.define({
                $id: "test"
            })
            setTimeout(function() {
                vm.name = "jianggujin";
            }, 2000);
        </script>
    </head>

    <body ms-controller="test">
        <div>Welcom, {{name}}</div>
    </body>

</html>

为了模拟添加数据,我们在延迟2秒后,增加了一个name属性,运行后我们会发现这样通常不会按照我们期望的那样显示,想要实现期望的效果,我们需要稍微修改下上面的代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>vm1</title>
        <script type="text/javascript" src="js/avalon.js"></script>
        <script>
            var vm = avalon.define({
                $id: "test",
                data: {}
            })
            setTimeout(function() {
                vm.data = {
                    name: "jianggujin"
                };
            }, 2000);
        </script>
    </head>

    <body ms-controller="test">
        <div>Welcom, {{data.name}}</div>
    </body>

</html>

这里面的data只是用来方便vm监控属性的,我们也可以起一个其他的名字,使用这种方式,当我们需要添加新属性的时候,需要使用=进行赋值,如果仅需要更改属性的值,则可以直接修改,比如:vm.data.name="jiang";

监控属性

在VM中,改变它们会引起视图改变的属性。如果一个属性是$开头, 或在定义时放在$skipArray数组中,或是函数或节点元素, 它们都不会转换成监控属性.
此外, 改变监控属性的值还会触发对应的$watch监听回调。

计算属性

计算属性是监控属性的强化版,它必须依赖于1个或多个监控属性。通过普通的监控属性实现对视图的监听,它自身的变化也由监控属性进行驱动。
计算属性集中定义在$computed对象中。有多种形式。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>vm1</title>
        <script type="text/javascript" src="js/avalon.js"></script>
        <script>
            var vm = avalon.define({
                $id: "test",
                welcom: 'Welcom',
                name: 'jianggujin',
                $computed: {
                    fullName: function() {
                        return this.welcom + ' ' + this.name
                    }
                }
            })
        </script>
    </head>

    <body ms-controller="test">
        <div>{{fullName}}</div>
    </body>
</html>

非监控属性

这包括框架添加的$id, $events, $model属性, $fire, $watch, $render方法, 及用户自己设置的以$开头的属性,放在$skipArray数组中的属性,值为函数、各种DOM节点的属性, 总之,改变它们的值不会产生同步视图的效果。

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/jianggujin/article/details/76449136

前端框架Avalon:简介

avalon 2 迷你 、 易用 、 高性能 的前端MVVM框架 测试页面avalon仓库perf目录下的index.html, index.*.html文件 简介 ava...
  • u010562871
  • u010562871
  • 2016-09-19 19:37:46
  • 2706

Hbuilder配置Avalon、Vue指令提示

我本人是一名JAVA后端开发,偶尔也会研究一下前端内容,因为Hbuilder是基于eclipse开发的,所以用起来配感亲切啊,而且在我尝试使用的几款前端开发工具中,Hbuilder的表现也是相当出色地...
  • jianggujin
  • jianggujin
  • 2017-05-08 15:21:22
  • 8009

hbuilder(js+html+css)开发的APP效果实例

本系统组成:后台(驾校端)与APP(学员端)两部分组成。 学员以入学报名时的手机号登录APP可进行预约学车。 驾校方可在后台设置排班学车计划。 此模块效果具体如下:   后台-教练管理模块 首先添加教...
  • softcg
  • softcg
  • 2016-12-09 12:53:41
  • 6750

avalon2+webpack2手脚架与avalon2介绍

avalon起源avalon 是一个简单易用迷你的MVVM框架,它最早发布于2012.09.15, 为解决同一业务逻辑存在各种视图呈现而开发出来的。 事实上,这问题其实也可以简单地利用一般的前端模板加...
  • u011100687
  • u011100687
  • 2017-02-22 10:58:03
  • 2147

avalon2.chm帮助文档

  • 2017年04月19日 09:53
  • 5.35MB
  • 下载

移动web开发框架研究

纯粹的总结一下移动web开发框架,移动web开发框架有jQuery Mobile 、Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家族...
  • xyz_lmn
  • xyz_lmn
  • 2014-11-13 20:31:45
  • 55754

avalon指令和js函数简单介绍

1.setInterval(执行函数,间隔时间T)函数和setTimeout(执行函数,间隔时间T)函数 这两个函数的作用都是在指定时间T后执行指定函数。但setTimeout在T时间后执行了一次后就...
  • goodgirl1991
  • goodgirl1991
  • 2015-12-02 10:02:00
  • 1210

SiteMesh,Avalon,RequireJS

SiteMesh:1.装饰模式 2.定义装饰文件,被装饰文件,被装饰的文件会将对应标签里面的内容填充到装饰文件中,比如head里面的内容会填充到中。 3.通过拦截器来拦截页面的访问Avalon 1...
  • a1172784417
  • a1172784417
  • 2016-05-26 17:50:03
  • 259

avalon2学习

最近公司需要用到avalon,但是avalon2和之前的版本有较大提升,且avalon用户基数还是少,加上avalon2官网基于之前版本作介绍,故对于avalon2的学习有一些找不着头绪。以此背景下写...
  • mxxrgxg
  • mxxrgxg
  • 2017-03-10 14:48:13
  • 135

MVVM框架 avalon2.0-mmRouter-webpack2 脚手架

框架采用了类Mobx-React框架 wukong的结构。轻量级mvvm框架。地址:https://github.com/cbbfcd/avalon2-mmRouter-starter.git欢迎st...
  • javaexploreroooo
  • javaexploreroooo
  • 2017-09-15 13:58:53
  • 427
收藏助手
不良信息举报
您举报文章:Avalon2之VM
举报原因:
原因补充:

(最多只允许输入30个字)