Sledujte změny objektů pomocí JavaScriptu

Sledování změn vlastností objektu bylo vždy velmi vyhledávaným úkolem; mnoho podložek bylo v průběhu let použito k poslechu změn objektů. V současné době máme lepší metody pro naslouchání změnám objektů:  Proxy API. Sindre Sorhus vytvořil on-change, malý nástroj JavaScriptu, který vám umožňuje naslouchat změnám objektů a polí JavaScriptu!

JavaScript při změně

Protože je kód při změně tak malý, zde je ve své plné kráse:

'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 funkce vrací proxy, kterou použijete k provedení jakýchkoli změn objektu.

Používání při změně

Předejte onChange objekt, který chcete špehovat, a funkci obsluhy změn:

let j = {
    a: 1
};

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

Poté pomocí tohoto proxy změňte vlastnosti a získejte upozornění na změny:


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

// save() is triggered!

// j.a === 2

Všimněte si, že se mění i hodnoty původního objektu -- to je krása Proxy! Všimněte si také, že on-change vám neřekne, která vlastnost se změnila; případ použití, jak popisuje Sindre, je uložení objektu (na server atd.), když se jakákoliv část objektu změní. Můžete také použít ti pro malou knihovnu s funkcí vykreslování, která znovu vykreslí obsah, kdykoli se změní vlastnost!

Tato knihovna při změně je opravdu pěkná, pokud nepotřebujete vědět, která vlastnost se změnila, jen to něco změněno.