Une introduction au proxy JavaScript

Avez-vous déjà rencontré une situation où vous souhaitez pouvoir contrôler les valeurs dans un objet ou un tableau? Peut-être que vous souhaitez bloquer certains types de données, même valider les données avant de les stocker dans l'objet. Supposons que vous souhaitiez réagir aux données entrantes ou même aux données sortantes d'une manière ou d'une autre? Par exemple, vous souhaitez peut-être mettre à jour le DOM ou échanger la classe qui change de style en affichant les résultats, car les données changeront. Vous avez toujours voulu travailler sur une simple idée de page ou une partie qui ne nécessite que certaines fonctionnalités de cadres comme Vue ou React, mais vous ne voulez pas démarrer une nouvelle application?

Ensuite, JavaScript Proxy peut être exactement ce dont vous avez besoin!

Brève introduction

Permettez-moi d'abord de faire une déclaration: je suis plus un développeur d'interface utilisateur dans la technologie frontale; J'adorerais créer uniquement de beaux projets cohérents dans le navigateur et avoir toutes les fonctionnalités pertinentes. Ainsi, en ce qui concerne les fonctionnalités JavaScript plus pure, j'ai tendance à ne pas aller plus loin.

Cependant, j'aime toujours faire des recherches et je cherche toujours quelque chose à ajouter à ma nouvelle liste d'apprentissage. Il s'avère que JavaScript Proxy est un sujet intéressant, car le simple fait de regarder les bases ouvre de nombreuses possibilités sur la façon de profiter de cette fonctionnalité. Pourtant, à première vue, le code peut rapidement devenir lourd. Bien sûr, tout dépend de vos besoins.

Le concept d'objets proxy existe depuis un certain temps. Dans mes recherches, je peux trouver des références il y a quelques années. Cependant, il n'est pas haut sur ma liste car il n'a jamais été pris en charge dans Internet Explorer. En comparaison, il a été parfaitement soutenu dans tous les autres navigateurs au fil des ans. C'est l'une des raisons pour lesquelles Vue 3 est incompatible avec Internet Explorer 11 car le proxy est utilisé dans le dernier projet VUE.

Alors, quel est exactement l'objet proxy?

Objet proxy

MDN décrit un objet proxy comme:

[…] Vous permet de créer un proxy pour un autre objet qui intercepte et redéfinit les opérations sous-jacentes de cet objet.

L'idée générale est que vous pouvez créer un objet avec des fonctionnalités qui vous permet de contrôler les actions typiques qui se produisent lors de l'utilisation de l'objet. Les deux les plus courants sont les valeurs d'obtention et de définition des valeurs stockées dans les objets.

 const myobj = {
  Mykey: 'valeur'
}

console.log (myobj.mykey);
myObj.mykey = 'mis à jour';

Ainsi, dans notre objet proxy, nous créerons des "pièges" pour intercepter ces opérations et remplir toutes les fonctions que nous voudrions accomplir. Il y a jusqu'à treize de tels pièges disponibles. Je ne couvre pas nécessairement tous ces pièges, car tous ne sont pas nécessaires pour les exemples simples que je fournis ci-dessous. Encore une fois, cela dépend de ce dont vous avez besoin pour le contexte spécifique de la création du contenu. Croyez-moi, le simple fait de maîtriser les bases peut aller très loin.

Pour étendre l'exemple ci-dessus pour créer un proxy, nous ferons ce qui suit:

 const myobj = {
  Mykey: 'valeur'
}

const Handler = {
  get: function (cible, prop) {
    return cible [prop];
  },
  set: function (cible, prop, valeur) {
    cible [prop] = valeur;
    Retour Vrai;
  }
}

const proxy = new proxy (myObj, handler);

console.log (proxy.mykey);
proxy.mykey = 'mis à jour';

Tout d'abord, commençons par l'objet standard. Nous créons ensuite un objet de gestionnaire qui contient la fonction de gestionnaire , communément appelé piège. Ceux-ci représentent des actions qui peuvent être effectuées sur des objets traditionnels, dans ce cas, qui transmettent simplement du contenu sans aucun changement. Après cela, nous créons notre proxy à l'aide d'un constructeur avec l'objet cible et l'objet de gestionnaire. À ce moment-là, nous pouvons référencer l'objet proxy pour obtenir et définir des valeurs qui seront le proxy de l'objet cible d'origine MyOBJ.

