javascript – 使用 Watch.JS 監聽 (watch) 變數

官方連結 Watch.JS

npm 下載

npm install melanke-watchjs

透過 require 載入

var WatchJS = require("melanke-watchjs")
var watch = WatchJS.watch;
var unwatch = WatchJS.unwatch;
var callWatchers = WatchJS.callWatchers;

 

使用方式

監聽單一物件屬性

var ex1 = {
    attr1: "initial value of attr1",
    attr2: "initial value of attr2"
};

watch(ex1, "attr1", function(){
    alert("attr1 changed!");
});

ex1.attr1 = "other value";

 

監聽多個物件屬性

var ex2 = {
    attr1: 0,
    attr2: 0,
    attr3: 0
};

watch(ex2, ["attr2", "attr3"], function(){
    alert("attr2 or attr3 changed!");
});

//當改變兩個的其中一項屬性時會調用
ex2.attr2 = 50;​

 

監聽整個物件屬性

var ex3 = {
    attr1: 0,
    attr2: "initial value of attr2",
    attr3: ["a", 3, null]
};

watch(ex3, function(){
    alert("some attribute of ex3 changes!");
});

// 當任何一項屬性改變會被調用
ex3.attr3.push("new value");​

 

取消監聽

var obj = {
    phrase: "hey",
    name: "buddy",
    alert: function(){
        alert(obj.phrase + " " + obj.name);
    },
    alert2: function(){
        alert(obj.name + ", " + obj.phrase);
    }
}
    
watch(obj, "name", obj.alert);
watch(obj, "name", obj.alert2);

obj.name = "johnny";

unwatch(obj, "name", obj.alert);

obj.name = "phil";​

 

在聲明以後,當屬性發生添加的行為時,監聽並不會調用

var ex6 = {
    attr1: 0,
    attr2: 1
};

watch(ex6, function(){
    alert("some attribute of ex6 changed!")
});

ex6.attr3 = null; // 不會被監聽調用
ex6.attr3 = "value"; // 不會被監聽調用

 

你想在任何時候調用監聽,例如點擊某個事件以後,要調用這個 監聽 watch()

var ex7 = {
    attr1: 0,
    attr2: 1
};

watch(ex7, function(){
    alert("some attribute of ex6 changed!")
});

callWatchers(ex7, "attr1"); // 調用監聽

 

其他更多的用法參考官方說明

發表迴響