zoukankan      html  css  js  c++  java
  • 迷你MVVM框架 avalonjs 学习教程15、属性监听与模块通信

    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

    如果属性非常多,我们可以监听$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

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

    <!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

  • 相关阅读:
    ARC管理内存(一)
    懒加载lazyload
    View的封装
    Plist文件与数据解析
    ubuntu16.04 安装python3.6
    ubuntu16.04 安装 wxPython方法
    第三章
    第二章
    协方差的意义
    内存区--Java
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/4016325.html
Copyright © 2011-2022 走看看