Notez le retour vrai à la fin du piège set. Ceci est destiné à informer le proxy que la valeur de réglage doit être considérée comme réussie. Dans certains cas, si vous souhaitez empêcher la définition des valeurs (en considérant les erreurs de vérification), vous devez retourner faux. Cela provoquera également une erreur de console et sortira une éERROR TYPE.

Maintenant, une chose à retenir de ce modèle est que l'objet cible d'origine est toujours disponible. Cela signifie que vous pouvez contourner le proxy et modifier la valeur de l'objet sans utiliser le proxy. Pendant que je lis sur l'utilisation d'objets proxy, j'ai trouvé des modèles utiles qui peuvent aider avec ce problème.

 Laissez myobj = {
  Mykey: 'valeur'
}

const Handler = {
  get: function (cible, prop) {
    return cible [prop];
  },
  set: function (cible, prop, valeur) {
    cible [prop] = valeur;
    Retour Vrai;
  }
}

myObj = nouveau proxy (myOBJ, gestionnaire);

console.log (myobj.mykey);
myObj.mykey = 'mis à jour';

Dans ce mode, nous utilisons l'objet cible comme objet proxy tout en faisant référence à l'objet cible dans le constructeur proxy. Oui, c'est tout. Cela fonctionne, mais je trouve facile de confondre ce qui se passe. Créons donc l'objet cible dans le constructeur proxy:

 const Handler = {
  get: function (cible, prop) {
    return cible [prop];
  },
  set: function (cible, prop, valeur) {
    cible [prop] = valeur;
    Retour Vrai;
  }
}

const proxy = new proxy ({
  Mykey: 'valeur'
}, gestionnaire);

console.log (proxy.mykey);
proxy.mykey = 'mis à jour';

En fait, nous pouvons créer des objets cibles et des objets de gestionnaire dans le constructeur si nous voulons:

 const proxy = new proxy ({
  Mykey: 'valeur'
}, {
  get: function (cible, prop) {
    return cible [prop];
  },
  set: function (cible, prop, valeur) {
    cible [prop] = valeur;
    Retour Vrai;
  }
});

console.log (proxy.mykey);
proxy.mykey = 'mis à jour';

En fait, c'est le modèle que j'utilise le plus fréquemment dans l'exemple ci-dessous. Heureusement, la façon de créer des objets proxy est flexible. Utilisez simplement n'importe quel mode qui vous convient.

Voici quelques exemples couvrant l'utilisation du proxy JavaScript de la validation des données de base à l'utilisation de Fetch pour mettre à jour les données de formulaire. N'oubliez pas que ces exemples couvrent les bases du proxy JavaScript; Dans certains cas, ils créent simplement du code JavaScript régulier dans l'objet proxy pour effectuer des opérations JavaScript régulières. Considérez-les comme des moyens d'étendre certaines tâches JavaScript communes en plus de contrôle sur les données.

Un exemple simple d'une question simple

Mon premier exemple couvre ce que j'ai toujours pensé était une question d'interview de codage assez simple et étrange: inverser la chaîne. Je n'ai jamais aimé cette question et je n'ai jamais posé cette question lors des entretiens. En tant que personne qui aime aller à l'encontre du courant de ce genre de chose, j'ai essayé des solutions non traditionnelles. Vous savez, juste pour le plaisir parfois le jeter, l'une des solutions est un grand plaisir frontal. Il fournit également un exemple simple montrant comment le proxy est utilisé.

