Patterns de Proxy JavaScript : Interception et Validation Avancées d'Objets

L'objet Proxy de JavaScript est une fonctionnalité puissante qui vous permet d'intercepter et de personnaliser les opérations fondamentales sur les objets. Il permet des techniques de métaprogrammation avancées, offrant un plus grand contrôle sur le comportement des objets et ouvrant des possibilités pour des design patterns sophistiqués. Cet article explore divers patterns de Proxy, présentant leurs cas d'utilisation dans la validation, l'interception et la modification dynamique du comportement. Nous nous plongerons dans des exemples pratiques pour démontrer comment les Proxies peuvent améliorer la qualité du code, la sécurité et la maintenabilité dans vos projets JavaScript.

Comprendre le Proxy JavaScript

À la base, un objet Proxy enveloppe un autre objet (la cible) et intercepte les opérations effectuées sur cette cible. Ces interceptions sont gérées par traps (pièges), qui sont des méthodes définissant un comportement personnalisé pour des opérations spécifiques comme l'obtention d'une propriété, la définition d'une propriété ou l'appel d'une fonction. L'API Proxy fournit un mécanisme flexible et extensible pour modifier le comportement par défaut des objets.

Concepts Clés

• Cible (Target) : L'objet original que le Proxy enveloppe.
• Gestionnaire (Handler) : Un objet qui contient les méthodes de trap. Chaque trap correspond à une opération spécifique.
• Traps : Méthodes au sein du gestionnaire qui interceptent et personnalisent les opérations sur les objets. Les traps courants incluent get, set, apply et construct.

Créer un Proxy

Pour créer un Proxy, vous utilisez le constructeur Proxy, en passant l'objet cible et l'objet gestionnaire comme arguments :

            const target = {};
const handler = {
 get: function(target, property, receiver) {
 console.log(`Récupération de la propriété : ${property}`);
 return Reflect.get(target, property, receiver);
 }
};

const proxy = new Proxy(target, handler);

proxy.name = "John"; // Affiche : Récupération de la propriété : name
console.log(proxy.name); // Affiche : Récupération de la propriété : name, puis John

            

              
                Copy
              
            
          

Traps de Proxy Courants

Les Proxies offrent une gamme de traps pour intercepter diverses opérations. Voici quelques-uns des traps les plus couramment utilisés :

• get(target, property, receiver) : Intercepte l'accès à une propriété.
• set(target, property, value, receiver) : Intercepte l'affectation d'une propriété.
• has(target, property) : Intercepte l'opérateur in.
• deleteProperty(target, property) : Intercepte l'opérateur delete.
• apply(target, thisArg, argumentsList) : Intercepte les appels de fonction.
• construct(target, argumentsList, newTarget) : Intercepte l'opérateur new.
• getPrototypeOf(target) : Intercepte la méthode Object.getPrototypeOf().
• setPrototypeOf(target, prototype) : Intercepte la méthode Object.setPrototypeOf().
• isExtensible(target) : Intercepte la méthode Object.isExtensible().
• preventExtensions(target) : Intercepte la méthode Object.preventExtensions().
• getOwnPropertyDescriptor(target, property) : Intercepte la méthode Object.getOwnPropertyDescriptor().
• defineProperty(target, property, descriptor) : Intercepte la méthode Object.defineProperty().
• ownKeys(target) : Intercepte les méthodes Object.getOwnPropertyNames() et Object.getOwnPropertySymbols().

Patterns de Proxy

Explorons maintenant quelques patterns de Proxy pratiques et leurs applications :

1. Proxy de Validation

Un Proxy de Validation impose des contraintes sur les affectations de propriétés. Il intercepte le trap set pour valider la nouvelle valeur avant de permettre à l'affectation de se poursuivre.

Exemple : Validation de l'entrée utilisateur dans un formulaire.

            const user = {};

const validator = {
 set: function(target, property, value) {
 if (property === 'age') {
 if (!Number.isInteger(value) || value < 0 || value > 120) {
 throw new Error('Âge invalide. L\'âge doit être un entier entre 0 et 120.');
 }
 }
 target[property] = value;
 return true; // Indique le succès
 }
};

const proxy = new Proxy(user, validator);

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

console.log(user);

