Pattern Proxy in JavaScript: Intercettazione e Validazione Avanzata degli Oggetti

L'oggetto Proxy di JavaScript è una potente funzionalità che permette di intercettare e personalizzare le operazioni fondamentali sugli oggetti. Abilita tecniche avanzate di metaprogrammazione, offrendo un maggiore controllo sul comportamento degli oggetti e aprendo possibilità per sofisticati design pattern. Questo articolo esplora vari pattern di Proxy, mostrando i loro casi d'uso nella validazione, intercettazione e modifica dinamica del comportamento. Ci addentreremo in esempi pratici per dimostrare come i Proxy possono migliorare la qualità del codice, la sicurezza e la manutenibilità nei vostri progetti JavaScript.

Comprendere il Proxy di JavaScript

Fondamentalmente, un oggetto Proxy avvolge un altro oggetto (il target) e intercetta le operazioni eseguite su quel target. Queste intercettazioni sono gestite da trap, che sono metodi che definiscono un comportamento personalizzato per operazioni specifiche come ottenere una proprietà, impostare una proprietà o chiamare una funzione. L'API Proxy fornisce un meccanismo flessibile ed estensibile per modificare il comportamento predefinito degli oggetti.

Concetti Chiave

• Target: L'oggetto originale che il Proxy avvolge.
• Handler: Un oggetto che contiene i metodi trap. Ogni trap corrisponde a un'operazione specifica.
• Traps: Metodi all'interno dell'handler che intercettano e personalizzano le operazioni sugli oggetti. Le trap comuni includono get, set, apply e construct.

Creare un Proxy

Per creare un Proxy, si utilizza il costruttore Proxy, passando l'oggetto target e l'oggetto handler come argomenti:

            const target = {};
const handler = {
 get: function(target, property, receiver) {
 console.log(`Getting property: ${property}`);
 return Reflect.get(target, property, receiver);
 }
};

const proxy = new Proxy(target, handler);

proxy.name = "John"; // Non registra nulla, la trap 'set' non è definita
console.log(proxy.name); // Registra: Getting property: name, poi John

            

              
                Copy
              
            
          

Trap Comuni dei Proxy

I Proxy offrono una serie di trap per intercettare varie operazioni. Ecco alcune delle trap più comunemente utilizzate:

• get(target, property, receiver): Intercetta l'accesso alle proprietà.
• set(target, property, value, receiver): Intercetta l'assegnazione di proprietà.
• has(target, property): Intercetta l'operatore in.
• deleteProperty(target, property): Intercetta l'operatore delete.
• apply(target, thisArg, argumentsList): Intercetta le chiamate di funzione.
• construct(target, argumentsList, newTarget): Intercetta l'operatore new.
• getPrototypeOf(target): Intercetta il metodo Object.getPrototypeOf().
• setPrototypeOf(target, prototype): Intercetta il metodo Object.setPrototypeOf().
• isExtensible(target): Intercetta il metodo Object.isExtensible().
• preventExtensions(target): Intercetta il metodo Object.preventExtensions().
• getOwnPropertyDescriptor(target, property): Intercetta il metodo Object.getOwnPropertyDescriptor().
• defineProperty(target, property, descriptor): Intercetta il metodo Object.defineProperty().
• ownKeys(target): Intercetta i metodi Object.getOwnPropertyNames() e Object.getOwnPropertySymbols().

Pattern dei Proxy

Ora, esploriamo alcuni pattern pratici dei Proxy e le loro applicazioni:

1. Proxy di Validazione

Un Proxy di Validazione impone vincoli sulle assegnazioni di proprietà. Intercetta la trap set per validare il nuovo valore prima di consentire il procedere dell'assegnazione.

Esempio: Validazione dell'input dell'utente in un modulo.

            const user = {};

const validator = {
 set: function(target, property, value) {
 if (property === 'age') {
 if (!Number.isInteger(value) || value < 0 || value > 120) {
 throw new Error('Età non valida. L\'età deve essere un intero tra 0 e 120.');
 }
 }
 target[property] = value;
 return true; // Indica successo
 }
};

const proxy = new Proxy(user, validator);

proxy.name = 'Alice';
proxy.age = 30;

console.log(user);

try {
 proxy.age = 'invalid'; // Lancia un errore
} catch (error) {
 console.error(error.message);
}

            

              
                Copy
              
            
          

In questo esempio, la trap set controlla se la proprietà age è un intero compreso tra 0 e 120. Se la validazione fallisce, viene lanciato un errore, impedendo l'assegnazione del valore non valido.

