碼上快樂

相關內容    簡體    繁體

迷你MVVM框架 avalonjs 學習教程15、屬性監聽與模塊通信

本文轉載自   查看原文   2014-10-10 16:56   3382    avalon

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


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 迷你MVVM框架 avalonjs 學習教程8、屬性操作 迷你MVVM框架 avalonjs 學習教程3、綁定屬性與掃描機制 迷你MVVM框架 avalonjs 學習教程2、模塊化、ViewModel、作用域 迷你MVVM框架 avalonjs 學習教程16、過濾器 迷你MVVM框架 avalonjs 學習教程19、avalon歷史回顧 迷你MVVM框架 avalonjs 學習教程21、雙向綁定鏈 迷你MVVM框架 avalonjs 學習教程9、類名操作 迷你MVVM框架 avalonjs 學習教程1、引入avalon 迷你MVVM框架 avalonjs 學習教程10、樣式操作 迷你MVVM框架 avalonjs 學習教程12、數據聯動
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM