15、属性监听与模块通信
发布在avalon学习教程2014年10月21日view:14051
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

avalon的ViewModel对象从其内部EventManager里继承了三个方法,$watch、$unwatch、$fire三个方法,它们就是我们本节的主题。

词如其名,非常直白,一看就知道做什么。我们先从$watch方法说起,它能监听当前的VM第一层的监控属性计算属性,如果某属性是一个对象,想监控其子孙属性,就需要定位到此对象上使用$watch回调了。$watch回调会默认传入先后两个属性值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js" ></script>
        <script>
            var model = avalon.define({
                $id: "test",
                aaa: "2",
                bbb: "2",
                $ccc: "1",//这是非监控属性
                ddd: "1",//这是非监控属性
                $skipArray: ["ddd"],
                click: function(a) {
                    model[a] = new Date - 0
                }
            })
            model.$watch("aaa", function(a, b) {
                console.log("aaa", a, b)
            })
            model.$watch("bbb", function(a, b) {
                console.log("bbb", a, b)
            })
            model.$watch("$ccc", function(a, b) {
                console.log("$ccc", a, b)
            })
            model.$watch("ddd", function(a, b) {
                console.log("ddd", a, b)
            })
        </script>
        <style>
            .ms-hover div:hover{
                background:yellowgreen;
            }
        </style>
    </head>
    <body ms-controller="test" class='ms-hover'>
        <div ms-click="click('aaa')">{{aaa}}</div>
        <div ms-click="click('bbb')">{{bbb}}</div>
        <div ms-click="click('$ccc')">{{$ccc}}</div>
        <div ms-click="click('ddd')">{{ddd}}</div>
    </body>
</html>

enter image description here

多个属性的监听共用一个$watch回调。

var fn = function(){
   var b = vmodel.aaa +"!"
   //...
}
var vmodel = avalon.define("test",function(vm){
   vm.bbb = 2
   vm.aaa =1
})
vmodel.$watch("aaa", fn)
vmodel.$watch("bbb", fn)

如果属性非常多,我们可以监听$all这个特殊的属性名来得知所有属性的变动状况。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="../avalon.js" ></script>
        <script>
            var model = avalon.define({
                $id: "test",
                aaa: "2",
                bbb: "2",
                $ccc: "1",
                ddd: "1",
                $skipArray: ["ddd"],
                click: function(a) {
                    model[a] = new Date - 0
                }
            })
            model.$watch("$all", function(name, a, b) {
                console.log(name, a, b)
            })

        </script>
        <style>
            .ms-hover div:hover{
                background:yellowgreen;
            }
        </style>
    </head>
    <body ms-controller="test" class='ms-hover'>
        <div ms-click="click('aaa')">{{aaa}}</div>
        <div ms-click="click('bbb')">{{bbb}}</div>
        <div ms-click="click('$ccc')">{{$ccc}}</div>
        <div ms-click="click('ddd')">{{ddd}}</div>
    </body>
</html>

enter image description here

我们也可以用$fire更改属性值。这样就可以打破不能触发非监控属性的回调的藩蓠,但要注意死循环,需要自己比较新旧值是否真的发生改变才触发。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="../avalon.js" ></script>
        <script>
            var model = avalon.define({
                $id: "test",
                aaa: "2",
                bbb: "2",
                $ccc: "1",
                ddd: "1",
                $skipArray: ["ddd"],
                click: function(a) {
                    var old = model[a]
                    model.$fire(a, new Date - 0, old)
                }
            })
            model.$watch("$all", function(name, a, b) {
                console.log(name, a, b)
            })

        </script>
        <style>
            .ms-hover div:hover{
                background:yellowgreen;
            }
        </style>
    </head>
    <body ms-controller="test" class='ms-hover'>
        <div ms-click="click('aaa')">{{aaa}}</div>
        <div ms-click="click('bbb')">{{bbb}}</div>
        <div ms-click="click('$ccc')">{{$ccc}}</div>
        <div ms-click="click('ddd')">{{ddd}}</div>
    </body>
