README
object_observer
This is a simple observer which listens to changes on any object. These changes can only be asignations like the following:
const objectToObserve = {
a: 1
};
objectToObserve.a = 2;
Dependencies
Only depends on events
node module, which does not need to be installed. And ES6 support.
To run
npm start
To test
npm test
Examples of use
To add a listener for changes on a property do the following:
const Observer = require('@addr/object_observer');
const objectToObserve = {
a: 1
};
const observer = new Observer(objectToObserve);
const resultObject = observer.getObject(); // { a: 1 } Same object
observer.subscribe('a', (newValue, propName, oldValue) => {
console.log(`Prop >> ${propName} << just changed from >> ${oldValue} << to >> ${newValue} <<`);
});
resultObject.a = 3;
// Prop >> a << just changed from >> 1 << to >> 3 <<
To remove a listener:
const Observer = require('@addr/object_observer');
const objectToObserve = {
a: 1
};
const observer = new Observer(objectToObserve);
const resultObject = observer.getObject(); // { a: 1 } Same object
observer.subscribe('a', (newValue, propName, oldValue) => {
console.log(`Prop >> ${propName} << just changed from >> ${oldValue} << to >> ${newValue} <<`);
});
resultObject.a = 3;
// Prop >> a << just changed from >> 1 << to >> 3 <<
observer.unsubscribe('a');
resultObject.a = 4;
//Nothing gets printed
To create a different observer with the same instance:
const Observer = require('@addr/object_observer');
const objectToObserve = {
a: 1
};
const observer = new Observer(objectToObserve);
observer.rebuild({ b: 2 });
observer.subscribe('b', (newValue, propName, oldValue) => {
console.log(`Prop >> ${propName} << just changed from >> ${oldValue} << to >> ${newValue} <<`);
});
const resultObject = observer.getObject(); // { b: 2 }
resultObject.b = 3;
// Prop >> b << just changed from >> 2 << to >> 3 <<
console.log(objectToObserve);
// { a: 1 }
Also, to remove all listeners:
const Observer = require('@addr/object_observer');
const objectToObserve = {
a: 1
};
const observer = new Observer(objectToObserve);
observer.subscribe('a', (newValue, propName, oldValue) => {
console.log(`Prop >> ${propName} << just changed from >> ${oldValue} << to >> ${newValue} <<`);
});
observer.rebuild(objectToObserve);
const resultObject = observer.getObject(); // { a: 1 }
resultObject.a = 3;
// Nothing gets printed
To overwrite the change after it happened:
const Observer = require('@addr/object_observer');
const objectToObserve = {
a: 1
};
const observer = new Observer(objectToObserve);
const resultObject = observer.getObject(); // { a: 1 } Same object
observer.handle('a', (newValue, propName, oldValue, object) => {
console.log(`Prop >> ${propName} << has >> ${object[propName]} << and before it had >> ${oldValue} <<`);
object[propName] = 4;
});
observer.subscribe('a', (newValue, propName, oldValue) => {
console.log(`Prop >> ${propName} << just changed from >> ${objectToObserve[propName]} << to >> ${newValue} <<`);
});
resultObject.a = 3;
// Prop >> a << just changed from >> 1 << to >> 3 <<
// Prop >> a << has >> 3 << and before it had >> 1 <<
console.log(resultObject, objectToObserve);
// { a: 4 } { a: 4 }
To rollback the change after it happened:
const Observer = require('@addr/object_observer');
const objectToObserve = {
a: 1
};
const observer = new Observer(objectToObserve);
const resultObject = observer.getObject(); // { a: 1 } Same object
observer.handle('a', (newValue, propName, oldValue, object) => {
console.log(`Prop >> ${propName} << just changed from >> ${object[propName]} << to >> ${newValue} <<`);
return true;
});
observer.subscribe('a', (newValue, propName, oldValue) => {
console.log(`Prop >> ${propName} << just changed from >> ${objectToObserve[propName]} << to >> ${newValue} <<`);
});
resultObject.a = 3;
// Prop >> a << just changed from >> 1 << to >> 3 <<
// Prop >> a << just changed from >> 3 << to >> 3 <<
console.log(resultObject);
// { a: 1 }
To remove handle listener:
const Observer = require('@addr/object_observer');
const objectToObserve = {
a: 1
};
const observer = new Observer(objectToObserve);
const resultObject = observer.getObject(); // { a: 1 } Same object
observer.handle('a', (newValue, propName, oldValue, object) => {
console.log(`Prop >> ${propName} << just changed from >> ${object[propName]} << to >> ${newValue} <<`);
return true;
});
observer.subscribe('a', (newValue, propName, oldValue) => {
console.log(`Prop >> ${propName} << just changed from >> ${objectToObserve[propName]} << to >> ${newValue} <<`);
});
observer.unhandle('a');
resultObject.a = 3;
// Prop >> a << just changed from >> 1 << to >> 3 <<
console.log(resultObject);
// { a: 3 }
Complex examples
You can build the observer without any object and after that use the object given by the observer.
And the oldValue
parameter will be null because the attribute was created at the change moment.
const Observer = require('@addr/object_observer');
const observer = new Observer();
const resultObject = observer.getObject(); // {}
observer.subscribe('a', (newValue, propName, oldValue) => {
console.log(`Prop >> ${propName} << just changed from >> ${oldValue} << to >> ${newValue} <<`);
});
resultObject.a = 3;
// Prop >> a << just changed from >> null << to >> 3 <<
In order to avoid infinite loop, don't use the object given by observer directly like this.
const Observer = require('@addr/object_observer');
const objectToObserve = {
a: 1
};
const observer = new Observer(objectToObserve);
const resultObject = observer.getObject(); // { a: 1 } Same object
observer.handle('a', (newValue, propName, oldValue, object) => {
console.log(`Prop >> ${propName} << current value at object >> ${object[propName]} << newValue parameter >> ${newValue} <<`);
resultObject[propName] = 4;
});
observer.subscribe('a', (newValue, propName, oldValue) => {
console.log(`Prop >> ${propName} << is about to change from >> ${objectToObserve[propName]} << to >> ${newValue} <<`);
});
resultObject.a = 3;
// Prop >> a << is about to change from >> 1 << to >> 3 <<
// Prop >> a << current value at object >> 3 << newValue parameter >> 3 <<
// Prop >> a << is about to change from >> 3 << to >> 4 <<
// Prop >> a << current value at object >> 4 << newValue parameter >> 4 <<
// Prop >> a << is about to change from >> 4 << to >> 4 <<
// Prop >> a << current value at object >> 4 << newValue parameter >> 4 <<
// Prop >> a << is about to change from >> 4 << to >> 4 <<
// Prop >> a << current value at object >> 4 << newValue parameter >> 4 <<
// Prop >> a << is about to change from >> 4 << to >> 4 <<
// Until it breaks
console.log(resultObject);
Instead, use the object
parameter given at handle's callback.
Also, don't try to re-assign some value to your resultObject
because you won't be able to listen to any changes.
const Observer = require('@addr/object_observer');
const observer = new Observer();
let resultObject = observer.getObject(); // {}
observer.subscribe('a', (newValue, propName, oldValue) => {
console.log(`Prop >> ${propName} << just changed from >> ${oldValue} << to >> ${newValue} <<`);
});
resultObject = {
a: 1
};
resultObject.a = 3;
// Nothing gets printed