Vzory JavaScript Proxy: Zvládnutie modifikácie správania objektov

Objekt JavaScript Proxy poskytuje výkonný mechanizmus na zachytávanie a prispôsobovanie základných operácií na objektoch. Táto schopnosť otvára dvere širokej škále návrhových vzorov a pokročilých techník na kontrolu správania objektov. Tento komplexný sprievodca preskúmava rôzne vzory Proxy a ilustruje ich použitie na praktických príkladoch kódu.

Čo je to JavaScript Proxy?

Objekt Proxy obaľuje iný objekt (cieľ) a zachytáva jeho operácie. Tieto operácie, známe ako pasce (traps), zahŕňajú vyhľadávanie vlastností, priraďovanie, enumeráciu a volanie funkcií. Proxy vám umožňuje definovať vlastnú logiku, ktorá sa vykoná pred, po alebo namiesto týchto operácií. Jadrom konceptu Proxy je "metaprogramovanie", ktoré vám umožňuje manipulovať so správaním samotného jazyka JavaScript.

Základná syntax na vytvorenie Proxy je:

const proxy = new Proxy(target, handler);

• target: Pôvodný objekt, ktorý chcete použiť ako proxy.
• handler: Objekt obsahujúci metódy (pasce), ktoré definujú, ako Proxy zachytáva operácie na cieli.

Bežné Proxy pasce (traps)

Objekt handler môže definovať niekoľko pascí. Tu sú niektoré z najčastejšie používaných:

• get(target, property, receiver): Zachytáva prístup k vlastnosti (napr. obj.property).
• set(target, property, value, receiver): Zachytáva priradenie vlastnosti (napr. obj.property = value).
• has(target, property): Zachytáva operátor in (napr. 'property' in obj).
• deleteProperty(target, property): Zachytáva operátor delete (napr. delete obj.property).
• apply(target, thisArg, argumentsList): Zachytáva volania funkcií (keď je cieľom funkcia).
• construct(target, argumentsList, newTarget): Zachytáva operátor new (keď je cieľom konštruktorová funkcia).
• getPrototypeOf(target): Zachytáva volania Object.getPrototypeOf().
• setPrototypeOf(target, prototype): Zachytáva volania Object.setPrototypeOf().
• isExtensible(target): Zachytáva volania Object.isExtensible().
• preventExtensions(target): Zachytáva volania Object.preventExtensions().
• getOwnPropertyDescriptor(target, property): Zachytáva volania Object.getOwnPropertyDescriptor().
• defineProperty(target, property, descriptor): Zachytáva volania Object.defineProperty().
• ownKeys(target): Zachytáva volania Object.getOwnPropertyNames() a Object.getOwnPropertySymbols().

Vzory Proxy a prípady použitia

Pozrime sa na niektoré bežné vzory Proxy a ako ich možno aplikovať v reálnych scenároch:

1. Validácia

Vzor Validácia používa Proxy na vynútenie obmedzení pri priraďovaní vlastností. Je to užitočné na zabezpečenie integrity dát.

const validator = {
  set: function(obj, prop, value) {
    if (prop === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('Vek nie je celé číslo');
      }
      if (value < 0) {
        throw new RangeError('Vek musí byť nezáporné celé číslo');
      }
    }

    // Predvolené správanie na uloženie hodnoty
    obj[prop] = value;

    // Označenie úspechu
    return true;
  }
};

let person = {};
let proxy = new Proxy(person, validator);

proxy.age = 25; // Platné
console.log(proxy.age); // Výstup: 25

try {
  proxy.age = 'young'; // Vyvolá TypeError
} catch (e) {
  console.log(e); // Výstup: TypeError: Vek nie je celé číslo
}

try {
  proxy.age = -10; // Vyvolá RangeError
} catch (e) {
  console.log(e); // Výstup: RangeError: Vek musí byť nezáporné celé číslo
}

Príklad: Predstavte si e-commerce platformu, kde je potrebné validovať údaje používateľov. Proxy môže vynútiť pravidlá pre vek, formát e-mailu, silu hesla a ďalšie polia, čím zabráni uloženiu neplatných údajov.

2. Virtualizácia (Lazy Loading)

Virtualizácia, známa tiež ako lazy loading (lenivé načítanie), odkladá načítanie náročných zdrojov, kým nie sú skutočne potrebné. Proxy môže fungovať ako zástupný symbol pre skutočný objekt a načítať ho až vtedy, keď sa pristupuje k jeho vlastnosti.

const expensiveData = {
  load: function() {
    console.log('Načítavajú sa náročné dáta...');
    // Simulácia časovo náročnej operácie (napr. získavanie z databázy)
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({
          data: 'Toto sú náročné dáta'
        });
      }, 2000);
    });
  }
};

