Méthode jQuery.data() et fuite de mémoire

Dans la documentation officielle de jQuery , il est rappelé aux utilisateurs qu'il s'agit d'une méthode de bas niveau et qu'elle doit être remplacée par la méthode .data() . $.data(element, key, value) peut attacher n'importe quel type de données aux éléments DOM, mais les fuites de mémoire causées par des références circulaires doivent être évitées. Le texte original est le suivant :

La méthode jQuery.data() nous permet d'attacher des données de tout type aux éléments du DOM de manière à l'abri des références circulaires et donc des fuites de mémoire. Nous pouvons définir plusieurs valeurs distinctes pour un seul élément et les récupérer ultérieurement :

Mais les problèmes de cette méthode ne s’arrêtent pas là. Dans JQUERY FORUM, ce problème a été discuté en profondeur et robert.katic a proposé une solution. Si la méthode $.data() est appliquée à l'objet hôte, le fonctionnement sera optimisé, mais si cette méthode est utilisée sur l'objet local, le résultat risque de ne pas être satisfaisant. Dans des circonstances normales, un élément peut être supprimé à l'aide de la méthode .remove() et ses données respectives effacées. Mais pour les objets locaux, cela ne peut pas être complètement supprimé. Ces données associées continuent jusqu'à la fermeture de l'objet fenêtre. Ces problèmes existent également dans l'objet événement, car les gestionnaires d'événements (gestionnaires) sont également stockés à l'aide de cette méthode.

Ainsi, le moyen le plus simple de résoudre ce problème consiste à stocker les données dans un nouvel attribut de l’objet local. Tout de suite:

//...
si (elem.nodeType) {
cache[id] = dataObject;
elem[expando] = id;
} autre {
elem[expando] = dataObject;
}
//...

Cependant, cette méthode est inutile lorsque des problèmes d’héritage sont impliqués. Essayez-le :

var parent = {};
var enfantA = Objet.create( parent );
var enfantB = Objet.create( parent );

$.data( parent, "foo", "valeur parent" );

// Cela peut même être intentionnel
$.data( enfantA, "foo" )
// => "valeur parent"
$.data( enfantB, "foo" )
// => "valeur parent"

// Cela n'est peut-être PAS intentionnel
$.data( childA, "foo", "childA value" );
$.data( parent, "foo" )
// => "valeur enfantA"
$.data( enfantB, "foo" )
// => "valeur enfantA"

Au début, l'objet stockant les données n'existe pas, donc un objet est créé pour stocker la nouvelle valeur, comme le montre la figure

Maintenant, nous essayons de modifier les mêmes données de l'objet childA.

L'objet childA ne possède pas ces données, il recherche donc la chaîne de prototypes. L'objet parent possède ces données et sa valeur est immédiatement écrasée. Par conséquent, si vous obtenez la valeur « foo » des deux objets parent et childB, vous obtiendrez la « valeur childA » au lieu de la « valeur parent ».