当前位置： 文江博客 Node Package Readme @addr/object_observer 中文文档教程

@addr/object_observer 中文文档教程

发布于 6 年前 浏览 3 项目主页 更新于 2 年前

object_observer

这是一个简单的观察者，它监听任何对象的变化。 这些变化只能是像下面这样的赋值：

const objectToObserve = {
    a: 1
};

objectToObserve.a = 2;

Dependencies

只依赖于events节点模块，不需要安装。 和 ES6 支持。

To run

npm start

To test

npm test

Examples of use

要为属性的更改添加侦听器，请执行以下操作：

const Observer = require('@addr/object_observer');

const objectToObserve = {
    a: 1
};

const observer = new Observer(objectToObserve);
const resultObject = observer.getObject(); // { a: 1 } Same object

observer.subscribe('a', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << just changed from >> ${oldValue} << to >> ${newValue} <<`);
});

resultObject.a = 3;

// Prop >> a << just changed from >> 1 << to >> 3 <<

要删除侦听器：

const Observer = require('@addr/object_observer');

const objectToObserve = {
    a: 1
};

const observer = new Observer(objectToObserve);
const resultObject = observer.getObject(); // { a: 1 } Same object

observer.subscribe('a', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << just changed from >> ${oldValue} << to >> ${newValue} <<`);
});

resultObject.a = 3;

// Prop >> a << just changed from >> 1 << to >> 3 <<

observer.unsubscribe('a');

resultObject.a = 4;

//Nothing gets printed

要使用同一实例创建不同的观察器：

const Observer = require('@addr/object_observer');

const objectToObserve = {
    a: 1
};

const observer = new Observer(objectToObserve);

observer.rebuild({ b: 2 });
observer.subscribe('b', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << just changed from >> ${oldValue} << to >> ${newValue} <<`);
});

const resultObject = observer.getObject(); // { b: 2 }

resultObject.b = 3;

// Prop >> b << just changed from >> 2 << to >> 3 <<

console.log(objectToObserve);

// { a: 1 }

此外，要删除所有侦听器：

const Observer = require('@addr/object_observer');

const objectToObserve = {
    a: 1
};

const observer = new Observer(objectToObserve);

observer.subscribe('a', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << just changed from >> ${oldValue} << to >> ${newValue} <<`);
});

observer.rebuild(objectToObserve);

const resultObject = observer.getObject(); // { a: 1 }


resultObject.a = 3;

// Nothing gets printed

要在更改发生后覆盖：要在更改发生

const Observer = require('@addr/object_observer');

const objectToObserve = {
    a: 1
};

const observer = new Observer(objectToObserve);
const resultObject = observer.getObject(); // { a: 1 } Same object

observer.handle('a', (newValue, propName, oldValue, object) => {
    console.log(`Prop >> ${propName} << has >> ${object[propName]} << and before it had >> ${oldValue} <<`);
    object[propName] = 4;
});

observer.subscribe('a', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << just changed from >> ${objectToObserve[propName]} << to >> ${newValue} <<`);
});

resultObject.a = 3;
// Prop >> a << just changed from >> 1 << to >> 3 <<
// Prop >> a << has >> 3 << and before it had >> 1 <<

console.log(resultObject, objectToObserve);
// { a: 4 } { a: 4 }

后回滚：

const Observer = require('@addr/object_observer');

const objectToObserve = {
    a: 1
};

const observer = new Observer(objectToObserve);
const resultObject = observer.getObject(); // { a: 1 } Same object

observer.handle('a', (newValue, propName, oldValue, object) => {
    console.log(`Prop >> ${propName} << just changed from >> ${object[propName]} << to >> ${newValue} <<`);
    return true;
});

observer.subscribe('a', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << just changed from >> ${objectToObserve[propName]} << to >> ${newValue} <<`);
});

resultObject.a = 3;
// Prop >> a << just changed from >> 1 << to >> 3 <<
// Prop >> a << just changed from >> 3 << to >> 3 <<

console.log(resultObject);
// { a: 1 }

删除句柄侦听器：

const Observer = require('@addr/object_observer');

const objectToObserve = {
    a: 1
};

const observer = new Observer(objectToObserve);
const resultObject = observer.getObject(); // { a: 1 } Same object

observer.handle('a', (newValue, propName, oldValue, object) => {
    console.log(`Prop >> ${propName} << just changed from >> ${object[propName]} << to >> ${newValue} <<`);
    return true;
});

