How To Observe Value Changes In Js Variables

July 16, 2023 Post a Comment

Im wondering if someone might be able to help me with something that i think it fairly straight forward: Essentially i want to extend the prototypes of all datatypes (including int

Solution 1:

I might be tempted to approach this not by trying to add methods to existing types, but to create an object that can wrap a primative type. I would call this "observing" a value, and might implement it something like this:

function observable(v){
    this.value = v;

    this.valueChangedCallback = null;

    this.setValue = function(v){
        if(this.value != v){
            this.value = v;
            this.raiseChangedEvent(v);
        }
    };

    this.getValue = function(){
        returnthis.value;
    };

    this.onChange = function(callback){
        this.valueChangedCallback = callback;
    };

    this.raiseChangedEvent = function(v){
        if(this.valueChangedCallback){
             this.valueChangedCallback(v);
        }   
    };
}

This can then be used to observe changes in any value (so long as that value is then changed only by methods on the observable class - a small detraction IMO).

Something like this would work with the above code:

var obs = new observable(123);
obs.onChange(function(v){
         alert("value changed to: " + v);
     });

// the onChange callback would be called after something like obs.setValue(456);

Live example here --> http://jsfiddle.net/MeAhz/

Solution 2:

Extend the object prototype:

Object.prototype.foo = function() { alert('hello world'); };
var a = 1;
a.foo();

Solution 3:

The standard DEPRECATED way : Object.observe()

The Object.observe() method was used for asynchronously observing the changes to an object. It provided a stream of changes in the order in which they occur. However, this API has been deprecated and removed from browsers.

let myObservdObject = Object.observe( { a : 'foo' }, e=>console.log('change!', e) );
myObservdObject.a = 'bee';
// callback gets executed// and prints 'changed! in console, with the change event data

But proxies arrived to the Standard (ES6) an Object.Observe became deprecated and, in consecuence, unsupported by the browsers.

Proxies are the new way to observe... but implement a generic observer requires a more complex implementation, in comparsion with the way Object.observe used to provide us.

Observe value changes with third party libraries

You can find arround many implementations based in proxies. Some of them implement the Observer pattern, wich forces you to set or get the values using specific methods :

// define your objectvarobject = {a:'bee'};
// generate an observervar observer = observe(object);
// declare the onchange event handler
observer.on( 'change', change=> console.log(change) );
// ready!// set the value of 'a' and see how the callback is executed...
observer.set('a', 'foo')   
// get the new value
observer.get('a')   // returns 'foo'

Other libraries instead, let you interact with your variables using a more natural way:

WatchJS : https://github.com/melanke/Watch.JS/

// define your objectvarobject = {a:'bee'};
// generate an observer and declare de hadlerwatch(object , "a" , e=>console.log(e) );
// ready!// set the value of 'a' and see how the callback is executed...object.a = 'foo';   
// get the new valueobject.a// returns 'foo'

My own apprach : deep-observer

All the implementaions have their own caveats, and none of them was working for my purposes, so i had to implement my own approach.

The result is a highly customizable Observer method with a really small footprint ( <100 bytes gziped)

Deep-observer : https://www.npmjs.com/package/deep-observer

// create an observable objectconst myObserved = newObserver( { a : 'bee' } , e=>console.log(e) ),
// perform a modification
myObserved.a = 'foo'; 
// console  : { action:'update', oldValue:'bee', object:{a:'foo'}, name:'a' }
myObserved.a;  // returns 'foo'

javascript dox