try {
 proxy.age = 'invalid'; // Lance une erreur
} catch (error) {
 console.error(error.message);
}

            

              
                Copy
              
            
          

Dans cet exemple, le trap set vérifie si la propriété age est un entier entre 0 et 120. Si la validation échoue, une erreur est lancée, empêchant l'affectation de la valeur invalide.

Exemple Global : Ce pattern de validation est essentiel pour garantir l'intégrité des données dans les applications mondiales où les entrées utilisateur peuvent provenir de sources et de cultures diverses. Par exemple, la validation des codes postaux peut varier considérablement d'un pays à l'autre. Un proxy de validation peut être adapté pour prendre en charge différentes règles de validation en fonction de la localisation de l'utilisateur.

            const address = {};

const addressValidator = {
 set: function(target, property, value) {
 if (property === 'postalCode') {
 // Exemple : En supposant une validation simple de code postal américain
 if (!/^[0-9]{5}(?:-[0-9]{4})?$/.test(value)) {
 throw new Error('Code postal américain invalide.');
 }
 }
 target[property] = value;
 return true;
 }
};

const addressProxy = new Proxy(address, addressValidator);

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

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

// Pour une application plus internationale, vous utiliseriez une bibliothèque de validation plus sophistiquée
// qui pourrait valider les codes postaux en fonction du pays de l'utilisateur.

            

              
                Copy
              
            
          

2. Proxy de Journalisation (Logging)

Un Proxy de Journalisation intercepte l'accès et l'affectation des propriétés pour journaliser ces opérations. C'est utile pour le débogage et l'audit.

Exemple : Journalisation de l'accès et de la modification des propriétés.

            const data = {
 value: 10
};

const logger = {
 get: function(target, property) {
 console.log(`Récupération de la propriété : ${property}`);
 return target[property];
 },
 set: function(target, property, value) {
 console.log(`Définition de la propriété : ${property} à ${value}`);
 target[property] = value;
 return true;
 }
};

const proxy = new Proxy(data, logger);

console.log(proxy.value); // Affiche : Récupération de la propriété : value, puis 10
proxy.value = 20; // Affiche : Définition de la propriété : value à 20

            

              
                Copy
              
            
          

Les traps get et set journalisent la propriété consultée ou modifiée, fournissant une trace des interactions avec l'objet.

Exemple Global : Dans une multinationale, les proxies de journalisation peuvent être utilisés pour auditer l'accès aux données et les modifications effectuées par les employés dans différents lieux. Ceci est crucial à des fins de conformité et de sécurité. Les fuseaux horaires peuvent devoir être pris en compte dans les informations de journalisation.

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

const auditLogger = {
 get: function(target, property) {
 const timestamp = new Date().toISOString();
 console.log(`${timestamp} - [GET] Accès à la propriété : ${property}`);
 return target[property];
 },
 set: function(target, property, value) {
 const timestamp = new Date().toISOString();
 console.log(`${timestamp} - [SET] Définition de la propriété : ${property} à ${value}`);
 target[property] = value;
 return true;
 }
};

const proxiedEmployee = new Proxy(employeeData, auditLogger);

proxiedEmployee.name; // Journalise l'horodatage et l'accès à 'name'
proxiedEmployee.salary = 60000; // Journalise l'horodatage et la modification de 'salary'
            

              
                Copy
              
            
          

3. Proxy en Lecture Seule

Un Proxy en Lecture Seule empêche l'affectation de propriétés. Il intercepte le trap set et lance une erreur si une tentative de modification d'une propriété est effectuée.

Exemple : Rendre un objet immuable.

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

const readOnly = {
 set: function(target, property, value) {
 throw new Error(`Impossible de définir la propriété : ${property}. L'objet est en lecture seule.`);
 }
};

const proxy = new Proxy(config, readOnly);

console.log(proxy.apiUrl);

try {
 proxy.apiUrl = 'https://newapi.example.com'; // Lance une erreur
} catch (error) {
 console.error(error.message);
}

            

              
                Copy
              
            
          

Toute tentative de définir une propriété sur le proxy entraînera une erreur, garantissant que l'objet reste immuable.

