Observify is a bare-bones observable and eventing library using Proxies. This library enables you to attach event handlers to your objects so you can be notified when specific properties change. This will also allow you to lock and unlock write access to any property of an object.
A collection of demos will soon be available. Until then, please have a look at the basic demos below as examples of the many ways you could use this in development.
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/observify-js@1.1.13"></script>
You can install Observify using NPM or Bower
NPM
npm i observify-js --save
Bower
bower i observify-js
Browser
<script type="text/javascript" src="_your_modules_path/observify.min.js"></script>
Module
import Observify from 'Observify';
Require
const Observify = require('Observify');
RequireJS
require("Observify", function(Observify){
...
});
You can bind change listeners to any prop regardless of its type. Deeply nested props can be bound using dot notation.
const person = Observify({
eyes: 'green',
age: 14,
hair: 'brown',
tshirt: {
color: 'white',
logo: {
brand: 'volcom'
}
}
});
person.listen('age', function(newValue, oldValue, propPath) {
console.log(newValue, oldValue);
});
person.age++;
>> 15, 14
const person = Observify({
eyes: 'green',
age: 14,
hair: 'brown',
tshirt: {
color: 'white',
logo: {
brand: 'volcom'
}
}
});
person.listen('tshirt.logo.brand', function(newValue, oldValue, propPath) {
console.log(newValue, oldValue);
});
person.tshirt.logo.brand = 'rvca';
>> rvca, volcom
You can unbind one or all listeners bound to an object property
const person = Observify({
eyes: 'green',
age: 14,
hair: 'brown',
tshirt: {
color: 'white',
logo: {
brand: 'volcom'
}
}
});
const ageChangeCallback = function(newValue, oldValue) {
console.log('The persons age was changed from:', oldValue, ' to ', newValue);
};
person.listen('age', ageChangeCallback);
person.listen('age', function(newValue, oldValue) {
console.log('Secondary callback', oldValue, ' to ', newValue);
});
person.age++;
>> The persons age was changed from: 14 to 15
>> Secondary callback 14 to 15
// remove listener
person.unlisten('age', ageChangeCallback);
person.age++;
>> Secondary callback 14 to 15
const person = Observify({
eyes: 'green',
age: 14,
hair: 'brown',
tshirt: {
color: 'white',
logo: {
brand: 'volcom'
}
}
});
const ageChangeCallback = function(newValue, oldValue) {
console.log('The persons age was changed from:', oldValue, ' to ', newValue);
};
person.listen('age', ageChangeCallback);
person.listen('age', function(newValue, oldValue) {
console.log('Secondary callback', oldValue, ' to ', newValue);
});
person.age++;
>> The persons age was changed from: 14 to 15
>> Secondary callback 14 to 15
// remove listener
person.unlisten('age');
person.age++;
>>
You can create and dispatch custom events to control object updates and/or handle any additional logic needed.
const person = Observify({
eyes: 'green',
age: 14,
hair: 'brown',
tshirt: {
color: 'white',
logo: {
brand: 'volcom'
}
}
});
person.on('changeAge', function(){ this.age++ });
person.listen('age', function(newValue, oldValue) {
console.log('The persons age was changed from:', oldValue, ' to ', newValue);
});
person.trigger('changeAge');
>> The persons age was changed from: 14 to 15
You can unbind one or all namespaced event callbacks
const person = Observify({
eyes: 'green',
age: 14,
hair: 'brown',
tshirt: {
color: 'white',
logo: {
brand: 'volcom'
}
}
});
const onChanegAge = function(){ this.age++ };
person.on('changeAge', onChanegAge);
person.trigger('changeAge');
>> 15
person.off('changeAge', onChanegAge);
person.trigger('changeAge');
>>
const person = Observify({
eyes: 'green',
age: 14,
hair: 'brown',
tshirt: {
color: 'white',
logo: {
brand: 'volcom'
}
}
});
person.on('changeAge', function(){
console.log('callback 1');
});
person.on('changeAge', function(){
console.log('callback 2');
});
person.on('changeAge', function(){
console.log('callback 3');
});
person.trigger('changeAge');
>> callback 1
>> callback 2
>> callback 2
person.off('changeAge');
person.trigger('changeAge');
>>
Once you've created some custom events you can invoke them using .trigger
const person = Observify({
eyes: 'green',
age: 14,
hair: 'brown',
tshirt: {
color: 'white',
logo: {
brand: 'volcom'
}
}
});
person.on('changeAge', function(){
console.log('callback 1');
});
person.trigger('changeAge');
>> callback 1
You can prevent writes (aka lock) to the entire object or specific properties. Any associated listeners will be ignored once a property has been locked.
const person = Observify({
eyes: 'green',
age: 14,
hair: 'brown',
tshirt: {
color: 'white',
logo: {
brand: 'volcom'
}
}
});
person.lock('tshirt.logo');
person.tshirt.logo.brand = 'rvca';
>> person.tshirt.logo.brand is still 'volcom'
You can unlock a property to make changes and lock it again (if needed). Once a property has been unlocked all property listeners will be restored.
const person = Observify({
eyes: 'green',
age: 14,
hair: 'brown',
tshirt: {
color: 'white',
logo: {
brand: 'volcom'
}
}
});
person.lock('tshirt.logo');
person.tshirt.logo.brand = 'rvca';
>> person.tshirt.logo.brand is still 'volcom'
person.unlock('tshirt.logo');
person.tshirt.logo.brand = 'rvca';
>> person.tshirt.logo.brand is now 'rvca';
npm install
To start Karma and execute all unit tests with coverage, run:
npm run unit