async-watch
AsyncWatch is a small library for watching javascript/node.js objects. It uses Object.defineProperty which makes it compatible with most browsers. Any changes happening within present tick will be called on the next available one.
Features
- Asynchronous execution (Changes are triggered on
requestAnimationFrame
in browser and onprocess.nextTick
in Node) - Being Asynchronous means we don’t have to worry about the execution flow, details below
- Works in Node and Browser
- No Dirty Checking or
Object.observe
- Using
Object.defineProperty()
makes it compatible with all modern browser down to IE 9 - Order of watchers is preserved
- Deep watch properties
- Ability to inspect change type for Arrays (
init
,splice
,push
) - Computed Properties
- Get old and new values in the change callback
- Can watch any type of Object for example Watching
DOM
Node
properties and attributes - Restoring watchers after objects are destroyed
- Can be used as the back-bone to create a custom efficient two-way binding system
- Comprehensive test coverage
Install
npm install async-watch --save
Examples
var AsyncWatch = AsyncWatch;var obj = {}; // creating an empty object;// You can pass an array as well//AsyncWatch(obj, ['a', 'b', 'c'])
As you can see here, we start with an empty object. AsyncWatch will set a watcher on property "a", which knows about its descendands
obja = b : c : 1 ; objabc = 2; objabc = 3;
The output will look like this:
set 3set 4
Callback is called on "transaction commit". Each transaction is a requestAnimationFrame tick. Surely, initial transaction loop happens when first value is changed.
Worth mentioning: Transactions happen on demand, without "perpetual" loop or/and any other dirty checkers.
Destroying a watcher
Destroys a watcher (does not destroy its descendants or similar watchers)
var watcher = ;watcher;
Watching many objects
watchAll is not implemented yet, however subscriptions are introduced. Each watcher returns a "transaction" / watcher.
var obj = a : 1 b : 2var watcher1 = ;var watcher2 = ;
var subscription = AsyncWatch
Subscribers' callback guarantees all watchers to be in sync.
Outputs:
a : 1 b: 2
Unfortunately, subscriptions won't clean up themselves, you need to do it manually.
subscription;
If you want to unsubscribe and destroy corresponding watchers:
subscription;
Computed properties
You can define a computed property.
var obj = firstName : "Bob" lastName : "Marley" ; objlastName = "Foo";objlastName = "Foo1";;
Watching arrays
var obj = users : name : "John" name : "Bob" ; Triggers events: "init" "push" "splice"
To have better understanding check these test/sync_test.js
Contribution
Contribution is greatly appreciated! Please, run tests before submitting a pull request.