</html>

enter image description here

注意,$watch回调里是用ecma262 v6 提供的新API Object.is做新旧值比较,它的功能与=== 差不多,但能对付NaN这个自己也不等于自己的怪胎。另,一个对象字面量即便外形看上去一致,也是一个新对象,不会等于原来的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js" ></script>
        <script>
            var model = avalon.define({
                $id: "test",
                aaa: "1111",
                nan: NaN,
                object: {a: 1, b: 2},
                array: [1, 2],
                ddd: "1",
                $skipArray: ["ddd"],
                click: function(a) {
                    if (a == "object") {
                        model[a] = {a: 1, b: 2}
                    } else if (a == "array") {
                        model[a] = [1, 2]
                    } else if (a == "nan") {
                        model[a] = NaN
                    } else {
                        model[a] = "1111"
                    }
                }
            })
            model.$watch("$all", function(name, a, b) {
                console.log(name, a, b)
            })

        </script>
        <style>
            .ms-hover div:hover{
                background:yellowgreen;
            }
        </style>
    </head>
    <body ms-controller="test" class='ms-hover'>
        <div ms-click="click('aaa')">{{aaa}}</div>
        <div ms-click="click('nan')">{{nan}}</div>
        <div ms-click="click('object')">
            <div ms-repeat='object'>{{$key}}</div>
        </div>
        <div ms-click="click('array')">
            <div ms-repeat='array'>{{el}}</div>
        </div>
        <div ms-click="click('ddd')">{{ddd}}</div>
    </body>
</html>

enter image description here 如果你的VM结构复杂,需要监听某个对象下的子属性,你就需要在define方法外面,拿到刚才define的返回对象,一层层地定位到其父对象上,使用$watch方法:

            var a = avalon.define({
                $id: "ex",
                aaa: {
                    bbb: {
                        ccc:1
                    }
                }
            })
            a.aaa.bbb.$watch("ccc", function(v){
                avalon.log(v)
            })
            setTimeout(function(){
                a.aaa.bbb.ccc = 222
            }, 1000)

对于数组,我们只能监听数组长度的变化,不能监听其内部是否发生变化。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="../avalon.js" ></script>
        <script>
            var model = avalon.define({
                $id: "test",
                array: [1, 2],
                click: function(a) {
                    model.array.push(new Date - 0)
                }
            })
            model.array.$watch("length", function( a, b) {
                console.log(a, b)
            })

        </script>
        <style>
            .ms-hover div:hover{
                background:yellowgreen;
            }
        </style>
    </head>
    <body ms-controller="test" class='ms-hover'>
        <div ms-click="click('array')">
            <div ms-repeat='array'>{{el}}</div>
        </div>
    </body>
</html>

enter image description here

如果你一定要监听数组每个元素的变化,可以使用1.3.4新添加的tick函数,这是一个心跳检测,只要函数返回false就会从检测列队中移除。由于是每30ms检测一次,非常耗性能,因此不用时记得移除。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="../avalon.js" ></script>
        <script>
            var ret
            var model = avalon.define({
                $id: "test",
                array: [1, 2, 3, 4, 5, 6, 7, 8],
                stop: function(){
                    ret = false
                },
                click: function(a) {
                    var index = Math.floor(Math.random() * 8)
                    model.array.set(index, new Date - 0)
                }
            })
            var old = model.$model.array.concat()
            avalon.tick(function() {
                console.log("tick...")
                var now = model.$model.array.concat()
                for (var i = 0, n = now.length; i < n; i++) {
                    if (now[i] !== old[i]) {
                        console.log("第" + i + "个元素发生变化: " + old[i] + " --> " + now[i])
                    }
                }
                old = now
                return ret
            })

        </script>
        <style>
            .ms-hover div:hover{
                background:yellowgreen;
            }
        </style>
    </head>
    <body ms-controller="test" class='ms-hover'>
        <div ms-click="click('array')">
            <div ms-repeat='array'>{{el}}</div>
        </div>
        <button type='button' ms-click='stop'>移除此监听器</button>
    </body>
