Introduction à object.observe-js tutoriel-php.cn

Introduction à object.observe

Les plats clés

Object.Observe, également connu sous le nom d'O.O, est une fonctionnalité à ajouter à JavaScript dans le cadre de ECMascript 7 pour prendre en charge la détection du changement d'objet nativement dans le navigateur. Il fonctionne directement sur l'objet sans créer d'emballages autour, ce qui le rend facile à utiliser et bénéfique pour les performances.
La méthode Observ () est une méthode statique asynchrone définie sur un objet qui peut être utilisé pour rechercher des changements d'un objet. Il accepte trois paramètres: un objet à observer, une fonction de rappel à appeler lorsqu'un changement est détecté, et un tableau facultatif contenant des types de modifications à surveiller.
Les tableaux d'observation sont similaires à l'observation d'objets, la seule différence étant que la fonction d'observateur doit être enregistrée à l'aide de l'array.observe au lieu de Object.Observe.
Un observateur enregistré sur un objet ou un tableau peut être supprimé à l'aide de objet.unobserve () ou, array.unobserve () respectivement. Cette méthode accepte deux paramètres, l'objet ou le tableau et le rappel à supprimer.

La liaison des données bidirectionnelle est désormais l'une des caractéristiques cruciales des applications côté client. Sans liaison de données, un développeur doit faire face à beaucoup de logique pour lier manuellement les données à la vue, chaque fois qu'il y a un changement dans le modèle. Les bibliothèques JavaScript comme Knockout, AngularJS et Ember ont une prise en charge de la liaison bidirectionnelle, mais ces bibliothèques utilisent différentes techniques pour détecter les modifications.

Les huitièmes de finale et les berceaux utilisent des observables. Les observables sont des fonctions enroulées autour des propriétés des objets du modèle. Ces fonctions sont invoquées chaque fois qu'il y a un changement de valeur de l'objet ou de la propriété correspondant. Bien que cette approche fonctionne bien et détecte et informe tous les changements, il enlève la liberté de travailler avec des objets JavaScript simples, car nous devons maintenant faire face aux fonctions.

Angular utilise la vérification sale pour détecter les modifications. Cette approche ne pollue pas l'objet modèle. Il enregistre des observateurs pour chaque objet ajouté au modèle. Tous ces observateurs sont exécutés chaque fois que le cycle Digest d'Angular entre en jeu et s'il y a des modifications des données. Ces modifications sont traitées par les observateurs correspondants. Le modèle reste un objet simple, car aucun emballage n'est créé autour de lui. Mais, cette technique provoque une dégradation des performances à mesure que le nombre d'observateurs augmente.

Qu'est-ce que l'objet.observe?

Object.Observe, A.K.A. O.O, est une fonctionnalité à ajouter à JavaScript dans le cadre de ECMascript 7 pour prendre en charge la détection de changement d'objet nativement dans le navigateur. Bien que ES7 ne soit pas encore terminé, cette fonctionnalité est déjà prise en charge dans les navigateurs basés sur des clignements (Chrome et Opera).

Parce que Object.Observe sera soutenu par les navigateurs nativement et qu'il fonctionne directement sur l'objet sans créer d'emballage autour de lui, l'API est à la fois facile à utiliser et une victoire pour les performances. Si Object.Observe est pris en charge par un navigateur, vous pouvez implémenter une liaison bidirectionnelle sans avoir besoin d'une bibliothèque externe. Cela ne signifie pas que toutes les bibliothèques de liaison bidirectionnelles existantes ne seront d'aucune utilité une fois qu'O.O sera implémenté. Nous en avons encore besoin pour mettre à jour efficacement les UIS après avoir détecté les modifications en utilisant O.O. En outre, les bibliothèques polyfiltraient en interne la logique de la détection des changements si tous les navigateurs ciblés ne prennent pas en charge O.O.

Observer les propriétés d'un objet

Maintenant que vous avez une idée de ce que O.O est bon, voyons-le en action.