const lazyLoadHandler = {
  get: function(target, prop) {
    if (prop === 'data') {
      console.log('Pristupuje sa k dátam, v prípade potreby sa načítajú...');
      return target.load().then(result => {
        target.data = result.data; // Uloženie načítaných dát
        return result.data;
      });
    } else {
      return target[prop];
    }
  }
};

const lazyData = new Proxy(expensiveData, lazyLoadHandler);

console.log('Počiatočný prístup...');
lazyData.data.then(data => {
  console.log('Dáta:', data); // Výstup: Dáta: Toto sú náročné dáta
});

console.log('Následný prístup...');
lazyData.data.then(data => {
  console.log('Dáta:', data); // Výstup: Dáta: Toto sú náročné dáta (načítané z cache)
});

Príklad: Predstavte si veľkú platformu sociálnych médií s profilmi používateľov, ktoré obsahujú množstvo detailov a priradených médií. Okamžité načítanie všetkých údajov profilu môže byť neefektívne. Virtualizácia pomocou Proxy umožňuje najprv načítať základné informácie o profile a až potom načítať ďalšie detaily alebo mediálny obsah, keď používateľ prejde do týchto sekcií.

3. Záznam a sledovanie

Proxy je možné použiť na sledovanie prístupu k vlastnostiam a ich modifikácií. To je cenné pre ladenie, auditovanie a monitorovanie výkonu.

const logHandler = {
  get: function(target, prop, receiver) {
    console.log(`GET ${prop}`);
    return Reflect.get(target, prop, receiver);
  },
  set: function(target, prop, value) {
    console.log(`SET ${prop} na ${value}`);
    target[prop] = value;
    return true;
  }
};

let obj = { name: 'Alice' };
let proxy = new Proxy(obj, logHandler);

console.log(proxy.name); // Výstup: GET name, Alice
proxy.age = 30; // Výstup: SET age na 30

Príklad: V aplikácii na kolaboratívnu úpravu dokumentov môže Proxy sledovať každú zmenu vykonanú v obsahu dokumentu. To umožňuje vytvoriť auditnú stopu, aktivovať funkcie späť/znova a poskytovať prehľad o príspevkoch používateľov.

4. Zobrazenia iba na čítanie

Proxy môžu vytvárať zobrazenia objektov iba na čítanie, čím sa zabráni náhodným modifikáciám. Je to užitočné na ochranu citlivých údajov.

const readOnlyHandler = {
  set: function(target, prop, value) {
    console.error(`Nie je možné nastaviť vlastnosť ${prop}: objekt je iba na čítanie`);
    return false; // Označenie, že operácia set zlyhala
  },
  deleteProperty: function(target, prop) {
    console.error(`Nie je možné odstrániť vlastnosť ${prop}: objekt je iba na čítanie`);
    return false; // Označenie, že operácia delete zlyhala
  }
};

let data = { name: 'Bob', age: 40 };
let readOnlyData = new Proxy(data, readOnlyHandler);

try {
  readOnlyData.age = 41; // Vyvolá chybu
} catch (e) {
  console.log(e); // Chyba sa nevyvolá, pretože pasca 'set' vracia false.
}

try {
    delete readOnlyData.name; // Vyvolá chybu
} catch (e) {
    console.log(e); // Chyba sa nevyvolá, pretože pasca 'deleteProperty' vracia false.
}

console.log(data.age); // Výstup: 40 (nezmenené)

Príklad: Predstavte si finančný systém, kde niektorí používatelia majú prístup k informáciám o účte iba na čítanie. Proxy možno použiť na zabránenie týmto používateľom modifikovať zostatky na účtoch alebo iné kritické údaje.

5. Predvolené hodnoty

Proxy môže poskytnúť predvolené hodnoty pre chýbajúce vlastnosti. Tým sa zjednodušuje kód a predchádza sa kontrolám na null/undefined.

const defaultValuesHandler = {
  get: function(target, prop, receiver) {
    if (!(prop in target)) {
      console.log(`Vlastnosť ${prop} nebola nájdená, vracia sa predvolená hodnota.`);
      return 'Default Value'; // Alebo akúkoľvek inú vhodnú predvolenú hodnotu
    }
    return Reflect.get(target, prop, receiver);
  }
};

let config = { apiUrl: 'https://api.example.com' };
let configWithDefaults = new Proxy(config, defaultValuesHandler);

console.log(configWithDefaults.apiUrl); // Výstup: https://api.example.com
console.log(configWithDefaults.timeout); // Výstup: Vlastnosť timeout nebola nájdená, vracia sa predvolená hodnota. Default Value

Príklad: V systéme správy konfigurácií môže Proxy poskytnúť predvolené hodnoty pre chýbajúce nastavenia. Napríklad, ak konfiguračný súbor nešpecifikuje časový limit pripojenia k databáze, Proxy môže vrátiť preddefinovanú predvolenú hodnotu.

6. Metadáta a anotácie