Exemple Global : Ce pattern est utile pour protéger les fichiers de configuration qui ne doivent pas être modifiés à l'exécution, en particulier dans les applications distribuées à l'échelle mondiale. La modification accidentelle de la configuration dans une région peut affecter l'ensemble du système.

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

const immutableHandler = {
 set: function(target, property, value) {
 throw new Error(`Impossible de modifier la propriété en lecture seule : ${property}`);
 }
};

const immutableSettings = new Proxy(globalSettings, immutableHandler);

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

// Tenter de changer une valeur lancera une erreur
// immutableSettings.defaultLanguage = "fr"; // lance Erreur : Impossible de modifier la propriété en lecture seule : defaultLanguage
            

              
                Copy
              
            
          

4. Proxy Virtuel

Un Proxy Virtuel contrôle l'accès à une ressource qui peut être coûteuse à créer ou à récupérer. Il peut retarder la création de la ressource jusqu'à ce qu'elle soit réellement nécessaire.

Exemple : Chargement différé (lazy loading) d'une image.

            const image = {
 display: function() {
 console.log('Affichage de l\'image');
 }
};

const virtualProxy = {
 get: function(target, property) {
 if (property === 'display') {
 console.log('Création de l\'image...');
 const realImage = {
 display: function() {
 console.log('Affichage de l\'image réelle');
 }
 };
 target.display = realImage.display;
 return realImage.display;
 }
 return target[property];
 }
};

const proxy = new Proxy(image, virtualProxy);

// L'image n'est créée que lorsque display est appelée.
proxy.display(); // Affiche : Création de l'image..., puis Affichage de l'image réelle

            

              
                Copy
              
            
          

L'objet image réel n'est créé que lorsque la méthode display est appelée, évitant ainsi une consommation de ressources inutile.

Exemple Global : Considérez un site de commerce électronique mondial qui sert des images de produits. En utilisant un Proxy Virtuel, les images peuvent être chargées uniquement lorsqu'elles sont visibles par l'utilisateur, optimisant ainsi l'utilisation de la bande passante et améliorant les temps de chargement des pages, en particulier pour les utilisateurs ayant des connexions Internet lentes dans différentes régions.

            const product = {
 loadImage: function() {
 console.log("Chargement de l'image haute résolution...");
 // Simule le chargement d'une grande image
 setTimeout(() => {
 console.log("Image chargée");
 this.displayImage();
 }, 2000);
 },
 displayImage: function() {
 console.log("Affichage de l'image");
 }
};

const lazyLoadProxy = {
 get: function(target, property) {
 if (property === "displayImage") {
 // Au lieu de charger immédiatement, retarder le chargement
 console.log("Demande d'affichage de l'image reçue. Chargement...");
 target.loadImage();
 return function() { /* Intentionnellement vide */ }; // Retourne une fonction vide pour empêcher l'exécution immédiate
 }
 return target[property];
 }
};

const proxiedProduct = new Proxy(product, lazyLoadProxy);

// L'appel à displayImage déclenche le processus de chargement différé
proxiedProduct.displayImage();
            

              
                Copy
              
            
          

5. Proxy Révocable

Un Proxy Révocable vous permet de révoquer le proxy à tout moment, le rendant inutilisable. C'est utile pour les scénarios sensibles à la sécurité où vous devez contrôler l'accès à un objet.

Exemple : Accorder un accès temporaire à une ressource.

            const target = {
 secret: 'Ceci est un secret'
};

const handler = {
 get: function(target, property) {
 console.log('Accès à la propriété secrète');
 return target[property];
 }
};

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

console.log(proxy.secret); // Affiche : Accès à la propriété secrète, puis Ceci est un secret

revoke();

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

            

              
                Copy
              
            
          

La méthode Proxy.revocable() crée un proxy révocable. L'appel de la fonction revoke() rend le proxy inutilisable, empêchant tout accès ultérieur à l'objet cible.

Exemple Global : Dans un système distribué à l'échelle mondiale, vous pourriez utiliser un proxy révocable pour accorder un accès temporaire à des données sensibles à un service s'exécutant dans une région spécifique. Après un certain temps, le proxy peut être révoqué pour empêcher tout accès non autorisé.

            const sensitiveData = {
 apiKey: "CLE_SUPER_SECRETE"
};

