观察JavaScript中对象的变化

一直以来，关注对象属性的更改一直是人们追求的目标。多年来，已经使用了许多垫片来监听对象的变化。如今，我们有更好的方法来侦听对象更改：Proxy API。Sindre Sorhus创建了 on-change，这是一个微型JavaScript工具，可让您侦听JavaScript对象和数组上的变化！

on-change JavaScript

由于on-change的代码是如此之小，因此这里充满了荣耀：

'use strict';

module.exports = (object, onChange) => {
 const handler = {
 get(target, property, receiver) {
 try {
 return new Proxy(target[property], handler);
 } catch (err) {
 return Reflect.get(target, property, receiver);
 }
 },
 defineProperty(target, property, descriptor) {
 onChange();
 return Reflect.defineProperty(target, property, descriptor);
 },
 deleteProperty(target, property) {
 onChange();
 return Reflect.deleteProperty(target, property);
 }
 };
 

 return new Proxy(object, handler);
};

该onChange 函数返回一个代理，您将使用该代理进行任何对象更改。

使用on-change

传递onChange您想要监视的对象和更改处理程序函数：

let j = {
    a: 1
};

// Upon change, save to server
let changeable = onChange(j, () => save(j));

然后使用该代理更改属性并获得更改通知：

// Make a change that would trigger changes
changeable.a = 2;

// save() is triggered!

// j.a === 2

注意，原始对象的值也会改变——这就是代理的美妙之处!还要注意on-change不会告诉你哪个属性发生了变化;正如Sindre所描述的，用例是在对象的任何部分发生更改时保存对象(到服务器，等等)。你也可以在一个带有渲染函数的小库中使用ti，当属性发生变化时就重新渲染内容!

如果你不需要知道哪个属性发生了变化，只要知道某些东西发生了变化，这个随变化的库就非常好。