observify
A simple function to create an observable object.
Last updated 2 years ago by hereisnaman .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install observify 
SYNC missed versions from official npm registry.

observify

A simple function to create an observable object. You can implement observers, pub-subs, reducers and many other patterns with ease.

The function takes a target and return a proxy object, which you can subscribe to. On mutation including creation, deletion or change of any of its property, it will notify all the subscribers.

subscribers

The observable maintains a list of subscriber functions. It calls all the subscriber functions synchronously on any change to the target object. You can use ._subscribe() and ._unsubscribe() functions to add or remove subscribers to an observable respectively.

import { observify } from 'observify';

const target = {  
  loading: true,
};

const logger = state => {
  console.log('updated state: ', state);
};

/* you can pass an array of subcribers as a second 
 * argument to add them at initialization.
 */
const observable = observify(target, [logger]);

const updateUI = (state) => {
  if(!state.loading){
    console.log('loading is set false');
  }
};

/* you can use the ._subscribe() to add
 * subscribers to your observable.
observable._subscribe(updateUI);

observable.loading = false;
/* output:
 * updated state: { loading: false }
 * loading is set false
 */
 
observable.loading = false; 
/* no output, as on change the proxy does a deep 
 * equality check before notifying subscriber.
 */
 
/* you can use ._unsubscribe() to remove a
 * subscriber from the observable.
observable._unsubscribe(udpateUI);

observable.loading = true;
/* output:
 * updated state: { loading: true }
 */

dependency

An observable can be dependent on other observable. Which means if B is a dependency of A, A will notify all its subscribers if there is any change to B. You can use ._addDependency() and ._removeDependency() functions to add or remove dependency to an observable respectively.

Dependencies can be used to implement reducers. Check the example here.

import { observify } from 'observify';

const logger = state => {
  console.log('updated state: ', state;
};

const observableA = observify({
  foo: false,
}, [logger]);

const observableB = observify({
  bar: true,
}, [logger]);

observableA._addDependency(observableB);
observableB.bar = false;
/* output:
 * udpated state: { bar: false }
 * updated state: { foo: false }
 */

todo

  • [ ] Add option to configure deep, shallow or no check before notifying the subscribers.
  • [ ] Add option to freeze the proxy object.
  • [ ] Add option to call subscribers async.

Current Tags

  • 2.0.0                                ...           latest (2 years ago)

7 Versions

  • 2.0.0                                ...           2 years ago
  • 1.1.2                                ...           5 years ago
  • 1.1.1                                ...           5 years ago
  • 1.1.0                                ...           6 years ago
  • 1.0.2                                ...           6 years ago
  • 1.0.1                                ...           6 years ago
  • 1.0.0                                ...           6 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 2
Dependencies (1)
Dev Dependencies (9)

Copyright 2014 - 2017 © taobao.org |