Download
Watch.js 1.2.0Compatible with all browsers
But still with some bugs with older browsers
About
Watch.JS is a small library that brings a lot of possibilities. You may know that the "Observer" design pattern involves executing some function when an observed object changes. Other libraries exist that do this, but with Watch.JS you will not have to change the way you develop. Take a look at the examples to see how simple it is to add Watch.JS to your code.
Observe the changes of one object attribute
//defining our object however we likevar ex1 = attr1: "initial value of attr1" attr2: "initial value of attr2"; //defining a 'watcher' for an attribute; //when changing the attribute its watcher will be invokedex1attr1 = "other value";
Observe the changes of more than one object attribute
//defining our object however we likevar ex2 = attr1: 0 attr2: 0 attr3: 0; //defining a 'watcher' for the attributes; //when changing one of the attributes its watcher will be invokedex2attr2 = 50;
Observe the changes of all attributes of the object
//defining our object however we likevar ex3 = attr1: 0 attr2: "initial value of attr2" attr3: "a" 3 null; //defining a 'watcher' for the object ; //when changing one of the attributes of the object the watcher will be invokedex3attr3;
Remove a Watcher
var obj = phrase: "hey" name: "buddy" { ; } { ; } ;; objname = "johnny"; ; objname = "phil";
More information about the change
//defining our object no matter which way we wantvar ex1 = attr1: "initial value of attr1" attr2: "initial value of attr2"; //defining a 'watcher' for an attribute; //when changing the attribute its watcher will be invokedex1attr1 = "other value";
Don't worry about the Infinite Loop
If you don't want to call a second watcher in the current scope just set WatchJS.noMore to true and it will be reset to false when this watcher finishes.
//defining our object however we likevar ex1 = attr1: "inicial value of attr1" attr2: "initial value of attr2"; //defining a 'watcher' for an attribute; //defining other 'watcher' for another attribute; ex1attr1 = "other value to 1"; //attr1 will be changed but will not invoke the attr2`s watcher
How deep you wanna go? Provide a level of children
//defining our object no matter which way we wantvar ex = //level 0 l1a: "bla bla" l1b: //level 1 or less l2a: "lo lo" l2b: //level 2 or less deeper: "so deep" ; ; ; exl1bl2bdeeper = "other value"; exl1bl2b = "other value";
Chill out, no surprises, only expected attributes will be considered
After declaring a watcher for some object, when you add new attributes to this object and/or change it, the watcher will not be invoked. If you want the new attributes to be observed you need to specify the name of this new attributes.
//defining our object however we likevar ex6 = attr1: 0 attr2: 1; //defining a 'watcher' for the object; ex6attr3 = null; //no watcher will be invokedex6attr3 = "value"; //no watcher will be invoked
An example how to define a watcher of an undefined attribute
//defining our object however we likevar ex6 = attr1: 0 attr2: 1; //defining a 'watcher' for the specific attribute; ex6attr3 = "value"; //watcher will be invoked
Invoke the watcher anytime you want
//defining our object however we likevar ex7 = attr1: 0 attr2: 1; //defining a 'watcher' for the object; ; //invoke the watcher
Compatible with JQuery
;
Different ways to build Classes/Objects and use Watch.JS
//open the browser log to view the messages var { var _thisApple = this; thistype = type; thiscolor = "red"; this { return thiscolor + ' ' + thistype + ' apple'; }; ;}; var apple = "macintosh";appletype = "other"; var { var _thisBanana = this; thistype = type; thiscolor = "yellow"; ;}; Bananaprototype { return thiscolor + ' ' + thistype + ' banana';}; var banana = "Cavendish";bananatype = "other"; var orange = type: "pocan" color: "orange" { return thiscolor + ' ' + thistype + ' apple'; }; ; orangetype = "other";