javascript – 使用 Watch.JS 監聽 (watch) 變數
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"); // 調用監聽