La méthode Observ () est une méthode statique asynchrone définie sur l'objet. Il peut être utilisé pour rechercher des modifications d'un objet et il accepte trois paramètres:

un objet à observer
Une fonction de rappel à appeler lorsqu'un changement est détecté
un tableau facultatif contenant des types de modifications à surveiller

Voyons un exemple d'utilisation de la méthode. Considérez l'extrait suivant:

<span>var person = {
</span>  <span>name: 'Ravi',
</span>  <span>country: 'India',
</span>  <span>gender: 'Male'
</span><span>};
</span>
<span>function observeCallback(changes){
</span>  <span>console.log(changes);
</span><span>};
</span>
<span>Object.observe(person, observeCallback);
</span>
person<span>.name = 'Rama';  // Updating value
</span>person<span>.occupation = 'writer';  // Adding a new property
</span><span>delete person.gender;  // Deleting a property</span>

Copier après la connexion

Dans ce code, nous avons créé un objet littéral avec certaines données. Nous avons également défini une fonction nommée ObserveCallback () que nous utiliserons pour enregistrer les modifications de l'objet. Ensuite, nous commençons à observer les modifications en utilisant O.O. Enfin, nous avons effectué quelques changements sur l'objet.

Si vous voyez la sortie sur la console, vous verrez que toutes les trois modifications sont détectées et enregistrées. La capture d'écran suivante montre le résultat produit par l'extrait:

O.O fonctionne de manière asynchrone et il regroupe tous les changements et les transmets au rappel lorsqu'il s'appelle. Ainsi, ici, nous avons reçu trois entrées pour les trois modifications appliquées sur l'objet. Comme vous le voyez, chaque entrée se compose du nom de la propriété modifiée, de l'ancienne valeur, du type de changement et de l'objet lui-même avec les nouvelles valeurs.

Une démo en direct du code précédent est signalée ci-dessous (n'oubliez pas d'ouvrir la console pour voir le résultat):

Voir le stylo Emkveb par SitePoint (@SitePoint) sur Codepen.

Dans notre code, nous n'avons pas spécifié les types de modifications à rechercher, il observe donc les ajouts, les mises à jour et les suppressions. Cela peut être contrôlé en utilisant le troisième paramètre de la méthode d'observation comme suit:

<span>var person = {
</span>  <span>name: 'Ravi',
</span>  <span>country: 'India',
</span>  <span>gender: 'Male'
</span><span>};
</span>
<span>function observeCallback(changes){
</span>  <span>console.log(changes);
</span><span>};
</span>
<span>Object.observe(person, observeCallback);
</span>
person<span>.name = 'Rama';  // Updating value
</span>person<span>.occupation = 'writer';  // Adding a new property
</span><span>delete person.gender;  // Deleting a property</span>

Copier après la connexion

Enregistrement des notifications

La méthode Observ () est capable de détecter les modifications apportées aux propriétés directes ajoutées à un objet. Il ne peut pas détecter les modifications des propriétés créées à l'aide de Getters et Setters. Étant donné que le comportement de ces propriétés est contrôlé par l'auteur, la détection des changements doit également être détenue par l'auteur. Pour résoudre ce problème, nous devons utiliser un notificateur (disponible via object.getNotifier ()) pour informer les modifications apportées sur la propriété.

Considérez l'extrait suivant:

<span>Object.observe(person, observeCallback, ['add', 'update']);</span>

Copier après la connexion

Le todotype est une fonction constructeur avec deux propriétés. En plus d'eux, bloqué est ajouté à l'aide de object.defineproperty. Dans notre exemple, le secteur défini pour cette propriété est simple. Dans une application commerciale typique, elle peut effectuer certaines validations et ne peut pas définir de la valeur au cas où la validation échoue. Cependant, je voulais garder les choses simples.
Dans la dernière note, vous pouvez voir que dans notre exemple, la notification n'est envoyée que lorsqu'il y a une mise à jour.

