一直以來(lái)，關(guān)注對(duì)象屬性的更改一直是人們追求的目標(biāo)。多年來(lái)，已經(jīng)使用了許多墊片來(lái)監(jiān)聽(tīng)對(duì)象的變化。如今，我們有更好的方法來(lái)偵聽(tīng)對(duì)象更改：Proxy API。Sindre Sorhus創(chuàng)建了 on-change，這是一個(gè)微型JavaScript工具，可讓您偵聽(tīng)JavaScript對(duì)象和數(shù)組上的變化！

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 函數(shù)返回一個(gè)代理，您將使用該代理進(jìn)行任何對(duì)象更改。

使用on-change

傳遞onChange您想要監(jiān)視的對(duì)象和更改處理程序函數(shù)：

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

注意，原始對(duì)象的值也會(huì)改變——這就是代理的美妙之處!還要注意on-change不會(huì)告訴你哪個(gè)屬性發(fā)生了變化;正如Sindre所描述的，用例是在對(duì)象的任何部分發(fā)生更改時(shí)保存對(duì)象(到服務(wù)器，等等)。你也可以在一個(gè)帶有渲染函數(shù)的小庫(kù)中使用ti，當(dāng)屬性發(fā)生變化時(shí)就重新渲染內(nèi)容!

如果你不需要知道哪個(gè)屬性發(fā)生了變化，只要知道某些東西發(fā)生了變化，這個(gè)隨變化的庫(kù)就非常好。