Utilisation du stock de banque de données de jQuery par rapport aux propriétés d'expande

Je développe un code en utilisant jQuery et j'ai besoin de stocker des données associées à certains éléments DOM. Il existe d'autres questions sur la façon de stocker des données arbitraires avec un élément html, mais je m'intéresse davantage à la raison pour laquelle je choisirais une option par rapport à l'autre.

Disons, pour des arguments extrêmement simplifiés, que je souhaite stocker une propriété "lineNumber" avec chaque ligne d'une table qui est "intéressante".

L'option 1 serait simplement de définir une propriété expande sur chaque élément DOM (j'espère que j'utilise le terme «expando» correctement):

$('.interesting-line').each(function(i) { this.lineNumber = i; }); 

L'option 2 serait d'utiliser la fonction données () de jQuery pour associer une propriété à l'élément:

 $('.interesting-line').each(function(i) { $(this).data('lineNumber', i); }); 

En ignorant toutes les autres lacunes de mon exemple de code, est-ce qu'il y a de fortes raisons pour lesquelles vous choisissez un moyen de stocker des propriétés sur l'autre?

Si vous créez un plugin, vous devez utiliser $.data . Si vous devez stocker l'attribut souvent et que vous devez rarement interroger le DOM, utilisez $.data .

Étant donné que pour toutes mes applications clients, j'ai tendance à stocker des attributs DOM personnalisés sur l'élément DOM eux-mêmes afin que je puisse les interroger plus tard en utilisant le sélecteur attribut [] :

 var domElement = $('.interesting-line[lineNumber=' + lineNumber + ']').get(0); 

Ceci est beaucoup plus lisible que d'itérer le jeu enveloppé appelant .data() sur chaque élément. Souvent, je coopère avec une autre bibliothèque tierce qui fonctionne sur un élément DOM, ce qui permet d'accéder rapidement et facilement à l'élément DOM via ce mécanisme, ce qui permet de rendre le code lisible.

Il est aussi simple que de stocker une table de consultation de cartographie des lineNumbers de lineNumbers aux éléments, mais la technique d'attribution expande est moins susceptible de perdre de la mémoire en comparaison, puisque vous ne stockez pas les références aux éléments DOM que vous devez nettoyer plus tard.

Mise à jour 5 ans plus tard Lisez ceci après avoir reçu un downvote [bien mérité]: ignorez le texte frappé ci-dessus. JQuery ne requiert pas le DOM en fonction des propriétés expande définies, et ne l'a pas fait pendant un certain temps. Donc utilisez $.data . Il n'y a aucune raison de polluer les DOM quand il n'y a pas d'utilisation pragmatique pour le faire.

L'utilisation de $.data vous protégera des fuites de mémoire.

Dans IE, lorsque vous attribuez un objet javascript à une propriété expando sur un élément DOM, les cycles qui traversent ce lien ne sont pas collectés. Si votre objet javascript contient une référence à l'objet dom, tout le cycle se répercutera. Il est tout à fait possible de se retrouver avec des références cachées aux objets DOM, en raison des fermetures, afin que vous puissiez fuir sans vous en rendre compte.

Le stockage de données jQuery est configuré pour éviter que ces cycles ne se forment. Si vous l'utilisez, vous ne ferez pas de mémoire de cette manière. Votre exemple ne fuit pas parce que vous mettez des primitives (chaînes) sur l'élément DOM. Mais si vous mettez un objet plus complexe là-bas, vous risquez de fuir.

Utilisez $.data afin que vous ne vous inquiétez pas.

L'utilisation de $.data ne modifie pas le DOM. Vous devriez utiliser $.data . Si vous créez un plugin, vous devez stocker un objet en $.data avec des propriétés sur cet objet plutôt que de stocker chacune de ces propriétés en tant que différentes paires de clés / valeurs dans la structure $.data .