La modification apportée à la propriété bloquée produit le résultat suivant dans les outils de développeur Chrome:

Une démo en direct de cet exemple est signalée ci-dessous (n'oubliez pas d'ouvrir la console pour voir le résultat):

Voir le stylo npzgoo par SitePoint (@SitePoint) sur Codepen.

observer plusieurs changements

Parfois, nous pouvons avoir un calcul pour fonctionner après que deux propriétés ou plus soient modifiées d'une manière ou d'une autre. Bien que nous puissions informer ces deux modifications individuellement à l'aide d'un notificateur, il serait préférable d'envoyer une seule notification avec un nom de type personnalisé pour indiquer que les deux valeurs sont modifiées. Cela peut être fait en utilisant la méthode notifier.performchange (). Cette méthode accepte trois arguments:

Nom du type personnalisé
Fonction de rappel effectuant les modifications. La valeur renvoyée de cette fonction est utilisée dans l'objet de changement
objet sur lequel les modifications sont appliquées

Ajoutons une nouvelle propriété nommée à la classe TodotypeDefined ci-dessus. La valeur de cette propriété spécifie si l'élément TODO est terminé ou non. Lorsque la valeur de terminé est définie sur true, nous devons également définir la valeur de la propriété bloquée sur true.

l'extrait suivant définit cette propriété:

<span>function <span>TodoType</span>() {
</span>  <span>this.item = '';
</span>  <span>this.maxTime = '';
</span>  
  <span>var blocked = false;
</span>  
  <span>Object.defineProperty(this, 'blocked', {
</span>    <span>get:function(){
</span>      <span>return blocked;
</span>    <span>},
</span>    <span>set: function(value){
</span>      <span>Object.getNotifier(this).notify({
</span>        <span>type: 'update',
</span>        <span>name: 'blocked',
</span>        <span>oldValue: blocked
</span>      <span>});
</span>      blocked <span>= value;
</span>    <span>}
</span>  <span>});
</span><span>}
</span>
<span>var todo = new TodoType();
</span>
todo<span>.item = 'Get milk';
</span>todo<span>.maxTime = '1PM';
</span>
<span>console.log(todo.blocked);
</span>
<span>Object.observe(todo, function(changes){
</span>  <span>console.log(changes);
</span><span>}, ['add', 'update']);
</span>
todo<span>.item = 'Go to office';
</span>todo<span>.blocked = true;</span>

Copier après la connexion

Une fois que la logique à l'intérieur du rappel de PerformChange est exécutée, la modification sera notifiée avec le type de modification personnalisé qui y est passé. Ce type n'est pas observé par object.observe par défaut; Nous devons demander explicitement à O.O d'observer les modifications du type de personnalité. L'extrait suivant montre un O.O modifié sur l'objet TODO pour observer le changement du type personnalisé avec les types d'ajout et de mise à jour:

<span>var person = {
</span>  <span>name: 'Ravi',
</span>  <span>country: 'India',
</span>  <span>gender: 'Male'
</span><span>};
</span>
<span>function observeCallback(changes){
</span>  <span>console.log(changes);
</span><span>};
</span>
<span>Object.observe(person, observeCallback);
</span>
person<span>.name = 'Rama';  // Updating value
</span>person<span>.occupation = 'writer';  // Adding a new property
</span><span>delete person.gender;  // Deleting a property</span>

Copier après la connexion

Le extrait ci-dessus définit la valeur de bloquée sur true avant de définir le TRUE. Ainsi, il envoie une notification avec le type de changement personnalisé. La capture d'écran suivante montre les détails de l'objet de modification renvoyé par le type personnalisé:

Une démo en direct de cet exemple est signalée ci-dessous (n'oubliez pas d'ouvrir la console pour voir le résultat):

Voir le stylo yyexgd par SitePoint (@SitePoint) sur Codepen.

Observer les tableaux