const handler = {
 get: function(target, property) {
 console.log("Accès aux données sensibles");
 return target[property];
 }
};

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

// Autoriser l'accès pendant 5 secondes
setTimeout(() => {
 revokeAccess();
 console.log("Accès révoqué");
}, 5000);

// Tentative d'accès aux données
console.log(dataProxy.apiKey); // Affiche la clé API

// Après 5 secondes, ceci lancera une erreur
setTimeout(() => {
 try {
 console.log(dataProxy.apiKey); // Lance : TypeError: Cannot perform 'get' on a proxy that has been revoked
 } catch (error) {
 console.error(error);
 }
}, 6000);

            

              
                Copy
              
            
          

6. Proxy de Conversion de Type

Un Proxy de Conversion de Type intercepte l'accès aux propriétés pour convertir automatiquement la valeur retournée en un type spécifique. Cela peut être utile pour travailler avec des données de différentes sources qui peuvent avoir des types incohérents.

Exemple : Conversion de valeurs de chaîne de caractères en nombres.

            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); // Affiche : 11.99 (nombre)
console.log(proxy.quantity * 2); // Affiche : 10 (nombre)

            

              
                Copy
              
            
          

Le trap get vérifie si la valeur de la propriété est une chaîne de caractères qui peut être convertie en nombre. Si c'est le cas, il convertit la valeur en nombre avant de la retourner.

Exemple Global : Lorsque vous traitez des données provenant d'API avec des conventions de formatage différentes (par exemple, différents formats de date ou symboles monétaires), un Proxy de Conversion de Type peut garantir la cohérence des données dans votre application, quelle que soit la source. Par exemple, gérer différents formats de date et les convertir tous au format 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")) {
 // Tente de convertir les formats de date US et EU en 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); // Affiche : 2023-12-31
console.log(proxiedApiData.dateEU); // Affiche : 2023-12-31
            

              
                Copy
              
            
          

Meilleures Pratiques pour l'Utilisation des Proxies

• Utilisez les Proxies avec discernement : Les Proxies peuvent ajouter de la complexité à votre code. Ne les utilisez que lorsqu'ils apportent des avantages significatifs, tels qu'une meilleure validation, journalisation ou un meilleur contrôle sur le comportement des objets.
• Considérez la performance : Les traps de Proxy peuvent introduire une surcharge. Profilez votre code pour vous assurer que les Proxies n'ont pas d'impact négatif sur les performances, en particulier dans les sections critiques en termes de performance.
• Gérez les erreurs avec élégance : Assurez-vous que vos méthodes de trap gèrent les erreurs de manière appropriée, en fournissant des messages d'erreur informatifs si nécessaire.
• Utilisez l'API Reflect : L'API Reflect fournit des méthodes qui reflètent le comportement par défaut des opérations sur les objets. Utilisez les méthodes Reflect dans vos méthodes de trap pour déléguer au comportement d'origine lorsque cela est approprié. Cela garantit que vos traps ne cassent pas les fonctionnalités existantes.
• Documentez vos Proxies : Documentez clairement le but et le comportement de vos Proxies, y compris les traps utilisés et les contraintes appliquées. Cela aidera les autres développeurs à comprendre et à maintenir votre code.

Conclusion

Les Proxies JavaScript sont un outil puissant pour la manipulation et l'interception avancées d'objets. En comprenant et en appliquant divers patterns de Proxy, vous pouvez améliorer la qualité, la sécurité et la maintenabilité du code. De la validation des entrées utilisateur au contrôle de l'accès aux ressources sensibles, les Proxies offrent un mécanisme flexible et extensible pour personnaliser le comportement des objets. Lorsque vous explorez les possibilités des Proxies, n'oubliez pas de les utiliser avec discernement et de documenter votre code de manière approfondie.

Les exemples fournis démontrent comment utiliser les Proxies JavaScript pour résoudre des problèmes du monde réel dans un contexte global. En comprenant et en appliquant ces patterns, vous pouvez créer des applications plus robustes, sécurisées et maintenables qui répondent aux besoins d'une base d'utilisateurs diversifiée. N'oubliez pas de toujours prendre en compte les implications globales de votre code et d'adapter vos solutions aux exigences spécifiques des différentes régions et cultures.