Je sais que c'est mauvais pour stocker des données dans le DOM, mais pourquoi?
J'ai entendu maintes et maintes fois que c'est une mauvaise pratique de "utiliser le DOM comme une base de données."
Alors que j'ai en grande partie d'accord avec ce sentiment, cette question est plus sur le moins de noir et de blanc cas. En gardant à l'esprit les dernières révisions de jQuery .data() méthodes et le HTML5 attribut data-spec, est-il vraiment si mauvais pour coller des données dans les DOM pour l'amour de complaisance?
Par exemple, j'ai récemment mis en place un "live" de la fonction de calcul sur une table avec plein d'entrées en faisant quelque chose comme ceci:
<table>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
</table>jQuery:
$('table').bind('calculate',function(){
var total = 0;
$(this).find('tr').each(function(){
total += $(this).data('value');
});
//display total
});
$('table input').bind('change keyup',function(){
$(this).closest('tr').data('value',$(this).val());
$(this).closest('table').trigger('calculate');
});C'est un exemple simplifié parce que je pourrait ignorer les appels à .data() et aller directement à l'entrée de valeurs, mais imaginons un peu plus complexe scénario où des éléments autres que les entrées sont en affectant les valeurs de ligne.
Est-il de mal à utiliser le DOM pour stocker des données simples dans ce genre de situation?
- Les nœuds dans votre arborescence DOM sont données.
- touché. mais vous savez ce que je veux dire... les gens m'ont conseillé de toujours créer une sorte de modèle dans la mémoire ici. serait-ce de me sauver la forme de la difficulté ou est-ce vraiment ok?
- Je suis en train de l'incompréhension de la question ou je suis malentendu comment jQuery de données() la méthode fonctionne. Je pensais que jQuery stockées ces valeurs dans son cache plutôt que littéralement fixation de données pour les DOM.
- non plus! Je ne savais pas que jQuery données() la méthode des valeurs stockées dans un cache. J'ai été confondu par ce:
As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object. The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5 specification.je venais juste de supposer que puisque attributs data-et .de données() semblait être couplé que jQuery a été en utilisant les DOM. Mais clairement il y a une autre magie qui se passe. Je dois juste vérifier à la source... - jQuery créances ne pas le stocker dans les DOM: "Les attributs data - sont tirés dans le premier moment, les données de la propriété est accessible et puis ne sont plus accessibles ou muté (toutes les valeurs de données sont ensuite enregistrées dans la mémoire interne en jQuery)."
Vous devez vous connecter pour publier un commentaire.
C'est bien pour stocker des données dans des objets DOM. Et puisque votre question est spécifique à jQuery de données de l'API, il est important de comprendre comment la
dataAPI travaille. J'ai écrit un réponse expliquant son fonctionnement interne d'un moment de retour. Les données de l'API ne conserve qu'une référence à l'objet DOM avec les données, et ne pas stocker quoi que ce soit à l'intérieur de la DOM objets eux-mêmes. Toutes les données sont stockées dans la plaine de vieux objets JavaScript.La question de savoir si c'est une bonne ou une mauvaise approche est une question de goût personnel. John Resig, le créateur de jQuery, a donné une conférence à Tech4Africa en 2010, où il parle de ce problème précis, et propose d'en finir avec une zone de stockage séparée et lier le tout avec le DOM à l'aide de l'API de données. Vous pouvez voir la discussion sur les YouTube (merci à @tine2k pour le lien). Si vous écoutez la conversation entière, vous trouverez quelques bons exemples de raisons pour lesquelles cette approche est logique et garde les choses simples.
Je crois que des arguments similaires peuvent être faites pour l'autre extrémité du spectre d'avoir vos données soigneusement caché les objets, et classes, et être séparé de la vue elle-même. Ce genre de pensée vient de les architectures traditionnelles tels que MVC.
Je dis que c'est bien d'aller avec l'un et l'autre - à l'aide du DOM pour stocker des données, ou à l'aide d'une approche classique. Il suffit de ne pas mélanger les deux, parce que vous modèle d'application est répandu partout.
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>Il existe cependant des arguments contre l'utilisation de DOM pour stocker des données:
Le DOM est censé être une vue de données. Les propriétés des éléments du DOM devrait être de métadonnées pour les éléments eux-mêmes, et non pas des données à partir du modèle.
Vous ne devez pas ajouter des propriétés aléatoires pour accueillir les objets que vous n'avez aucune idée de ce qu'ils pourraient faire avec eux.
Vous avez le même problème que les variables globales - si elle devient une pratique courante, vous devrez adopter un système pour éviter les collisions de noms.
Il y a aussi l'argument que le DOM est un peu ordinaire banque de données et que la structure de l'objet avec index sera beaucoup plus efficace pour rien d'autre que négligeable en matière de données.
Si vous ne disposez que de petites quantités de données et avoir le plein contrôle sur vos pages, puis aller de l'avant et mettre les données à la saisie de données des attributs et des propriétés. Mais ne pas stocker de gros morceaux ou des structures complexes.
Oh, et je ne pense pas qu'il y a des problèmes de performances d'accès à un élément et ses propriétés dans les DOM est probablement pas plus rapide ou plus lent que l'accès à une partie de la structure de l'objet, mais je suis sûr qu'il y a plus rapide et plus lent façons de faire les deux à la fois.
Je ne pense pas qu'il y a quelque chose mal avec l'enregistrement des données dans les DOM, mais je pense que le problème réside dans le stockage d'un beaucoup de données dans les DOM. Le navigateur ne ont à se débrouiller dans les DOM à la sortie de la pages, nous voir, et plus les données dans il y le plus la merde qu'il a à résoudre.
Je suis sûr qu'il y a aussi d'autres raisons, c'est juste mon déduction.
Ayant développé un peu de single page apps pour les appareils qui ont limité le navigateur de puissance, j'ai adopté un peu plus de normes personnelles au sujet de ces choses. La chose principale est que juste parce que JQuery prend en charge la numérisation par le DOM, qui ne suggèrent pas comme un performant approche. Si j'ai besoin de savoir qui LI a le focus, j'ai pu utiliser .index() ou .find() ou même .each(), mais en gardant cette valeur dans un modèle distinct de l'objet est préférable pour les raisons suivantes:
Selon Matt @ https://github.com/Matt-Esch/virtual-dom,
"La lecture de certains nœuds du DOM des propriétés même provoque des effets secondaires." J'ai tendance à être d'accord avec ce point, mais je vais avouer que je suis à la recherche pour plus d'éléments sur ce point, comme le gars nommé à poursuivre notre plus grand apps problèmes de performances que personnellement, je suis convaincu, sont liés principalement à DOM le code dépendant.