Comment puis-je détecter les modifications de variables en JavaScript ?

Écoute des changements de variables en JavaScript

En JavaScript, il est souvent souhaitable d'être averti lorsque la valeur d'une variable change. Ceci peut être réalisé à l'aide de l'objet Proxy, introduit en 2018. L'objet Proxy permet de créer un proxy qui intercepte les modifications de propriété et répond en conséquence.

Pour utiliser l'objet Proxy, créez d'abord un objet cible à utiliser. observé :

var targetObj = {};

Ensuite, créez un proxy à l'aide de l'objet Proxy, en spécifiant un rappel à exécuter lorsqu'une propriété est set:

var targetProxy = new Proxy(targetObj, {
  set: function (target, key, value) {
      console.log(`${key} set to ${value}`);
      target[key] = value;
      return true;
  }
});

Lorsqu'une propriété de l'objet cible est définie via le proxy, la fonction de rappel est exécutée. Par exemple :

targetProxy.hello_world = "test"; // console: 'hello_world set to test'

L'objet Proxy présente des inconvénients dans la mesure où il n'est pas disponible dans les anciens navigateurs et peut ne pas se comporter comme prévu avec certains objets. Pour observer les changements dans les objets imbriqués, des bibliothèques spécialisées telles que Observable Slim peuvent être utilisées.

Observable Slim

Observable Slim est une bibliothèque conçue pour observer les changements dans les objets imbriqués. Pour l'utiliser, créez d'abord l'objet à observer :

var test = {testing:{}};

Ensuite, utilisez Observable Slim pour créer un proxy avec la fonction create, en spécifiant un rappel à exécuter lorsque des changements se produisent :

var p = ObservableSlim.create(test, true, function(changes) {
    console.log(JSON.stringify(changes));
});

Lorsqu'une propriété de l'objet observé change, la fonction de rappel est exécutée. Par exemple :

p.testing.blah = 42; // console:  [{"type":"add","target":{"blah":42},"property":"blah","newValue":42,"currentPath":"testing.blah",jsonPointer:"/testing/blah","proxy":{"blah":42}}]

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!