observer.subscribe('a', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << just changed from >> ${objectToObserve[propName]} << to >> ${newValue} <<`);
});

observer.unhandle('a');

resultObject.a = 3;
// Prop >> a << just changed from >> 1 << to >> 3 <<

console.log(resultObject);
// { a: 3 }

Complex examples

您可以在没有任何对象的情况下构建观察者，然后使用观察者提供的对象。 而 oldValue 参数将为空，因为该属性是在更改时创建的。

const Observer = require('@addr/object_observer');

const observer = new Observer();
const resultObject = observer.getObject(); // {}

observer.subscribe('a', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << just changed from >> ${oldValue} << to >> ${newValue} <<`);
});

resultObject.a = 3;

// Prop >> a << just changed from >> null << to >> 3 <<

为了避免死循环，不要像这样直接使用观察者给的对象。

const Observer = require('@addr/object_observer');

const objectToObserve = {
    a: 1
};

const observer = new Observer(objectToObserve);
const resultObject = observer.getObject(); // { a: 1 } Same object

observer.handle('a', (newValue, propName, oldValue, object) => {
    console.log(`Prop >> ${propName} << current value at object >> ${object[propName]} << newValue parameter >> ${newValue} <<`);
    resultObject[propName] = 4;
});

observer.subscribe('a', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << is about to change from >> ${objectToObserve[propName]} << to >> ${newValue} <<`);
});

resultObject.a = 3;
// Prop >> a << is about to change from >> 1 << to >> 3 <<
// Prop >> a << current value at object >> 3 << newValue parameter >> 3 <<
// Prop >> a << is about to change from >> 3 << to >> 4 <<
// Prop >> a << current value at object >> 4 << newValue parameter >> 4 <<
// Prop >> a << is about to change from >> 4 << to >> 4 <<
// Prop >> a << current value at object >> 4 << newValue parameter >> 4 <<
// Prop >> a << is about to change from >> 4 << to >> 4 <<
// Prop >> a << current value at object >> 4 << newValue parameter >> 4 <<
// Prop >> a << is about to change from >> 4 << to >> 4 <<
// Until it breaks

console.log(resultObject);

相反，使用句柄回调中提供的 object 参数。

此外，不要尝试为您的 resultObject 重新分配一些值，因为您将无法收听任何更改。

const Observer = require('@addr/object_observer');

const observer = new Observer();
let resultObject = observer.getObject(); // {}

observer.subscribe('a', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << just changed from >> ${oldValue} << to >> ${newValue} <<`);
});

resultObject = {
    a: 1
};

resultObject.a = 3;

// Nothing gets printed
原文

object_observer

This is a simple observer which listens to changes on any object. These changes can only be asignations like the following:

const objectToObserve = {
    a: 1
};

objectToObserve.a = 2;

Dependencies

Only depends on events node module, which does not need to be installed. And ES6 support.

To run

npm start

To test

npm test

Examples of use

To add a listener for changes on a property do the following:

const Observer = require('@addr/object_observer');

const objectToObserve = {
    a: 1
};

const observer = new Observer(objectToObserve);
const resultObject = observer.getObject(); // { a: 1 } Same object

observer.subscribe('a', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << just changed from >> ${oldValue} << to >> ${newValue} <<`);
});

resultObject.a = 3;

// Prop >> a << just changed from >> 1 << to >> 3 <<

To remove a listener:

const Observer = require('@addr/object_observer');

const objectToObserve = {
    a: 1
};

const observer = new Observer(objectToObserve);
const resultObject = observer.getObject(); // { a: 1 } Same object

observer.subscribe('a', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << just changed from >> ${oldValue} << to >> ${newValue} <<`);
});

resultObject.a = 3;

// Prop >> a << just changed from >> 1 << to >> 3 <<

observer.unsubscribe('a');

resultObject.a = 4;

//Nothing gets printed

To create a different observer with the same instance:

const Observer = require('@addr/object_observer');

const objectToObserve = {
    a: 1
};

const observer = new Observer(objectToObserve);

observer.rebuild({ b: 2 });
observer.subscribe('b', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << just changed from >> ${oldValue} << to >> ${newValue} <<`);
});

const resultObject = observer.getObject(); // { b: 2 }

resultObject.b = 3;

// Prop >> b << just changed from >> 2 << to >> 3 <<

console.log(objectToObserve);

// { a: 1 }

Also, to remove all listeners:

const Observer = require('@addr/object_observer');

const objectToObserve = {
    a: 1
};

const observer = new Observer(objectToObserve);

observer.subscribe('a', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << just changed from >> ${oldValue} << to >> ${newValue} <<`);
});

observer.rebuild(objectToObserve);

const resultObject = observer.getObject(); // { a: 1 }


resultObject.a = 3;

// Nothing gets printed

To overwrite the change after it happened:

