一个 Javascript 对象与数组观察器。基于 Proxy API。
npm install @tarocch1/observer
<script src="https://cdn.jsdelivr.net/npm/@tarocch1/observer/dist/index.umd.js"></script>
<script>
const object = {
foo: false,
a: {
b: [
{
c: false,
},
],
},
};
let i = 0;
const observedObject = Observer.observe(object, function (path, previousValue, value) {
console.log('Object changed:', ++i);
console.log('this:', this);
console.log('path:', path);
console.log('previousValue:', previousValue);
console.log('value:', value);
});
observedObject.foo = true;
//=> 'Object changed: 1'
//=> 'this: {
// foo: true,
// a: {
// b: [
// {
// c: false
// }
// ]
// }
// }'
//=> 'path: ["foo"]'
//=> 'previousValue: false'
//=> 'value: true'
</script>
const { observe, observed, unobserve } = require('@tarocch1/observer');
const object = {
foo: false,
a: {
b: [
{
c: false,
},
],
},
};
let i = 0;
const observedObject = observe(object, function (path, previousValue, value) {
console.log('Object changed:', ++i);
console.log('this:', this);
console.log('path:', path);
console.log('previousValue:', previousValue);
console.log('value:', value);
});
observedObject.foo = true;
//=> 'Object changed: 1'
//=> 'this: {
// foo: true,
// a: {
// b: [
// {
// c: false
// }
// ]
// }
// }'
//=> 'path: ["foo"]'
//=> 'previousValue: false'
//=> 'value: true'
observedObject.a.b[0].c = true;
//=> 'Object changed: 2'
//=> 'this: {
// foo: true,
// a: {
// b: [
// {
// c: true
// }
// ]
// }
// }'
//=> 'path: ["a", "b", "0", "c"]'
//=> 'previousValue: false'
//=> 'value: true'
// Access the original object
observed(observedObject).foo = false;
// Callback isn't called
// Unobserve
unobserve(observedObject);
observedObject.foo = 'bar';
// Callback isn't called
设置对对象的观察,返回被观察对象。
Type: object
| array
要观察的对象。
Type: Function
对象发生变化时的回调。
Type: Array<string | symbol>
发生变化的属性的路径。
Type: any
变化前的值。
Type: any
变化后的值。
Type: object
配置项。
Type: boolean
Default: false
设置为 true
后,深层变化不会触发回调。
Type: Function
Default: Object.is
用于判断值是否发生变化的函数,接受两个值,如果两个值不等,返回 true
。
Type: boolean
Default: false
设置为 true
后,属性名为 Symbol
的值发生变化不会触发回调。
Type: boolean
Default: false
设置为 true
后,属性名以下划线开头的值发生变化不会触发回调。
Type: Array<string | symbol>
Default: []
属性名存在于该配置中的值发生变化时不会触发回调。
返回与被观察对象对应的原始对象,对原始对象进行操作不会触发回调。
Type: object
由 observe
函数返回的被观察对象。
取消对被观察对象的观察,返回与被观察对象对应的原始对象,取消后对被观察对象进项操作不会触发回调。
Type: object
由 observe
函数返回的被观察对象。
本项目基于 sindresorhus/on-change,进行了部分精简并修改了几个 bug。