Si vous tapez l'entrée, vous verrez que le typé est imprimé à l'envers ci-dessous. De toute évidence, il existe de nombreuses façons d'inverser les chaînes qui peuvent être utilisées. Cependant, jetons un coup d'œil à mon étrange méthode d'inversion.

 const inverse = nouveau proxy (
  {
    valeur: ''
  },
  {
    set: function (cible, prop, valeur) {
      cible [prop] = valeur;

      document.QuerySelectorall ('[Data-Reverse]'). ForEach (item => {
        Soit El = document.CreateElement ('div');
        el.innerhtml = '\ u {202e}' valeur;
        item.innertext = el.innerhtml;
      });

      Retour Vrai;
    }
  }
)

document.QuerySelect
  reverse.value = e.target.value;
});

Tout d'abord, nous créons un nouveau proxy, l'objet cible est une valeur à clé unique qui contient tout ce qui est saisi dans l'entrée. Le piège Get n'existe pas car nous n'avons besoin que de passhrough simples car nous n'avons pas de fonctionnalité réelle pour lui lier. Dans ce cas, rien n'est requis. Nous en discuterons plus tard.

Pour le piège Set, nous avons quelques fonctionnalités à effectuer. Il y a toujours une simple passhrouille où la valeur est définie comme la clé de valeur dans l'objet cible comme d'habitude. Ensuite, il y a un queySelectorall qui recherche tous les éléments de la page qui ont l'attribut de données Data-Reverse. Cela nous permet de localiser plusieurs éléments sur la page à la fois et de les mettre à jour. Cela nous donne une opération de liaison semblable à un cadre que tout le monde aime voir. Cela peut également être mis à jour pour positionner les entrées pour permettre le cas de types de liaison bidirectionnels appropriés.

C'est là que ma façon originale de cordes inversées entre en jeu. Un div est créé en mémoire puis mis à jour avec la chaîne à l'InnerHTML de l'élément. La première partie de la chaîne utilise un code décimal Unicode spécial qui inversera en fait tout par la suite, ce qui en fait de droite à gauche. Ensuite, le texte inner de l'élément réel de la page obtiendra l'interhtml de la div en mémoire. Ceci est exécuté chaque fois que vous entrez quelque chose dans l'entrée; donc, tous les éléments avec l'attribut Data-Reverse sont mis à jour.

Enfin, nous définissons un écouteur d'événements sur l'entrée qui définit la clé de valeur dans l'objet cible par la valeur d'entrée (c'est-à-dire la cible de l'événement).

Enfin, un exemple très simple d'exécution des effets secondaires sur le DOM de la page en définissant la valeur sur un objet.

Format les valeurs d'entrée en temps réel

Un modèle d'interface utilisateur commun consiste à formater les valeurs d'entrée dans des séquences plus précises que les lettres et les chaînes numériques. Un exemple de ceci est l'entrée téléphonique. Parfois, si le numéro de téléphone tapé ressemble à un numéro de téléphone, il a l'air et se sent mieux. L'astuce, cependant, est que lorsque nous formons les valeurs d'entrée, nous pouvons toujours avoir besoin d'une version non format des données.

Il s'agit d'une tâche facile pour le proxy JavaScript.

Lorsque vous tapez des numéros dans l'entrée, ils seront formatés comme des numéros de téléphone américains standard (par exemple (123) 456-7890). Notez que le numéro de téléphone s'affiche également sous l'entrée en texte brut, tout comme l'exemple de chaîne inverse ci-dessus. Ce bouton sort à la fois les versions formatées et non formattées des données sur la console.

Alors, voici le code pour le proxy:

 constance constance = nouveau proxy (
  {
    _faire le ménage: '',
    nombre: '',
    Get Clean () {
      renvoie ce._clean;
    }
  },
  {
    get: function (cible, prop) {
      if (! Prop.startswith ('_')) {
        return cible [prop];
      } autre {
        Retour 'Entrée introuvable!'
      }
    },
    set: function (cible, prop, valeur) {
      if (! Prop.startswith ('_')) {
        Target._Clean = value.replace (/ \ d / g, '') .SubString (0, 10);

        const sections = {
          zone: cible._clean.substring (0, 3),
          préfixe: cible._clean.substring (3, 6),
          Ligne: Target._Clean.Substring (6, 10)
        }

        Target.number =
          Target._Clean.length> 6?
            Target._Clean.length> 3?
              Target._Clean.length> 0?

        document.QuerySelectorall ('[data-phone_number]'). foreach (item => {
          if (item.tagname === 'input') {
            item.value = cible.number;
          } autre {
            item.innerText = Target.number;
          }
        });

        Retour Vrai;
      } autre {
        retourne false;
      }
    }
  }
));

