Skip to content

Detect the changes of an object or primitive, and trigger the callback functions

License

Notifications You must be signed in to change notification settings

mertdy/Watchable.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Watchable.js

Very lightweight library designed with Observer Pattern principle. It can take your variable and starts to watch it. If the value of your variable is changed, all the callback functions you subscribed will be triggered. Using this library, you can watch the value changes with one or more callback functions, unwatch the callbacks one by one or unwatch all the callbacks at once.

The callback functions will take the new value and the old value of the variable as the parameters.

Importing

Import as ES5 module

<head>
  <script src="Watchable-es5.js"></script>
  <script src="index.js"></script>
</head>
var val = 'heiii';
var izle = new Watchable(val);

// watchid is needed when you want to unwatch this specific function
var watchid1 = izle.watch(function(newVal, oldVal) {
  console.log('oldVal: ' + oldVal);
});
var watchid2 = izle.watch(function(newVal, oldVal) {
  console.log('newVal: ' + newVal);
});

izle.value = 'whatsupp?'; // both callbacks are triggered here

setTimeout(() => {
  izle.value = 'mert'; // both callbacks are triggered here
  izle.unwatch(watchid1); //this will unwatch the first callback function

  setTimeout(() => {
    izle.value = 'dy'; // only one callback is triggered here
    // old value will not be printed here since we unwatched it.
  }, 2000);
}, 2000);

Import as ES6 module

<head>
  <script type="module" src="index.js"></script>
  <!-- Your own js file needs to be imported as module in HTML file -->
</head>
import { Watchable } from './Watchable-es6.js';

let val = 'heiii';
let izle = new Watchable(val);

// watchid is needed when you want to unwatch this specific function
let watchid1 = izle.watch((newVal, oldVal) => {
  console.log(`oldVal: ${oldVal}`);
});
let watchid2 = izle.watch((newVal, oldVal) => {
  console.log(`newVal: ${newVal}`);
});

izle.value = 'whatsupp?'; // both callbacks are triggered here

setTimeout(() => {
  izle.value = 'mert'; // both callbacks are triggered here
  izle.unwatch(watchid1); //this will unwatch the first callback function

  setTimeout(() => {
    izle.value = 'dy'; // only one callback is triggered here
    // old value will not be printed here since we unwatched it.
  }, 2000);
}, 2000);

Import as TypeScript

The same as the ES6 import

Supported functions

// Getting
let w = new Watchable(yourValue);
console.log(w.value);

// Setting
let w = new Watchable();
w.value = newValue;

// watching
let w = new Watchable(yourValue);
let watchId = w.watch((newValue, oldValue) => console.log());

// unwatching
w.unwatch(watchId);

// unwatching all
w.unwatchAll();

Final Note

This library cannot trace the changes "in" arrays or the changes "in" objects. You need to declare a new value to trigger the watchers.

About

Detect the changes of an object or primitive, and trigger the callback functions

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published