Proxy môžu k objektom pripájať metadáta alebo anotácie, čím poskytujú dodatočné informácie bez modifikácie pôvodného objektu.

const metadataHandler = {
  get: function(target, prop, receiver) {
    if (prop === '__metadata__') {
      return { description: 'Toto sú metadáta pre objekt' };
    }
    return Reflect.get(target, prop, receiver);
  }
};

let article = { title: 'Úvod do Proxies', content: '...' };
let articleWithMetadata = new Proxy(article, metadataHandler);

console.log(articleWithMetadata.title); // Výstup: Úvod do Proxies
console.log(articleWithMetadata.__metadata__.description); // Výstup: Toto sú metadáta pre objekt

Príklad: V systéme na správu obsahu (CMS) môže Proxy k článkom pripájať metadáta, ako sú informácie o autorovi, dátum publikácie a kľúčové slová. Tieto metadáta možno použiť na vyhľadávanie, filtrovanie a kategorizáciu obsahu.

7. Zachytávanie funkcií

Proxy môžu zachytávať volania funkcií, čo vám umožňuje pridať logovanie, validáciu alebo inú logiku pred alebo po spracovaní.

const functionInterceptor = {
  apply: function(target, thisArg, argumentsList) {
    console.log('Volá sa funkcia s argumentmi:', argumentsList);
    const result = target.apply(thisArg, argumentsList);
    console.log('Funkcia vrátila:', result);
    return result;
  }
};

function add(a, b) {
  return a + b;
}

let proxiedAdd = new Proxy(add, functionInterceptor);

let sum = proxiedAdd(5, 3); // Výstup: Volá sa funkcia s argumentmi: [5, 3], Funkcia vrátila: 8
console.log(sum); // Výstup: 8

Príklad: V bankovej aplikácii môže Proxy zachytávať volania transakčných funkcií, zaznamenávať každú transakciu a vykonávať kontroly na odhalenie podvodov pred vykonaním transakcie.

8. Zachytávanie konštruktorov

Proxy môžu zachytávať volania konštruktorov, čo vám umožňuje prispôsobiť vytváranie objektov.

const constructorInterceptor = {
  construct: function(target, argumentsList, newTarget) {
    console.log('Vytvára sa nová inštancia', target.name, 's argumentmi:', argumentsList);
    const obj = new target(...argumentsList);
    console.log('Nová inštancia vytvorená:', obj);
    return obj;
  }
};

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

let ProxiedPerson = new Proxy(Person, constructorInterceptor);

let person = new ProxiedPerson('Alice', 28); // Výstup: Vytvára sa nová inštancia Person s argumentmi: ['Alice', 28], Nová inštancia vytvorená: Person { name: 'Alice', age: 28 }
console.log(person);

Príklad: V rámci pre vývoj hier môže Proxy zachytávať vytváranie herných objektov, automaticky im prideľovať jedinečné ID, pridávať predvolené komponenty a registrovať ich v hernom engine.

Pokročilé úvahy

• Výkon: Hoci Proxy ponúkajú flexibilitu, môžu priniesť výkonnostnú réžiu. Je dôležité testovať a profilovať váš kód, aby ste sa uistili, že výhody použitia Proxy prevážia nad nákladmi na výkon, najmä v aplikáciách kritických na výkon.
• Kompatibilita: Proxy sú relatívne novým prídavkom do JavaScriptu, takže staršie prehliadače ich nemusia podporovať. Použite detekciu funkcií alebo polyfilly na zabezpečenie kompatibility so staršími prostrediami.
• Odvolateľné Proxy: Metóda Proxy.revocable() vytvára Proxy, ktoré je možné odvolať. Odvolanie Proxy zabráni zachytávaniu akýchkoľvek ďalších operácií. To môže byť užitočné na účely bezpečnosti alebo správy zdrojov.
• Reflect API: API Reflect poskytuje metódy na vykonanie predvoleného správania pascí Proxy. Použitie Reflect zaisťuje, že váš kód s Proxy sa bude správať konzistentne so špecifikáciou jazyka.

Záver

JavaScript Proxy poskytujú výkonný a všestranný mechanizmus na prispôsobenie správania objektov. Zvládnutím rôznych vzorov Proxy môžete písať robustnejší, udržateľnejší a efektívnejší kód. Či už implementujete validáciu, virtualizáciu, sledovanie alebo iné pokročilé techniky, Proxy ponúkajú flexibilné riešenie na kontrolu prístupu k objektom a ich manipulácie. Vždy zvažujte dôsledky na výkon a zabezpečte kompatibilitu s vašimi cieľovými prostrediami. Proxy sú kľúčovým nástrojom v arzenáli moderného JavaScript vývojára, ktorý umožňuje výkonné metaprogramovacie techniky.

Ďalšie zdroje

• Mozilla Developer Network (MDN): JavaScript Proxy
• Skúmanie JavaScript Proxies: Článok v Smashing Magazine