@xpf0000/objectobserver

1.0.17 • Public • Published

ObjectObserver

Latest Version on NPM Software License npm

JS Object Observer, Build on the basis of ES6 proxy, use like vue's watch

Support circular reference

Can set watch depth and silence watch

Table of Contents

Install and basic usage

$ npm install --save @xpf0000/objectobserver
import { Watcher, watch, unWatch } from "@xpf0000/objectobserver"
let obj = { a: 0, b: { b0: 1 } }
obj = Watcher(obj)
let config = {
    '*': {
        handler(newVal, oldVal) {}
     },
     a: function (newVal, oldVal) {},
     b: {
        handler(newVal, oldVal) {},
        deep: true
     },
     'b.b0': function(newVal, oldVal) {}
}
watch(obj, config)
obj.a = 1
obj.c = 0
obj.b.b0 = 2

let arr = Watcher([])
let arr1 = Watcher(arr)
let arr2 = Watcher(arr)
let config1 = {
    '*': {
        handler(newVal, oldVal) {}
    },
}
let config2 = {
    '*': {
        handler(newVal, oldVal) {}
    },
}
watch(arr1, config1)
watch(arr2, config2)
arr.push(0)
arr1.push(1)
arr2.push(2)
unWatch(arr2, config2)

Watcher options

depth

set watch depth, default whole object

import {Watcher, watch, unWatch } from "@xpf0000/objectobserver"
let obj = { a: 0, b: { b0: 1 } }
obj = Watcher(obj, 1)
let config = {
    '*': {
        handler(newVal, oldVal) {}
    },
}
watch(obj, config)
obj.b.b0 = 2 //won't trigger
obj.a = 1 // trigger
obj.c = 0 // trigger

Watch item options

deep

Only observe this level or observe this level and subordinate level

import { Watcher, watch, unWatch } from "@xpf0000/objectobserver"
let obj = { a: 0, b: { b0: 1 } }
obj = Watcher(obj)
let config = {
    'b': {
        handler(newVal, oldVal) {},
        deep: false
    },
}
watch(obj, config)
obj.b = { c: 0 } // trigger
obj.b.c = 1 //won't trigger if deep is false

Methods

watch

import { Watcher, watch, unWatch } from "@xpf0000/objectobserver"
let obj = { a: 0, b: { b0: 1 } }
obj = Watcher(obj)
watch(obj, {...})
watch(obj, {...}, this) // set handler's run env
let watcher = watch(obj, {...})
watch.unWatch() // only clean this watcher

unWatch

import { Watcher, watch, unWatch } from "@xpf0000/objectobserver"
let obj = { a: 0, b: { b0: 1 } }
obj = Watcher(obj)
unWatch(obj, {...}) // only clean this watcher
unWatch(obj) // clean all watcher

Contributing

Any contribution to the code or any part of the documentation and any idea and/or suggestion are very welcome.

# serve with hot reload at localhost:8080
npm run serve

# run test
npm run test

# distribution build-bundle
npm run build

License

The MIT License (MIT). Please see License File for more information.

Package Sidebar

Install

npm i @xpf0000/objectobserver

Weekly Downloads

3

Version

1.0.17

License

MIT

Unpacked Size

21.1 kB

Total Files

7

Last publish

Collaborators

  • xpf0000