smart-observe
v1.0.4
Published
smart-observe comes from Vue.js and is a small, efficient library for observing changes of javascript Object, Array and Class.
Downloads
30
Maintainers
Readme
中文 | English
smart-observe
smart-observe comes from Vue.js and is a small, efficient library for observing changes of javascript Object, Array and Class.
Installation
npm install --save smart-observe
or
bower install --save smart-observe
Usage
To watch expression. observe.watch(target, expression, callback)
or observe(target, expression, callback)
const target = {a: 1}
observe(target, 'a', function (newValue, oldValue) {
console.log(newValue, oldValue)
})
target.a = 3
// 3 1
To add computed property. observe.compute(target, name, getter)
const target = {a: 1}
observe.compute(target, 'b', function () {
return this.a * 2
})
console.log(target.b)
// 2
target.a = 3
console.log(target.b)
// 6
To watch expressions and computed properties. observe.react(options)
const options = {
data: {
PI: Math.PI,
radius: 1,
},
computed: {
'area': function () {
return this.PI * this.square(this.radius) // πr²
},
},
watchers: {
'area': function (newValue, oldValue) {
console.log(`area: ${newValue}`)
},
},
methods: {
square (num) {
return num * num
},
},
}
const target = observe.react(options)
target.radius = 3
// area: 28.274333882308138
API
properties
| name | type | value | detail |
| --- | --- | --- | --- |
| observe.deep
| Boolean
| The default is false
| If true
, observe.watch(target, expression, callback)
will observe target
deeply |
| observe.sync
| Boolean
| The default is false
| If true
, observe.watch(target, expression, callback)
will invoke callback immediately when a property change is detected |
| observe.default
| Function
| Could only be one of observe.react
, observe.watch
and observe.compute
. The default is observe.watch
| Set actual method to observe.default
for observe(...)
|
methods
observe(...)
- It's syntactic sugar of
observe.default
. See 'properties' for details
observe.watch(target, expression, callback)
target
: Any objectexpression
:String
orFunction
callback
:Function
- Returns
Watcher
. And callingwatcher.teardown()
could unwatch expression
observe.compute(target, name, accessor, cache)
target
: Any objectname
:String
accessor
:Function
: It will be theget
of accessorObject
: Contains: (at leastget
orset
)get
:Function
set
:Function
cache
:Boolean
. Optional. The default istrue
. Iffalse
, theget
will be evaluated whenever reading computed properties
cache
:Boolean
. Same asaccessor.cache
observe.react(options, target)
options
:Object
. Contains:data
: It's the properties to addcomputed
: It's the computed properties to addwatchers
: It's the watchers to watch properties or computed propertiesmethods
: The methods to add. And these will bind totarget
target
: Any object. Optional. The default is empty object. It will be attached with the fields ofoptions
- returns
target