</html>

enter image description here

稍微说一下 $unwatch的用法,这个不太常用。如果它传入两个参数,第一个为属性名,第二个为回调,那么就会移除此用户,如果只传入此属性名,则移除此属性的所有监听函数。如果什么也不传,那么就会临时中断此ViewModel的属性监听功能,所有$watch回调都不会触发。想恢复也很简单,调用$watch方法,也是什么也不传。

我们最后看一下1.3.2新增的跨模块通信功能,我们通过在$fire的第一个参数一些前缀,就能触发其他模块的属性回调。它们分别是”up!”, “down!”, “all!”。上与下是根据当前ViewModel所在ms-controller元素在DOM树位置决定的。

  • up!xxx, 向上冒泡
  • down!xxx, 向下捕获
  • all!xxx, 全局广播

<!DOCTYPE html>
<html>
    <head>
        <title>by 司徒正美</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="avalon.js"></script>
        <script>
            avalon.define("ancestor", function(vm) {
                vm.aaa = '1111111111'
                vm.$watch("aaa", function(v) {
                    avalon.log(v)
                    avalon.log("ancestor.aaa事件被触发了")
                })
                vm.click = function() {
                    avalon.log("向下广播")
                    vm.$fire("down!aaa", "capture")
                }
            })
            avalon.define("parent", function(vm) {
                vm.text = "222222222"
                vm.aaa = '3333333333'
                vm.$watch("aaa", function(v) {
                    avalon.log(v)
                    avalon.log("parent.aaa事件被触发了")
                })
                vm.click = function() {
                    console.log("全局扩播")
                    vm.$fire("all!aaa", "broadcast")
                }
            })
            avalon.define("son", function(vm) {
                vm.$watch("aaa", function(v) {
                    avalon.log(v)
                    avalon.log("son.aaa事件被触发了")
                })
                vm.click = function() {
                    console.log("向上冒泡")
                    vm.$fire("up!aaa", "bubble")
                }
            })
        </script>
    </head>
    <body class="ms-controller"   ms-controller="ancestor">
        <h3>avalon vm.$fire的升级版 </h3>
        <button type="button" ms-click="click">
            capture
        </button>
        <div ms-controller="parent">
            <button type="button" ms-click="click">broadcast</button>
            <div ms-controller="son">
                <button type="button" ms-click="click">
                    bubble
                </button>
            </div>
        </div>
    </body>
</html>

enter image description here

评论
发表评论
3年前

这套教程看下来,变量命名老是用aaa,bbb什么的,看的我有点儿眼晕······

3年前
添加了一枚【评注】:棒!相当于事件委托
3年前
添加了一枚【评注】:这也是非监控属性,那么上面的 aaa是不是非监控属性
3年前
添加了一枚【评注】:只是当前的vm吗????如果想监听其他的vm怎么办?
3年前
添加了一枚【评注】:如何判断这个属性是非监控属性
4年前
添加了一枚【评注】:司徒大大,这个我即使把你写的源代码复制粘贴,当点击数组1、2的时候控制台也不能输出,就是model.$watch("$all", function(name, a, b) { console.log(name, a, b) }) 这个没有监听到……求解
4年前

请问model.$model是什么意思

4年前
添加了一枚【评注】:model.$fire(a, new Date - 0, old) 这里为什么要new Date-0
4年前

好几处代码没显示好

WRITTEN BY
司徒正美
穿梭于二次元与二进制间的魔法师( ̄(工) ̄) 凸ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้
TA的新浪微博
PUBLISHED IN
avalon学习教程

从零开始学习到掌握当前国内最强大的MVVM框架avalon

我的收藏