Comment utiliser des objets proxy en JavaScript

Les objets en JavaScript sont des types de données utiles qui nous permettent de définir des données complexes avec de simples paires clé-valeur, comme un dictionnaire. Parfois, vous souhaiterez peut-être modifier le fonctionnement par défaut des objets JavaScript. C'est là que les objets proxy sont utiles. Dans cet article, nous verrons ce que sont les objets proxy, pourquoi ils sont utiles et comment les utiliser.

Qu'est-ce qu'un objet proxy ?

Avant de comprendre ce qu'est un objet proxy, regardons le mot proxy. Un proxy signifie quelque chose qui agit comme la chose originale mais qui n'est pas la chose originale. De même, un objet proxy est un objet créé à l'aide de l'objet d'origine qui peut intercepter et modifier le fonctionnement de l'objet d'origine.

Le constructeur Proxy prend deux paramètres

• cible : l'objet pour lequel vous souhaitez créer un proxy

• handler : un objet avec des opérations que vous souhaitez modifier ou redéfinir
  

const proxyObject = new Proxy(target, handler)

Comment fonctionne un objet proxy ?

Lorsque nous créons des objets proxy avec un gestionnaire comportant des opérations que vous souhaitez modifier, il intercepte ces opérations, intercepte l'appel à l'objet cible et exécute la logique personnalisée que vous avez définie pour ces opérations.

Les opérations sont appelées pièges, qui sont essentiellement les méthodes internes d'un objet. Certains d'entre eux sont :

• obtenir

• ensemble

• supprimer la propriété

Ici, j'ai créé un visuel simple montrant comment fonctionne un objet proxy. Si nous essayons d'accéder ou de définir une valeur, il intercepte et exécute les opérations (pièges) définies dans le gestionnaire.

Très bien, j'espère que le quoi et le comment des objets proxy sont clairs. Ensuite, nous discuterons de quelques cas d'utilisation pour montrer pourquoi les objets proxy sont utiles.

Cas d'utilisation de l'objet proxy

Enregistrement

Disons que vous souhaitez créer un système dans lequel chaque fois qu'une propriété est accédée à partir de l'objet, il enregistre les informations.

const platform = {
  type: "peerlist.io",
  handle: "sachin87",
};

const proxyPlatformObj = new Proxy(platform, {
  get(target, key) {
    console.log(`[Info]: Accessing ${key} at ${Date.now()}`);
    return target[key];
  },
});

// try to access the property
proxyPlatformObj.type;

// [Info]: Accessing type at 1729661722827

// 'peerlist.io'

Il s'agit d'un cas d'utilisation très simple, mais il est utile lorsque la journalisation est nécessaire, et vous pouvez l'étendre pour effectuer des choses plus avancées.

Nous pouvons également permettre aux utilisateurs d'accéder à des propriétés qui ne sont pas directement disponibles. Par exemple, dans le cas ci-dessus, nous pourrions vouloir l'URL complète de la plateforme avec le pseudo de l'utilisateur.

const proxyPlatformObj = new Proxy(platform, {
  get(target, key) {
    console.log(`[Info]: Accessing ${key} at ${Date.now()}`);
    if (key === "url") {
      return `https://${target.type}/${target.handle}`;
    }
    return target[key];
  },
});

// try to access the url property
proxyPlatformObj.url;

// [Info]: Accessing url at 1729662118855
// 'https://peerlist.io/sachin87'

Validation

Un autre cas d'utilisation consiste à vérifier la valeur avant de l'ajouter. Par exemple, disons que nous voulons vérifier la valeur du handle avant de le définir. Nous validerons deux conditions de base :

• Il doit être en minuscules

• Il peut être alphanumérique
  

const proxyObject = new Proxy(target, handler)

Vous vous demandez peut-être ce qu'est Reflect.set(target, key, value). Il s'agit d'un objet d'espace de noms avec des méthodes statiques pour appeler les méthodes internes de l'objet JavaScript qui peuvent être interceptées. Si vous ne souhaitez pas de validation pour toutes les propriétés, vous pouvez utiliser l'objet Reflect pour conserver le comportement par défaut.

Nous avons parlé de deux cas d'utilisation de journalisation et de validation, mais vous pouvez intercepter d'autres méthodes internes en fonction de vos besoins.

Conclusion

Nous avons parlé de ce qu'est un objet proxy, de son fonctionnement et de certaines de ses utilisations. Un objet proxy est utile, mais nous devons être conscients de ses inconvénients. Nous ne devons l'utiliser que lorsque cela est nécessaire pour éviter d'ajouter de la complexité ou des bugs par erreur.

C'est tout pour ce sujet. Merci d'avoir lu! Si vous avez trouvé cet article utile, pensez à l'aimer, à le commenter et à le partager avec d'autres.

Lectures complémentaires

• Document proxy MDN

• MDN Reflect Doc

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!