Il y a plus de code dans cet exemple, alors décomposons-le. La première partie est l'objet cible que nous initialisons en interne dans le proxy. Il a trois aspects.

 {
  _faire le ménage: '',
  nombre: '',
  Get Clean () {
    renvoie ce._clean;
  }
},

La première clé _clean est notre variable qui contient la version non formatée des données. Il commence par le modèle de dénomination variable traditionnel, le traitant comme "privé". Nous voulons le rendre indisponible dans des circonstances normales. Au fur et à mesure que nous allons plus loin, nous le présenterons davantage.

Le deuxième numéro de clé enregistre simplement la valeur du numéro de téléphone formaté.

La troisième "clé" est une fonction Get avec le nom Clean. Cela renverra la valeur de notre variable _clean privée. Dans ce cas, nous renvoyons simplement cette valeur, mais cela offre la possibilité de faire d'autres opérations à ce sujet si nous le souhaitons. C'est comme le Getter Proxy du Proxy Getter. Cela peut sembler étrange, mais cela fournit un moyen facile de contrôler les données. Selon vos besoins spécifiques, cela peut être un moyen assez simple de gérer cette situation. Cela fonctionne pour notre exemple simple ici, mais des étapes supplémentaires peuvent être nécessaires.

Est maintenant le piège de Get pour le proxy.

 get: function (cible, prop) {
  if (! Prop.startswith ('_')) {
    return cible [prop];
  } autre {
    Retour 'Entrée introuvable!'
  }
},

Tout d'abord, nous vérifions l'hélice ou la clé d'objet entrante pour déterminer si elle ne commence pas par un soulignement. Si cela ne commence pas par le soulignement, nous avons juste besoin de le retourner. Si cela commence par un soulignement, nous retournons une chaîne indiquant que l'entrée n'a pas été trouvée. Ce type de rendement négatif peut être géré de différentes manières au besoin. Renvoie une chaîne, renvoie une erreur ou exécute du code avec différents effets secondaires. Cela dépend entièrement de la situation spécifique.

Une chose à noter dans mon exemple est que je ne m'occupe pas d'autres pièges à proxy qui pourraient être utilisés avec ce qui est considéré comme une variable privée dans le proxy. Pour protéger ces données plus en détail, vous devez considérer d'autres pièges comme [DefineProperty] ( https://www.php.cn/link/cd69510f4a69bc0ef6ba504331b9d546 ou propriétaires - généralement tout ce qui concerne le proxy de la manipulation. Mais si c'est quelqu'un d'autre, vous voudrez peut-être envisager de verrouiller autant de contenu que possible.

C'est maintenant là que la majeure partie de la magie se produit dans cet exemple - Tipe-Set:

 set: function (cible, prop, valeur) {
  if (! Prop.startswith ('_')) {
    Target._Clean = value.replace (/ \ d / g, '') .SubString (0, 10);

    const sections = {
      zone: cible._clean.substring (0, 3),
      préfixe: cible._clean.substring (3, 6),
      Ligne: Target._Clean.Substring (6, 10)
    }

    Target.number =
      Target._Clean.length> 6?
        Target._Clean.length> 3?
          Target._Clean.length> 0?

    document.QuerySelectorall ('[data-phone_number]'). foreach (item => {
      if (item.tagname === 'input') {
        item.value = cible.number;
      } autre {
        item.innerText = Target.number;
      }
    });

    Retour Vrai;
  } autre {
    retourne false;
  }
}

Tout d'abord, effectuez les mêmes vérifications des variables privées dans le proxy. Je ne teste pas vraiment d'autres types d'accessoires, mais vous voudrez peut-être envisager de le faire ici. Je suppose que seule la clé numérique de l'objet cible proxy sera ajustée.