Les tableaux d'observation sont similaires à l'observation d'objets. La seule différence est que la fonction de l'observateur doit être enregistrée à l'aide de Array.Observe au lieu de Object.Observe. L'extrait suivant le démontre:

<span>Object.observe(person, observeCallback, ['add', 'update']);</span>

Copier après la connexion

Une démo en direct de cet exemple est signalée ci-dessous (n'oubliez pas d'ouvrir la console pour voir le résultat):

Voir le stylo gggezq par SitePoint (@SitePoint) sur Codepen.

Suppression des observateurs enregistrés

Un observateur enregistré sur un objet ou un tableau peut être supprimé à l'aide de objet.unobserve () ou, array.unobserve () respectivement. Cette méthode accepte deux paramètres, l'objet ou le tableau et le rappel à supprimer. Ainsi, pour utiliser cette méthode, nous devons avoir une référence du rappel.

<span>function <span>TodoType</span>() {
</span>  <span>this.item = '';
</span>  <span>this.maxTime = '';
</span>  
  <span>var blocked = false;
</span>  
  <span>Object.defineProperty(this, 'blocked', {
</span>    <span>get:function(){
</span>      <span>return blocked;
</span>    <span>},
</span>    <span>set: function(value){
</span>      <span>Object.getNotifier(this).notify({
</span>        <span>type: 'update',
</span>        <span>name: 'blocked',
</span>        <span>oldValue: blocked
</span>      <span>});
</span>      blocked <span>= value;
</span>    <span>}
</span>  <span>});
</span><span>}
</span>
<span>var todo = new TodoType();
</span>
todo<span>.item = 'Get milk';
</span>todo<span>.maxTime = '1PM';
</span>
<span>console.log(todo.blocked);
</span>
<span>Object.observe(todo, function(changes){
</span>  <span>console.log(changes);
</span><span>}, ['add', 'update']);
</span>
todo<span>.item = 'Go to office';
</span>todo<span>.blocked = true;</span>

Copier après la connexion

Conclusion

Une fois que O.O est entièrement pris en charge par tous les navigateurs, la détection des modifications sera standardisée dans toutes les bibliothèques côté client. Aurelia a déjà commencé à l'utiliser, la bibliothèque de détection de changement d'Angular 2, Watchtower.js, utilise O.O en interne, et Ember va également l'utiliser pour la détection des changements à l'avenir. Angular 2 et Aurelia ont des Pollyfills mis en œuvre pour se replier lorsque O.O n'est pas disponible nativement.

L'avenir autour de la reliure bidirectionnelle côté client sera plus lumineux avec ce excellent ajout aux navigateurs. Allons avec impatience que d'autres navigateurs se rattrapent plus tôt!

Questions fréquemment posées (FAQ) sur Object.Observe

Pourquoi object.observe a-t-il été déprécié?

objet.Observe a été déprécié car il s'est avéré avoir plusieurs limitations et problèmes. Il n'a pas été en mesure d'observer les modifications apportées dans une fonction, et il n'a pas non plus pu suivre les modifications apportées au prototype d'un objet. De plus, il s'est avéré inefficace en termes de performances, car il nécessitait beaucoup de ressources pour suivre les changements dans les grands objets. La dépréciation a également été influencée par l'introduction de nouvelles fonctionnalités dans ES6, telles que les procurations et les réflexions, qui fournissent des moyens plus efficaces d'observer et de réagir aux changements dans les objets.

Quelles sont les alternatives à object.observe?

Avec la dépréciation de Object.Observe, les développeurs se sont tournés vers d'autres méthodes pour observer les changements dans les objets. L'une des alternatives les plus populaires est l'utilisation des procurations ES6. Les procurations vous permettent de définir un comportement personnalisé pour les opérations fondamentales sur des objets, tels que la recherche de propriété, l'attribution, l'énumération, l'invocation de la fonction, etc. Une autre alternative est l'utilisation de bibliothèques telles que mobx ou vue.js, qui fournissent leurs propres mécanismes pour observer les changements dans les objets.

