jQuery Data Wrangling : quand utiliser $.data() contre $.attr() ?

Data Wrangling avec jQuery : $.data vs $.attr

Dans le contexte de la manipulation des attributs de données avec jQuery, $.data et $.attr sert des objectifs distincts.

$.data : données internes Stockage

$.data est principalement utilisé pour stocker des données dans le cache interne de jQuery, $.cache, plutôt que directement dans le DOM. Lorsque des données sont attribuées à un élément à l'aide de $.data, elles sont associées à l'objet de l'élément, ce qui permet de stocker des objets et des références complexes. De plus, $.data effectue une diffusion automatique, convertissant les données des chaînes en types reconnus tels que booléen, numérique et JSON.

$.attr : attributs de données HTML5

En revanche, $.attr est utilisé pour définir et récupérer les attributs de données HTML5, qui sont stockés en tant qu'attributs dans le DOM. Ces attributs sont conçus pour faciliter le stockage des données de manière standardisée. Lors de l'utilisation d'attributs de données, il est crucial de noter la conversion trait d'union-camelCase qui se produit. Les traits d'union dans les noms d'attributs sont automatiquement convertis en camelCase lors de l'accès aux données via $.data.

Bonnes pratiques

• Pour les données reçues du serveur, utilisez $. data pour les stocker sur l'attribut data de l'élément DOM.
• Pour définir les attributs de données HTML5, utilisez $.attr.
• Lorsque vous accédez aux noms d'attributs de données avec trait d'union, utilisez la version camelCase en JavaScript, car elle est plus cohérente.
• Pour conserver la valeur de chaîne d'origine d'un attribut de données, utilisez $.attr .
• Pour la diffusion automatique de données, telles que des nombres et des chaînes, utilisez $.data.
• Dans jQuery 1.8 rc 1 et versions ultérieures, les valeurs numériques ne sont générées automatiquement que si leur représentation reste la même. Pour des syntaxes numériques alternatives, utilisez un opérateur unaire pour convertir la valeur en nombre.

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!