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.