La valeur transmise (la valeur saisie) dépouillera tout sauf les caractères numériques et l'enregistrera sur la touche _Clean. Cette valeur est ensuite utilisée tout au long du processus pour se reconstruire en valeur formatée. Fondamentalement, chaque fois que vous tapez, toute la chaîne est reconstruite en temps réel au format attendu. La méthode de la substance verrouille le numéro à un numéro à dix chiffres.

Créez ensuite un objet Sections pour enregistrer différentes parties de notre numéro de téléphone, en fonction d'une ventilation des numéros de téléphone américains. À mesure que la longueur de la variable _clean augmente, nous mettons à jour le numéro du modèle de format que nous voulons voir à ce moment-là.

Un QuerySelectoral est à la recherche de tous les éléments avec l'attribut Data-Phone_number Data et les exécute via une boucle FOREAK. Si l'élément est une entrée pour mettre à jour la valeur, le texte interne de tout autre élément est mis à jour. C'est ainsi que le texte apparaît sous l'entrée. Si nous voulons placer un autre élément d'entrée avec cet attribut de données, nous verrons sa valeur mise à jour en temps réel. C'est une façon de créer des liaisons unidirectionnelles ou bidirectionnelles, selon les exigences.

Enfin, revenez vrai pour faire savoir au proxy que tout se passe bien. Renvoie Faux si l'hélice ou la clé entrante commence par un soulignement.

Enfin, l'auditeur d'événements qui fait ce travail:

 document.QuerySelectorall ('entrée [data-phone_number]'). foreach (item => {
  item.addeventListener ('input', (e) => {
    phone.number = e.target.value;
  });
});

document.QuerySelector ('# get_data'). addEventListener ('click', (e) => {
  Console.log (téléphone.Number);
  Console.log (Phone.Clean);
});

Le premier groupe recherche toutes les entrées avec nos attributs de données spécifiques et y ajoute des auditeurs d'événements. Pour chaque événement d'entrée, la valeur de clé numérique du proxy est mise à jour avec la valeur actuellement entrée. Puisque nous formations la valeur d'entrée à chaque fois que nous l'envoyons, nous supprimons tous les caractères qui ne sont pas des nombres.

Le deuxième ensemble de boutons qui recherchent la sortie de deux ensembles de données (selon les besoins) et la sortie de la console. Cela montre comment nous écrivons du code pour demander les données requises à la demande. Espérons qu'il est clair que Phone.Clean fait référence à la fonction proxy Get dans l'objet cible, qui renvoie la variable _Clean dans l'objet. Notez qu'il n'est pas appelé comme une fonction comme Phone.Clean (), car il agit comme un proxy Get dans notre proxy.

Stockage des numéros dans le tableau

Vous pouvez utiliser des tableaux comme "objet" cible dans le proxy au lieu d'objets. Comme ce sera un tableau, il y a quelques choses à considérer. La fonctionnalité d'un tableau (comme push ()) sera gérée d'une manière ou d'une autre dans le piège du secteur du proxy. De plus, dans ce cas, la création d'une fonction personnalisée dans le concept d'objet cible ne fonctionne pas réellement. Cependant, il y a des choses utiles à faire avec les tableaux comme cibles.

Bien sûr, le stockage des numéros dans les tableaux n'a rien de nouveau. Évidemment. Cependant, je vais ajouter certaines règles à ce tableau de stockage de chiffres, tels que l'autorisation des valeurs en double et l'autorisation de nombres. Je fournirai également certaines options de sortie telles que les valeurs de tri, de résumé, de moyenne et de compensation. Mettez ensuite à jour une petite interface utilisateur qui contrôle tout cela.