Esempio Globale: Questo pattern di validazione è essenziale per garantire l'integrità dei dati in applicazioni globali dove l'input dell'utente può provenire da fonti e culture diverse. Ad esempio, la validazione dei codici postali può variare significativamente tra i paesi. Un proxy di validazione può essere adattato per supportare diverse regole di validazione in base alla posizione dell'utente.

            const address = {};

const addressValidator = {
 set: function(target, property, value) {
 if (property === 'postalCode') {
 // Esempio: Ipotizzando una semplice validazione del codice postale statunitense
 if (!/^[0-9]{5}(?:-[0-9]{4})?$/.test(value)) {
 throw new Error('Codice postale statunitense non valido.');
 }
 }
 target[property] = value;
 return true;
 }
};

const addressProxy = new Proxy(address, addressValidator);

addressProxy.postalCode = "12345-6789"; // Valido

try {
 addressProxy.postalCode = "abcde"; // Non valido
} catch(e) {
 console.log(e);
}

// Per un'applicazione più internazionale, si userebbe una libreria di validazione più sofisticata
// che potrebbe validare i codici postali in base al paese dell'utente.

            

              
                Copy
              
            
          

2. Proxy di Registrazione (Logging)

Un Proxy di Registrazione intercetta l'accesso e l'assegnazione delle proprietà per registrare queste operazioni. È utile per il debug e l'auditing.

Esempio: Registrazione dell'accesso e della modifica delle proprietà.

            const data = {
 value: 10
};

const logger = {
 get: function(target, property) {
 console.log(`Ottenimento della proprietà: ${property}`);
 return target[property];
 },
 set: function(target, property, value) {
 console.log(`Impostazione della proprietà: ${property} a ${value}`);
 target[property] = value;
 return true;
 }
};

const proxy = new Proxy(data, logger);

console.log(proxy.value); // Registra: Ottenimento della proprietà: value, poi 10
proxy.value = 20; // Registra: Impostazione della proprietà: value a 20

            

              
                Copy
              
            
          

Le trap get e set registrano la proprietà a cui si accede o che viene modificata, fornendo una traccia delle interazioni con l'oggetto.

Esempio Globale: In una multinazionale, i proxy di registrazione possono essere utilizzati per controllare l'accesso e le modifiche ai dati effettuate dai dipendenti in diverse sedi. Questo è cruciale per scopi di conformità e sicurezza. Potrebbe essere necessario considerare i fusi orari nelle informazioni di registrazione.

            const employeeData = {
 name: "John Doe",
 salary: 50000
};

const auditLogger = {
 get: function(target, property) {
 const timestamp = new Date().toISOString();
 console.log(`${timestamp} - [GET] Accesso alla proprietà: ${property}`);
 return target[property];
 },
 set: function(target, property, value) {
 const timestamp = new Date().toISOString();
 console.log(`${timestamp} - [SET] Impostazione della proprietà: ${property} a ${value}`);
 target[property] = value;
 return true;
 }
};

const proxiedEmployee = new Proxy(employeeData, auditLogger);

proxiedEmployee.name; // Registra timestamp e accesso a 'name'
proxiedEmployee.salary = 60000; // Registra timestamp e modifica di 'salary'
            

              
                Copy
              
            
          

3. Proxy di Sola Lettura

Un Proxy di Sola Lettura impedisce l'assegnazione di proprietà. Intercetta la trap set e lancia un errore se si tenta di modificare una proprietà.

Esempio: Rendere un oggetto immutabile.

            const config = {
 apiUrl: 'https://api.example.com'
};

const readOnly = {
 set: function(target, property, value) {
 throw new Error(`Impossibile impostare la proprietà: ${property}. L'oggetto è di sola lettura.`);
 }
};

const proxy = new Proxy(config, readOnly);

console.log(proxy.apiUrl);

try {
 proxy.apiUrl = 'https://newapi.example.com'; // Lancia un errore
} catch (error) {
 console.error(error.message);
}

            

              
                Copy
              
            
          

Qualsiasi tentativo di impostare una proprietà sul proxy risulterà in un errore, garantendo che l'oggetto rimanga immutabile.

Esempio Globale: Questo pattern è utile per proteggere i file di configurazione che non dovrebbero essere modificati a runtime, specialmente in applicazioni distribuite a livello globale. La modifica accidentale della configurazione in una regione può influire sull'intero sistema.

            const globalSettings = {
 defaultLanguage: "en",
 currency: "USD",
 timeZone: "UTC"
};

const immutableHandler = {
 set: function(target, property, value) {
 throw new Error(`Impossibile modificare la proprietà di sola lettura: ${property}`);
 }
};

const immutableSettings = new Proxy(globalSettings, immutableHandler);

console.log(immutableSettings.defaultLanguage); // Stampa 'en'

