objectwatchers
Object value and prop change detection module
- Object, Array, Web Global value watcher
Install
- npm install objectwarchers
Support features:
- browser support(UMD module)
/dist/lib.bundle.umd.js
- typescript support
lib.d.ts
- nodejs support
/dist/lib.bundle.prod.js
- Watch object variable change
- RXjs Subject Support
- windows message Support
- Watch object Propery(Key) change(added property notify)
- RXjs Subject Support
- windows message Support
- Watch object Propery(Key) Delete
- RXjs Subject Support
- windows message Support
- Watch Array variable change
- RXjs Subject Support
- windows message Support
- Watch Array Sort(Order) change
- RXjs Subject Support
- windows message Support
dependency:
- rxjs
APIs
ObjectWatcher
-
Object and Array Watcher module
-
Use Proxy
-
Interface
- IWatcherInfo
- origin: top parent object - target: target object - prop: property name or index - oldValue: old value of object[property] - oldValue: new value of object[property] - propDepth: object property depth array - A { name: { sub: 'change' } } - if change A.name.sub - propDepth ['name'] - we can 'property name' from prop - A { name: { sub: { sub2: 'change2' } } } - if change A.name.sub.sub2 - propDepth ['name','sub'] - we can 'property name' from prop
-
Method
- getter
- proxy : return new proxy object
- valueChangeSubject : return value change subject
- subject data: IWatcherInfo
- propChangeSubject : return property change subject
- subject data: IWatcherInfo
- orderChangerSubject : return new order change subject
- subject data: changed indices array
- getter
-
Window Event(browser only)
- changeObjectValues
- changeObjectProps
- changeArrayOrder
- deleteObjectProp
GlobalLiteralWatcher
-
Global variable(literal) Watcher module
-
Interface
- IWatcherInfo
- target: target object - prop: property name or index - oldValue: old value of object[property] - oldValue: new value of object[property]
-
Method
- getter
- proxy : return new proxy object
- valueChangeSubject : return value change subject
- subject data: IWatcherInfo
- watch(): start watch variable
- stopWatch(): stop watch variable
- getter
-
Window Event(browser only)
- onGlobalVarChange
How to Use
-
Typescript
- Object Value and Propery change watch
;/*** Object Watcher Rxjs Subject Example code*/console.log'original testObject is: ', testObject;//Make Object Watcher;//Getting proxy object, original object convert to proxy objecttestObject = testWatcher.proxy;/*** subscribe valueChangeSubject* this occur before object property value is changed*/testWatcher.valueChangeSubject.subscribe/*** subscribe propChangeSubject* this occur before object property is added*/testWatcher.propChangeSubject.subscribe//try change object property valuetestObject.name = 'this is name2';//try add object propertytestObject = 'this is name2';- Array Value and Order change watch
;/*** Object Watcher Rxjs Subject Example code*/;//Make Object Watcher;//Getting proxy object, original object convert to proxy objecttestArray = testArrayWatcher.proxy;console.log`original array is `;/*** subscribe valueChangeSubject* this occur before array property value is changed*/testArrayWatcher.valueChangeSubject.subscribe;/*** subscribe propChangeSubject* this occur before array property value is changed*/testArrayWatcher.propChangeSubject.subscribe;/*** subscribe propChangeSubject* this occur before array order is changed*/testArrayWatcher.orderChangerSubject.subscribe;testArray = testArray.sort;testArray.push100; -
Nodejs
- Object Value and Propery change watch
const ObjectWatcher = ObjectWatcher;/*** Object Watcher Rxjs Subject Example code*/let testObject =name: 'this is name'console;//Make Object Watcherconst testWatcher = testObject;//Getting proxy object, original object convert to proxy objecttestObject = testWatcherproxy;/*** subscribe valueChangeSubject* this occur before object property value is changed*/testWatchervalueChangeSubject/*** subscribe propChangeSubject* this occur before object property is added*/testWatcherpropChangeSubject//try change object property valuetestObjectname = 'this is name2';//try add object propertytestObject'name2' = 'this is name2';testWatcherpropDeleteSubject;delete testObject'obj''namesss2'- Array Value and Order change watch
const ObjectWatcher = ObjectWatcher;/*** Object Watcher Rxjs Subject Example code*/let testArray = 12354879;//Make Object Watcherconst testArrayWatcher = testArray;//Getting proxy object, original object convert to proxy objecttestArray = testArrayWatcherproxy;console;/*** subscribe valueChangeSubject* this occur before array property value is changed*/testArrayWatchervalueChangeSubject;/*** subscribe propChangeSubject* this occur before array property value is changed*/testArrayWatcherpropChangeSubject;/*** subscribe propChangeSubject* this occur before array order is changed*/testArrayWatcherorderChangerSubject;testArray = testArray;testArray; -
Global Value change watch(only for web browser)
<head><script src="../../dist/lib.bundle.umd.js"></script></head>test = 'james.eo';const gWatcher = ;gWatcher;gWatchervalueChangeSubjectwindow;test = 'james.eo2';