Voici les objets proxy:

 const nombres = nouveau proxy ([],
  {
    get: function (cible, prop) {
      message.classList.Remove ('Error');

      if (prop === 'SORT') return [... Target] .sort ((a, b) => a - b);
      if (prop === 'sum') return [... cible] .reduce ((a, b) => ab);
      if (prop === '"moyen") retourne [... cible] .reduce ((a, b) => ab) / cible.length;

      if (prop === 'clear') {
        Message.InnerText = `$ {Target.Length} Numéro $ {Target.Length === 1?
        Target.splice (0, Target.Length);
        Collection.InnerText = Target;
      }

      return cible [prop];
    },
    set: function (cible, prop, valeur) {
      if (prop === 'Longueur') retourne true;

      datainput.value = '';
      message.classList.Remove ('Error');

      if (! Number.IsInteger (valeur)) {
        Console.Error («Données fournies n'est pas un nombre!»);
        message.innerText = 'Données fournies n'est pas un nombre!';
        message.classList.add ('error');
        retourne false;
      }

      if (target. y compris (valeur)) {
        Console.Error (`Number $ {Value} a déjà été soumis!`);
        message.innerText = `Number $ {value} a déjà été soumis!`;
        message.classList.add ('error');
        retourne false;
      }

      cible [prop] = valeur;
      Collection.InnerText = Target;
      Message.innerText = `Number $ {value} ajouté!`;

      Retour Vrai;
    }
  });

Pour cet exemple, je vais commencer par le piège du secteur.

La première chose à faire est de vérifier si l'attribut de longueur est défini sur un tableau. Il renvoie simplement vrai pour que cela se produise de la manière habituelle. Si vous devez réagir à la longueur définie, il peut toujours ajouter du code au bon endroit.

Les deux lignes de code suivantes se réfèrent à deux éléments HTML stockés sur la page à l'aide de QueySelector. Datainput est l'élément d'entrée, que nous voulons effacer à chaque fois que nous entrons. Le message est l'élément qui contient la réponse aux modifications du tableau. Comme il a le concept d'un état d'erreur, nous nous assurons qu'il n'est pas dans cet état à chaque fois qu'il est entré.

Le premier si vérifie si l'entrée est réellement un nombre. Sinon, cela effectuera quelques choses. Il émet une erreur de console indiquant le problème. L'élément de message obtient la même déclaration. Ensuite, le message entre dans un état d'erreur via la classe CSS. Enfin, il renvoie False, ce qui oblige également l'agent à émettre sa propre erreur à la console.

Le second si vérifie si l'entrée existe déjà dans le tableau; n'oubliez pas que nous ne voulons pas répéter. En cas de duplication, le même message passant que dans le premier si se produit. La livraison de messages est légèrement différente car elle est un modèle littéral afin que nous puissions voir des valeurs en double.

La dernière partie suppose que tout se passe bien et peut continuer. La valeur est définie comme d'habitude, puis nous mettons à jour la liste des collections. La collection fait référence à un autre élément de la page qui nous montre la collection actuelle de numéros dans le tableau. De même, les messages sont mis à jour avec les entrées ajoutées. Enfin, nous revenons vrai pour faire savoir au proxy que tout se passe bien.

Maintenant, le piège Get est légèrement différent de l'exemple précédent.

 get: function (cible, prop) {
  message.classList.Remove ('Error');

  if (prop === 'SORT') return [... Target] .sort ((a, b) => a - b);
  if (prop === 'sum') return [... cible] .reduce ((a, b) => ab);
  if (prop === '"moyen") retourne [... cible] .reduce ((a, b) => ab) / cible.length;

  if (prop === 'clear') {
    Message.InnerText = `$ {Target.Length} Numéro $ {Target.Length === 1?
    Target.splice (0, Target.Length);
    Collection.InnerText = Target;
  }

  return cible [prop];
},

Ce qui se passe ici, c'est qu'un "accessoire" n'est pas une méthode de tableau normale; Par exemple, le premier "prop" est déclenché par cet écouteur d'événements:

 dataSort.addeventListener ('click', () => {
  message.innerText = nombres.sort;
});

Par conséquent, lorsque le bouton de tri est cliqué, le texte interne de l'élément de message sera mis à jour à l'aide du contenu renvoyé par nombres.sort. Il agit comme des interceptions de proxy et renvoie les getters pour les résultats liés à la matrice atypique.

Après avoir supprimé l'état d'erreur potentiel de l'élément de message, nous déterminons ensuite si une opération de récupération de réseau non standard devrait se produire. Chaque opération renvoie une opération sur les données du tableau d'origine sans modifier le tableau d'origine. Cela se fait en utilisant l'opérateur d'extension sur la cible pour créer un nouveau tableau, puis en utilisant la méthode du tableau standard. Chaque nom doit impliquer ce qu'il fait: trier, résumer, moyen et clair. Eh bien, la compensation n'est pas une méthode de tableau standard, mais cela semble bon. Étant donné que les entrées peuvent être triées dans n'importe quel ordre, nous pouvons la faire fournir une liste triée ou effectuer des fonctions mathématiques sur les entrées. Efface efface simplement le tableau, comme vous pouvez vous y attendre.

Voici d'autres auditeurs d'événements pour les boutons:

 dataform.addeventListener ('soumi', (e) => {
  E.PreventDefault ();
  nombres.push (nombre.parseInt (datainput.value));
});

dataSubmit.addeventListener ('click', () => {
  nombres.push (nombre.parseInt (datainput.value));
});

dataSort.addeventListener ('click', () => {
  message.innerText = nombres.sort;
});

datasum.addeventListener ('click', () => {
  message.innerText = nombres.sum;
});

dataAverage.addeventListener ('click', () => {
  message.innerText = nombres.verage;
});

dataclear.addeventListener ('click', () => {
  nombres.Clear;
});

Nous pouvons étendre et ajouter des fonctionnalités aux tableaux de plusieurs façons. J'ai vu un exemple de tableau qui permet la sélection des entrées avec un indice négatif, qui compte depuis la fin. Trouvez les entrées dans le tableau d'objet en fonction des valeurs d'attribut dans l'objet. Renvoie un message au lieu d'être non défini lorsque vous essayez d'obtenir une valeur qui n'existe pas dans le tableau. Il existe de nombreuses idées pour profiter et explorer la procuration sur les tableaux.

Formulaire d'adresse interactive

Les formulaires d'adresse sont des choses assez standard sur les pages Web. Ajoutons une certaine interactivité pour une confirmation amusante (et non standard). Il peut également agir comme une collecte de données pour les valeurs de formulaire dans un seul objet, qui peut être demandé à la demande.

Voici les objets proxy:

 const Modèle = nouveau proxy (
  {
    nom: '',
    Adresse 1: '',
    Adresse2: '',
    ville: '',
    État: '',
    fermeture éclair: '',
    getData () {
      retour {
        Nom: this.name || «Pas d'entrée!»
        Adresse1: this.address1 || «Pas d'entrée!»
        Adresse2: this.address2 || «Pas d'entrée!»
        ville: this.city || «pas d'entrée!»
        État: this.state || «pas d'entrée!»
        zip: this.zip || «pas d'entrée!
      };
    }
  },
  {
    get: function (cible, prop) {
      return cible [prop];
    },
    set: function (cible, prop, valeur) {
      cible [prop] = valeur;

      if (prop === 'zip' && value.length === 5) {
        fetch (`https://api.zippopotam.us/us/$ {valeur}`)
          .Then (Response => Response.json ())
          .Then (data => {
            Model.City = data.places [0] ['Place Name'];
            Document.QuerySelector ('[Data-model = "City"]'). Value = Target.City;

            Model.State = data.places [0] [«Abréviation d'état»];
            Document.QuerySelector ('[Data-model = "State"]'). Value = Target.State;
          });
      }

      document.QuerySelectorall (`[data-model =" $ {prop} "]`) .ForEach (item => {
        if (item.tagname === 'input' || item.tagname === 'select') {
          item.value = valeur;
        } autre {
          item.innerText = valeur;
        }
      })

      Retour Vrai;
    }
  }
));

L'objet cible est très simple; chaque entrée entrée dans le formulaire. La fonction GetData renvoie l'objet, mais si la valeur de la propriété est une chaîne vide, elle changera en "pas d'entrée!"

La fonction Getter transmet simplement le contenu comme d'habitude. Vous n'aurez peut-être pas besoin de le faire, mais j'aime l'inclure afin de le terminer.

La fonction setter définit la valeur à prop. Cependant, si vous vérifie si l'accessoire qui sera défini est le code postal. Si c'est le cas, nous vérifions si la longueur de valeur est de 5. Lorsqu'il est évalué dans true, nous exécuterons une récupération qui utilise l'API de recherche d'adresse hit du code postal. Toute valeur renvoyée est insérée dans la propriété de l'objet, l'entrée de la ville et l'état de sélection dans l'élément sélectionné. Il s'agit d'un exemple de raccourci pratique qui permet à l'utilisateur d'éviter d'avoir à taper ces valeurs. Ces valeurs peuvent être modifiées manuellement si nécessaire.

Pour la section suivante, examinons un exemple d'élément d'entrée:

<code></code>

Le proxy a un QuerySelectorall qui recherche tout élément avec des attributs de données correspondants. C'est la même chose que l'exemple de chaîne inverse que nous avons vu auparavant. S'il trouve une correspondance, il met à jour la valeur d'entrée ou le texte intérieur de l'élément. C'est ainsi que la carte rotative est mise à jour en temps réel pour afficher l'apparence de l'adresse terminée.

Une chose à noter est la propriété du modèle de données sur l'entrée. La valeur de cet attribut de données informe en fait l'agent de la clé à verrouiller pendant son fonctionnement. L'agent regarde les éléments impliqués en fonction des clés impliquées. L'auditeur d'événements effectue la même opération en faisant savoir au proxy quelle clé est utilisée. Voici à quoi ça ressemble:

 document.QuerySelect
  modèle [e.target.dataset.model] = e.target.value;
});

Par conséquent, toutes les entrées dans l'élément principal seront situées et l'agent sera mis à jour lorsque l'événement d'entrée sera déclenché. La valeur de la propriété du modèle de données est utilisée pour déterminer la clé du proxy à localiser. En fait, nous utilisons un système de modèle. Considérez comment ce genre de chose peut être utilisé plus loin.

Quant au bouton "Get Data"? Il s'agit d'un journal console simple de la fonction GetData ...

 getDatabtn.addeventListener ('click', () => {
  console.log (Model.getData ());
});

Ceci est un exemple intéressant à construire et à utiliser pour explorer le concept. Ceci est un exemple qui me fait réfléchir à ce que je peux construire avec le proxy JavaScript. Parfois, vous n'avez besoin que d'un petit widget qui possède certaines capacités de collecte / protection des données et pouvez manipuler le DOM en interagissant simplement avec les données. Oui, vous pouvez utiliser Vue ou React, mais parfois ils peuvent être trop compliqués pour quelque chose d'aussi simple.

C'est ça

"C'est juste ça" signifie que cela dépend de chacun de vous et si vous allez approfondir le proxy JavaScript. Comme je l'ai dit au début de cet article, je n'ai couvert que les bases de cette fonctionnalité. Il peut fournir plus de fonctionnalités et peut être plus grand que les exemples que je fournis. Dans certains cas, il peut fournir la base d'un programme de petits assistants pour les solutions de niche. Il est évident que ces exemples peuvent être facilement créés à l'aide de fonctions de base qui remplissent la même fonction. Même la plupart de mon exemple de code est mélangé avec JavaScript régulier avec des objets proxy.

Le point, cependant, est de fournir des exemples d'utilisation d'un proxy pour montrer comment réagir aux interactions de données, tout contrôle comment réagir à ces interactions pour protéger les données, valider les données, manipuler DOM et obtenir de nouvelles données, toutes basées sur quelqu'un qui essaie d'enregistrer ou d'obtenir des données. Cela peut être très puissant à long terme et permet la création d'applications simples qui peuvent ne pas nécessiter de plus grandes bibliothèques ou cadres.

Donc, si vous êtes un développeur frontal qui se concentre davantage sur l'interface utilisateur, comme moi, vous pouvez explorer certaines des bases pour voir s'il existe un petit projet qui pourrait bénéficier de la procuration JavaScript. Si vous êtes plus un développeur JavaScript, vous pouvez commencer à approfondir les agents pour des projets plus grands. Peut-être un nouveau framework ou bibliothèque?

Juste une idée ...

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!