// Tentare di cambiare un valore lancerà un errore
// immutableSettings.defaultLanguage = "fr"; // Lancia Error: Impossibile modificare la proprietà di sola lettura: defaultLanguage
            

              
                Copy
              
            
          

4. Proxy Virtuale

Un Proxy Virtuale controlla l'accesso a una risorsa che potrebbe essere costosa da creare o recuperare. Può ritardare la creazione della risorsa fino a quando non è effettivamente necessaria.

Esempio: Caricamento pigro (lazy loading) di un'immagine.

            const image = {
 display: function() {
 console.log('Visualizzazione dell'immagine');
 }
};

const virtualProxy = {
 get: function(target, property) {
 if (property === 'display') {
 console.log('Creazione dell\'immagine in corso...');
 const realImage = {
 display: function() {
 console.log('Visualizzazione dell\'immagine reale');
 }
 };
 target.display = realImage.display;
 return realImage.display;
 }
 return target[property];
 }
};

const proxy = new Proxy(image, virtualProxy);

// L'immagine non viene creata finché non viene chiamato display.
proxy.display(); // Registra: Creazione dell'immagine in corso..., poi Visualizzazione dell'immagine reale

            

              
                Copy
              
            
          

L'oggetto immagine reale viene creato solo quando viene chiamato il metodo display, evitando un consumo di risorse non necessario.

Esempio Globale: Consideriamo un sito di e-commerce globale che serve immagini di prodotti. Utilizzando un Proxy Virtuale, le immagini possono essere caricate solo quando sono visibili all'utente, ottimizzando l'uso della larghezza di banda e migliorando i tempi di caricamento della pagina, specialmente per gli utenti con connessioni internet lente in diverse regioni.

            const product = {
 loadImage: function() {
 console.log("Caricamento immagine ad alta risoluzione...");
 // Simula il caricamento di un'immagine di grandi dimensioni
 setTimeout(() => {
 console.log("Immagine caricata");
 this.displayImage();
 }, 2000);
 },
 displayImage: function() {
 console.log("Visualizzazione dell'immagine");
 }
};

const lazyLoadProxy = {
 get: function(target, property) {
 if (property === "displayImage") {
 // Invece di caricare immediatamente, ritarda il caricamento
 console.log("Richiesta di visualizzazione dell'immagine ricevuta. Caricamento in corso...");
 target.loadImage();
 return function() { /* Intenzionalmente vuota */ }; // Restituisce una funzione vuota per prevenire l'esecuzione immediata
 }
 return target[property];
 }
};

const proxiedProduct = new Proxy(product, lazyLoadProxy);

// La chiamata a displayImage avvia il processo di caricamento pigro
proxiedProduct.displayImage();
            

              
                Copy
              
            
          

5. Proxy Revocabile

Un Proxy Revocabile permette di revocare il proxy in qualsiasi momento, rendendolo inutilizzabile. Ciò è utile per scenari sensibili alla sicurezza in cui è necessario controllare l'accesso a un oggetto.

Esempio: Concedere accesso temporaneo a una risorsa.

            const target = {
 secret: 'Questo è un segreto'
};

const handler = {
 get: function(target, property) {
 console.log('Accesso alla proprietà segreta');
 return target[property];
 }
};

const { proxy, revoke } = Proxy.revocable(target, handler);

console.log(proxy.secret); // Registra: Accesso alla proprietà segreta, poi Questo è un segreto

revoke();

try {
 console.log(proxy.secret); // Lancia un TypeError
} catch (error) {
 console.error(error.message); // Registra: Cannot perform 'get' on a proxy that has been revoked
}

            

              
                Copy
              
            
          

Il metodo Proxy.revocable() crea un proxy revocabile. La chiamata alla funzione revoke() rende il proxy inutilizzabile, impedendo ulteriori accessi all'oggetto target.

Esempio Globale: In un sistema distribuito a livello globale, si potrebbe usare un proxy revocabile per concedere accesso temporaneo a dati sensibili a un servizio in esecuzione in una regione specifica. Dopo un certo tempo, il proxy può essere revocato per prevenire accessi non autorizzati.

            const sensitiveData = {
 apiKey: "SUPER_SECRET_KEY"
};

const handler = {
 get: function(target, property) {
 console.log("Accesso ai dati sensibili");
 return target[property];
 }
};

const { proxy: dataProxy, revoke: revokeAccess } = Proxy.revocable(sensitiveData, handler);

// Consenti l'accesso per 5 secondi
setTimeout(() => {
 revokeAccess();
 console.log("Accesso revocato");
}, 5000);

// Tenta di accedere ai dati
console.log(dataProxy.apiKey); // Registra la API Key

// Dopo 5 secondi, questo lancerà un errore
setTimeout(() => {
 try {
 console.log(dataProxy.apiKey); // Lancia: TypeError: Cannot perform 'get' on a proxy that has been revoked
 } catch (error) {
 console.error(error);
 }
}, 6000);

            

              
                Copy
              
            
          

6. Proxy di Conversione Tipi

Un Proxy di Conversione Tipi intercetta l'accesso alle proprietà per convertire automaticamente il valore restituito in un tipo specifico. Questo può essere utile per lavorare con dati provenienti da fonti diverse che possono avere tipi incoerenti.

Esempio: Conversione di valori stringa in numeri.

            const data = {
 price: '10.99',
 quantity: '5'
};

const typeConverter = {
 get: function(target, property) {
 const value = target[property];
 if (typeof value === 'string' && !isNaN(Number(value))) {
 return Number(value);
 }
 return value;
 }
};

const proxy = new Proxy(data, typeConverter);

console.log(proxy.price + 1); // Registra: 11.99 (numero)
console.log(proxy.quantity * 2); // Registra: 10 (numero)

            

              
                Copy
              
            
          

La trap get controlla se il valore della proprietà è una stringa che può essere convertita in un numero. In tal caso, converte il valore in un numero prima di restituirlo.

Esempio Globale: Quando si ha a che fare con dati provenienti da API con diverse convenzioni di formattazione (ad es. formati di data o simboli di valuta diversi), un Proxy di Conversione Tipi può garantire la coerenza dei dati in tutta l'applicazione, indipendentemente dalla fonte. Ad esempio, gestendo diversi formati di data e convertendoli tutti nel formato ISO 8601.

            const apiData = {
 dateUS: "12/31/2023",
 dateEU: "31/12/2023"
};

const dateFormatConverter = {
 get: function(target, property) {
 let value = target[property];
 if (property.startsWith("date")) {
 // Tenta di convertire sia i formati di data statunitensi che europei in ISO 8601
 if (property === "dateUS") {
 const [month, day, year] = value.split("/");
 value = `${year}-${month}-${day}`;
 } else if (property === "dateEU") {
 const [day, month, year] = value.split("/");
 value = `${year}-${month}-${day}`;
 }
 return value;
 }
 return value;
 }
};

const proxiedApiData = new Proxy(apiData, dateFormatConverter);

console.log(proxiedApiData.dateUS); // Stampa: 2023-12-31
console.log(proxiedApiData.dateEU); // Stampa: 2023-12-31
            

              
                Copy
              
            
          

Migliori Pratiche per l'Uso dei Proxy

• Usare i Proxy con Criterio: I Proxy possono aggiungere complessità al codice. Usateli solo quando forniscono benefici significativi, come una migliore validazione, registrazione o controllo sul comportamento degli oggetti.
• Considerare le Prestazioni: Le trap dei Proxy possono introdurre un sovraccarico. Effettuate il profiling del vostro codice per assicurarvi che i Proxy non influiscano negativamente sulle prestazioni, specialmente nelle sezioni critiche per le performance.
• Gestire gli Errori con Grazia: Assicuratevi che i vostri metodi trap gestiscano gli errori in modo appropriato, fornendo messaggi di errore informativi quando necessario.
• Usare l'API Reflect: L'API Reflect fornisce metodi che rispecchiano il comportamento predefinito delle operazioni sugli oggetti. Usate i metodi Reflect all'interno dei vostri metodi trap per delegare al comportamento originale quando appropriato. Ciò garantisce che le vostre trap non rompano le funzionalità esistenti.
• Documentare i Vostri Proxy: Documentate chiaramente lo scopo e il comportamento dei vostri Proxy, comprese le trap utilizzate e i vincoli applicati. Ciò aiuterà altri sviluppatori a comprendere e mantenere il vostro codice.

Conclusione

I Proxy di JavaScript sono uno strumento potente per la manipolazione e l'intercettazione avanzata degli oggetti. Comprendendo e applicando vari pattern di Proxy, è possibile migliorare la qualità del codice, la sicurezza e la manutenibilità. Dalla validazione dell'input dell'utente al controllo dell'accesso a risorse sensibili, i Proxy offrono un meccanismo flessibile ed estensibile per personalizzare il comportamento degli oggetti. Mentre esplorate le possibilità dei Proxy, ricordate di usarli con criterio e di documentare attentamente il vostro codice.

Gli esempi forniti dimostrano come utilizzare i Proxy di JavaScript per risolvere problemi del mondo reale in un contesto globale. Comprendendo e applicando questi pattern, è possibile creare applicazioni più robuste, sicure e manutenibili che soddisfino le esigenze di una base di utenti diversificata. Ricordate di considerare sempre le implicazioni globali del vostro codice e di adattare le vostre soluzioni ai requisiti specifici delle diverse regioni e culture.