Avalon2之VM

来源：互联网发布：软件产品说明书范文编辑：程序博客网时间：2024/04/27 09:01

内部属性
监控属性
计算属性
非监控属性

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

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

内部属性

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

$id，vm的名字
$watch，用于添加监听函数
$fire，用于触发监听函数
$events，用于储存监听函数
$model，返回一个纯净的JS对象
$element，2.0新增，当我们用ms-controller，ms-important指定一个VM的作用域,对应元素节点会放到这个属性上
$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节点的属性，总之，改变它们的值不会产生同步视图的效果。

阅读全文

0 0