Comment les proxys ES6 fonctionnent-ils comme alternative à objet.observe?

Les procurations ES6 fournissent un moyen de personnaliser le comportement des opérations fondamentales sur les objets. Un proxy est créé avec deux paramètres: l'objet cible et un objet de gestionnaire. L'objet de gestionnaire définit les «pièges» pour diverses opérations sur l'objet cible. Lorsque ces opérations sont effectuées, le piège correspondant dans le gestionnaire est déclenché, permettant l'exécution de comportement personnalisé. Cela fait des procurations un outil puissant pour observer et réagir aux changements dans les objets.

Quels sont les avantages de l'utilisation des proxys ES6 sur Object.Observe?

Les procurations ES6 offrent plusieurs avantages par rapport à Object.Observe. Ils fournissent un moyen plus flexible et puissant d'observer et de réagir aux changements dans les objets. Avec les proxys, vous pouvez définir un comportement personnalisé pour un large éventail d'opérations, pas seulement les modifications des propriétés. Les proxys fonctionnent également mieux que Object.Observe, en particulier lorsqu'ils traitent de grands objets. De plus, les proxys font partie de la norme ES6, ce qui signifie qu'ils sont pris en charge par tous les navigateurs modernes.

Puis-je toujours utiliser objet.observe dans mes projets?

Bien qu'il soit techniquement possible de Utilisez toujours object.observe dans vos projets, il est fortement découragé. Object.Observe a été obsolète et supprimé de la norme JavaScript, ce qui signifie qu'il n'est plus maintenu et peut ne pas être pris en charge par tous les navigateurs. L'utilisation de fonctionnalités obsolètes peut entraîner des problèmes de compatibilité et d'autres problèmes dans vos projets. Il est recommandé d'utiliser des alternatives telles que des proxies ES6 ou des bibliothèques comme MOBX ou VUE.js.

Comment puis-je migrer de l'objet.observe vers les proxies ES6?

Migrating de object.observe to ES6 Les proxys impliquent le remplacement des appels objet.observe par des objets proxy. Au lieu d'observer les modifications des propriétés d'un objet, vous définissez des pièges pour les opérations que vous souhaitez observer dans l'objet de gestionnaire de la procuration. Cela peut impliquer une certaine refactorisation de votre code, mais il fournit un moyen plus flexible et efficace d'observer les changements dans les objets.

Quel est l'impact des performances de l'utilisation des proxies ES6?

Les proxys ES6 sont généralement plus efficaces que l'objet.observe, en particulier lorsqu'ils traitent de grands objets. Cependant, comme toute fonctionnalité, ils devraient être utilisés judicieusement. La création d'un proxy pour chaque objet de votre application peut entraîner des problèmes de performances. Il est préférable d'utiliser des proxys uniquement lorsque cela est nécessaire et de garder les objets de gestionnaire aussi légers que possible.

Y a-t-il des limitations ou des problèmes avec l'utilisation des proxys ES6?

Alors que les procurations ES6 sont un outil puissant, Ils ont certaines limites. Par exemple, ils ne peuvent pas être utilisés pour observer les modifications de la propriété de longueur des tableaux. De plus, les procurations ne fournissent pas de moyen d'observer les modifications du prototype d'un objet. Cependant, ces limitations peuvent souvent être travaillées en utilisant d'autres caractéristiques d'ES6, comme la réflexion.

Comment les bibliothèques comme MOBX ou VUE.js gèrent-elles l'observation des objets?

Des bibliothèques comme MOBX ou VUE .js fournissent leurs propres mécanismes pour observer les changements dans les objets. Par exemple, MOBX utilise des propriétés observables et des valeurs calculées pour suivre les changements, tandis que Vue.js utilise un modèle de données réactif. Ces bibliothèques fournissent une API de haut niveau pour l'observation des objets, ce qui facilite l'utilisation que les proxies ES6 bruts.