const Observer = require('@addr/object_observer');

const objectToObserve = {
    a: 1
};

const observer = new Observer(objectToObserve);
const resultObject = observer.getObject(); // { a: 1 } Same object

observer.handle('a', (newValue, propName, oldValue, object) => {
    console.log(`Prop >> ${propName} << has >> ${object[propName]} << and before it had >> ${oldValue} <<`);
    object[propName] = 4;
});

observer.subscribe('a', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << just changed from >> ${objectToObserve[propName]} << to >> ${newValue} <<`);
});

resultObject.a = 3;
// Prop >> a << just changed from >> 1 << to >> 3 <<
// Prop >> a << has >> 3 << and before it had >> 1 <<

console.log(resultObject, objectToObserve);
// { a: 4 } { a: 4 }

To rollback the change after it happened:

const Observer = require('@addr/object_observer');

const objectToObserve = {
    a: 1
};

const observer = new Observer(objectToObserve);
const resultObject = observer.getObject(); // { a: 1 } Same object

observer.handle('a', (newValue, propName, oldValue, object) => {
    console.log(`Prop >> ${propName} << just changed from >> ${object[propName]} << to >> ${newValue} <<`);
    return true;
});

observer.subscribe('a', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << just changed from >> ${objectToObserve[propName]} << to >> ${newValue} <<`);
});

resultObject.a = 3;
// Prop >> a << just changed from >> 1 << to >> 3 <<
// Prop >> a << just changed from >> 3 << to >> 3 <<

console.log(resultObject);
// { a: 1 }

To remove handle listener:

const Observer = require('@addr/object_observer');

const objectToObserve = {
    a: 1
};

const observer = new Observer(objectToObserve);
const resultObject = observer.getObject(); // { a: 1 } Same object

observer.handle('a', (newValue, propName, oldValue, object) => {
    console.log(`Prop >> ${propName} << just changed from >> ${object[propName]} << to >> ${newValue} <<`);
    return true;
});

observer.subscribe('a', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << just changed from >> ${objectToObserve[propName]} << to >> ${newValue} <<`);
});

observer.unhandle('a');

resultObject.a = 3;
// Prop >> a << just changed from >> 1 << to >> 3 <<

console.log(resultObject);
// { a: 3 }

Complex examples

You can build the observer without any object and after that use the object given by the observer. And the oldValue parameter will be null because the attribute was created at the change moment.

const Observer = require('@addr/object_observer');

const observer = new Observer();
const resultObject = observer.getObject(); // {}

observer.subscribe('a', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << just changed from >> ${oldValue} << to >> ${newValue} <<`);
});

resultObject.a = 3;

// Prop >> a << just changed from >> null << to >> 3 <<

In order to avoid infinite loop, don't use the object given by observer directly like this.

const Observer = require('@addr/object_observer');

const objectToObserve = {
    a: 1
};

const observer = new Observer(objectToObserve);
const resultObject = observer.getObject(); // { a: 1 } Same object

observer.handle('a', (newValue, propName, oldValue, object) => {
    console.log(`Prop >> ${propName} << current value at object >> ${object[propName]} << newValue parameter >> ${newValue} <<`);
    resultObject[propName] = 4;
});

observer.subscribe('a', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << is about to change from >> ${objectToObserve[propName]} << to >> ${newValue} <<`);
});

resultObject.a = 3;
// Prop >> a << is about to change from >> 1 << to >> 3 <<
// Prop >> a << current value at object >> 3 << newValue parameter >> 3 <<
// Prop >> a << is about to change from >> 3 << to >> 4 <<
// Prop >> a << current value at object >> 4 << newValue parameter >> 4 <<
// Prop >> a << is about to change from >> 4 << to >> 4 <<
// Prop >> a << current value at object >> 4 << newValue parameter >> 4 <<
// Prop >> a << is about to change from >> 4 << to >> 4 <<
// Prop >> a << current value at object >> 4 << newValue parameter >> 4 <<
// Prop >> a << is about to change from >> 4 << to >> 4 <<
// Until it breaks

console.log(resultObject);

Instead, use the object parameter given at handle's callback.

Also, don't try to re-assign some value to your resultObject because you won't be able to listen to any changes.

const Observer = require('@addr/object_observer');

const observer = new Observer();
let resultObject = observer.getObject(); // {}

observer.subscribe('a', (newValue, propName, oldValue) => {
    console.log(`Prop >> ${propName} << just changed from >> ${oldValue} << to >> ${newValue} <<`);
});

resultObject = {
    a: 1
};

resultObject.a = 3;

// Nothing gets printed
更多

你可能也喜欢

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文