Bonne pratique sur les variables

Version imprimable

05/09/2012, 20h53
cetteame

Bonne pratique sur les variables

Bonjour,

N'étant pas très expérimenté en JavaScript et n'ayant rien trouvé sur Google, je pose la question ici :

Je me demandais si une variable attachée à un élément du DOM pouvait être une bonne pratique.

Concrètement, j'ai différent <input type="text"> dans ma page. Leur nombre et leur id est dynamique. Ces input contiennent un nombre sous forme de texte parce qu'il a une unité, une virgule, etc (par exemple : "12,48 €"). J'ai besoin de leur valeur en tant que nombre pour mes manipulations en JavaScript. Du coup, je pensais la stocker dans une variable attachée à l'élément du DOM (input.montant = 12.48; ).
[EDIT] Un exemple ultra simplifié : http://jsfiddle.net/wJmXv/
Est-ce que la ligne "this.montant = 1234.56;" vous semble bien ?

Est-ce que ça vous semble bon ? Ou est-ce que ça pose des problèmes de compatibilité ou ralentissement d’exécution ?

Merci pour vos ais plus éclairé que le mien. :)

Salut l'attachement de variable ("HTML5") directement sur le dom est possible et compatible sur tout les navigateurs je pense que oui faut tester, les version IE7 6 ... Je suis septique.
Par contre tu sera limite à ses attributs sur le dom.
Code:

1 2 3 4 5 6 7 8 <script> window.onload = function(){ var dataValue = document.getElementById("maDiv").getAttribute("data-value"); alert(dataValue); } </script> <div id="maDiv" data-type="homme" data-id="110" data-value="test value"></div>

05/09/2012, 23h06
NoSmoking

Bonsoir,

Citation:

Envoyé par cetteame

Bonjour,
Concrètement, j'ai différent <input type="text"> dans ma page. Leur nombre et leur id est dynamique. Ces input contiennent un nombre sous forme de texte parce qu'il a une unité, une virgule, etc (par exemple : "12,48 €"). J'ai besoin de leur valeur en tant que nombre pour mes manipulations en JavaScript. Du coup, je pensais la stocker dans une variable attachée à l'élément du DOM (input.montant = 12.48; ).

comment comptes tu mettre leurs "variable attachée" à jour lors d'une modification de leur valeur, via le javascript en lisant la value, en la convertissant en un Number exploitable...donc autant ne le faire que quand tu en as besoin pour les calculs sans t'embarrasser d'une "variable attachée".

Tu pourrais également, ce qui me parait plus correct que la "variable attachée", passer par un objet qui serait mis à jour sur le onchange, par exemple, des INPUTS, et te servir de celui ci lors de tes manipulations.
05/09/2012, 23h55
cetteame

Citation:

Envoyé par headmax

Salut l'attachement de variable ("HTML5") directement sur le dom est possible et compatible sur tout les navigateurs je pense que oui faut tester, les version IE7 6 ... Je suis septique.

Ce que je voudrais faire pourrait ressembler à ça : http://jsfiddle.net/wJmXv/
Je ne supporte pas IE6, par contre je viens de tester avec IE7, 8 et 9 et ça marche.:D

Citation:

Envoyé par headmax

Par contre tu sera limite à ses attributs sur le dom.

:? Là, je ne comprends pas ce que tu veux dire. Je ne pensais pas écrire le contenu de ma variable dans le DOM, mais attacher une variable à un élément du DOM au lieu d'un objet abstrait. J'imagine que mon exemple précédant me fera mieux comprendre.:lol:

Citation:

Envoyé par NoSmoking

Bonsoir,comment comptes tu mettre leurs "variable attachée" à jour lors d'une modification de leur valeur, via le javascript en lisant la value, en la convertissant en un Number exploitable...donc autant ne le faire que quand tu en as besoin pour les calculs sans t'embarrasser d'une "variable attachée".

:? Heu... Si je fais comme ça, c'est pas bon ? http://jsfiddle.net/wJmXv/1/
Je n'ai pas l'impression de "convertir dans un number exploitable". Mais peut-être que ça n'est justement pas bien ?

Citation:

Envoyé par NoSmoking

Tu pourrais également, ce qui me parait plus correct que la "variable attachée", passer par un objet qui serait mis à jour sur le onchange, par exemple, des INPUTS, et te servir de celui ci lors de tes manipulations.

Au tout début de mon projet, j'étais parti sur une idée comme ça. Mais comme le nombre de mes inputs change, je me retrouvais avec un objet à dimension variable que mon niveau en JavaScript me donnait du mal à gérer.

Pour différents autres problèmes, j'avais besoin de recommencer mon développement à zéro. Je me suis dit à ce moment-là que je pourrais peut-être changer d'approche en attachant mes variables aux input dont elles dépendent.

De mon point de vue, j'ai l'impression d'avoir un truc plus simple (pas d'objet abstrait à gérer en parallèle des input) qui me semble assez cohérent. Mais je ne suis pas un spécialiste et j'aimerais bien éviter de tout redévelopper à partir de 0 une fois de plus. Du coup, je préfère demander vos avis avant d'être trop avancé dans mon projet.

merci en tous cas pour vos 2 réponses. :ccool:
06/09/2012, 08h31
SpaceFrog

sinon sortir l'unité de l'input ...

Code:

<input type="text" id="foo" value="" />€

Je sens dans ce post une grande confusion entre le DOM et le HTML

le code HTML n'est pas le DOM et le DOM n'est pas le code HTML

il est tout a fait possible d'ajouter un membre (variable, fonction) à un élément du DOM est cela depuis le début de javascript sur le navigateur.

un membre d'un élément du DOM est un membre d'un Objet javascript comme un autre.

la syntaxe est des plus simple
Code:

1 2 3 4 5 6 7 8 9 window.onload = function(){ document.getElementById("maDiv").dataValue = {'ce' : 'que', 'je': 'veux'}; alert(document.getElementById("maDiv").dataValue.ce); document.getElementById("maDiv").onclick = function () { alert(this.dataValue.ce); }; }
C'est un principe de base de javascript tout objet peut s'enrichir de tous les membres que l'on veut.

il faut tout de même prendre des précautions. en effet le w3c définit le DOM mais pas l'implémentation qui en est faite.

ainsi il y a en théorie une différence entre un attribut d'un élément du dom et un membre d'un objet de type élément du dom.

si vous avez un débugger javascript en inspectant un élément du DOM vous lui trouverez de nombreux membres qui ne sont pas des attributs.

mais la norme ne dit rien sur un membre et un attribut qui auraient le même nom.

suivent les implémentations un élément du DOM peu avoir un membre et un attribut de même nom tout en étant des objets distinct
ou alors un membre et un attribut de même nom sont un seul est unique objet. en clair
Code:

1 2 3 4 5 6 window.onload = function(){ document.getElementById("maDiv").dataValue = 15; document.getElementById("maDiv").setAttribute("dataValue", 25; alert(document.getElementById("maDiv").dataValue); alert(document.getElementById("maDiv").getAttribute("dataValue")); }
va afficher sur certaines implémentations 25 et 25 et sur d'autres 15 et 25.

je ne me souviens pas comment se comporte tous les navigateurs mais je dirais de mémoire que pour un DOM-HTML (le DOM est défini pour XML et il existe des implémentation hors des navigateurs pour XML) dans un navigateur

le membre et l'attribut sont confondus.
attention donc aux effet de bord.

vu le risque en question minime mais existant cela ne semble pas être une bonne idée. elle simplifie pourtant bien des chose.

imaginons un système d'onglets fait avec une liste à puce un div pour chaque contenu et un div contenant le tout.
pour faire fonctionner tout ça j'ai besoin de référence au div et puce en question garder une ref au div courant. sans ça impossible de changer d'onglet.
la solution immédiate consiste à garder des variables et à les manipuler globalement.

pour faire plus propre on met le tout dans un objets
pour mettre plusieurs jeux d'onglet dans la page on en vient à un tableau d'objet.
et il est relativement facile d'ajouter de nouveau systèmes d'onglets dans la page.

mais il faut garder tout cela cohérent. et surtout ne pas oublier de supprimer l'objet dans la variable lorsqu'on détruit les div et autres puces.

si nous reprenons le même système d'onglet et que maintenant sur chaque élément du système nous lui attachons les variables et méthodes dont il a besoin.
notre système d'onglet fonction aussi simplement
il peut être instancier autant de fois que l'on veux on peut en imbriquer autant qu'on veux et on peut en ajouter et en supprimer à l'envie.
la suppression du Div contenant le système entraîne de fait la suppression de ses membres.

aucun risque de collision de variables pas de fonction don le nom entrerait en conflit avec un lib un ensemble totalement autonome.

bref comme toujours il faut bien penser ce que l'on fait pour en obtenir le meilleur.

ce n'est pour moi pas un mauvaise pratique en tout cas.
A+JYT

06/09/2012, 14h41
SpaceFrog

des les attributs data-xxx

on se sert de ces attributs en jquery qui parse le code html pour remonter un data au niveau de l'objet

Code:

<div id="maDiv" data-type="homme" data-id="110" data-value="test value"></div>

en jquery on peut ainsi récupérer

Code:

$('#maDiv'].data('type')

Salut d'après ton exemple en jquery, tu peux faire en javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<script type="text/javascript">
var i=1; //nombres de clicks pour incrémenté sinon tu met 1 à la place de i pour un seul click
document.getElementById("input").onclick = function(){
	//Je creer un attribut et lui affect la valeur de l'input
    this.setAttribute("data-value",this.getAttribute("value")); 
    //Je creer un object montant comme l'exemple et affecte la valeur de départ dans data-value
    this.montant = document.getElementById("input").getAttribute("data-value");
	//J'affecte à la valeur de l'input this.montant+ la valeur d'incrémentation, formaté avec la bonne chaine
    this.value = (parseFloat(this.montant)+i)+" €";
    //J'écrit le message dans le span...
    document.getElementById("legende").innerHTML = "Le montant du champs + i = "+(parseFloat(this.montant)+i)+" €";
    i++;// à chaque click on incrémente
};
</script>

Le html

Code:

1
2
3
 
<input id="input" type="text" value="1234.56 €">
<span id="legende">Cliquer dans le champs</span>

Bonne chance ;) A+

06/09/2012, 18h06
cetteame

Citation:

Envoyé par SpaceFrog

sinon sortir l'unité de l'input ...

J'avais pensé à une solution comme ça, voire à mettre l'unité en background-image dans mon input. Mais j'avais laissé tombé cette idée en me disant qu'un copie du montant (CTRL + A et CTRL + C) ne me permettait pas d'avoir l'unité. D'autres contraintes que je me suis donné (séparer les milliers avec un espace, exemple : 12 345,67 €) me poussent dans tous les cas à gérer le contenu de mon input en tant que texte sur lequel j'applique une mise en forme en JavaScript au fur et à mesure de la frappe de l'internaute. Du coup ma question concernait bien le fait d'attacher une variable correspondant à la valeur numérique de l'input (12345.67) pour un traitement non visible sur la page (déclencher des évènements quand la valeur change, quand la valeur dépasse un seuil, etc.)

Citation:

Envoyé par sekaijin

Je sens dans ce post une grande confusion entre le DOM et le HTML

Merci pour tes explications qui corrige les abus de langage de mon inexpérience. :ccool:

Citation:

Envoyé par sekaijin

ce n'est pour moi pas un mauvaise pratique en tout cas.

Super ! Me voilà rassuré.;)

Citation:

Envoyé par SpaceFrog

des les attributs data-xxx

on se sert de ces attributs en jquery qui parse le code html pour remonter un data au niveau de l'objet

Dans l'idée, je ne vois pas de nécessité à modifier le html. J'imagine que le risque de repaint ou reflow est limité avec les attributs data-xxx. Mais est-ce nécessaire ou plus optimal que d'affecter directement une variable sur mon input comme je l'ai fait dans mon exemple ?

Citation:

Envoyé par headmax

Salut d'après ton exemple en jquery, tu peux faire en javascript

Je me sert de jQuery pour d'autres actions dans cette page. Je ne me passerai donc pas de devoir charger ce script. Mais merci pour cette instructive adaptation en Javascript. ;)
06/09/2012, 19h02
NoSmoking

Citation:

Envoyé par sekaijin

Je sens dans ce post une grande confusion entre le DOM et le HTML

Il n'est pas question de revenir sur le fait que le DOM est construit lors de l'interprétation du code HTML de la page et que pour chaque noeuds crées javascript associe un HTMLElement.
Les attributs HTML et les propriétés javascript sont la plupart du temps intimement liées et la modification de l'un mets à jour l'autre.

L'ajout d'une propriété personnalisée à un élément du DOM est tout à fait possible, il n'est qu'à regarder ce que rajoutent les navigateurs, mais dans ce cas la liaison entre HTML et le DOM n'existe pas.

En clair dans le cas de cetteame lors de la modification de la value d'un INPUT il faut bien mettre à jour la propriété correspondante, ce qui n'est pas le cas dans les codes fournis.

Si cette propriété, de format différent , est utilisé pour du calcul, il faut la convertir de String en Number, pour la mise à jour, donc il est suffisant de le faire lors du calcul le rajout de cette propriété n'apportant pas grand chose.

Le passage par un objet, mis à jour sur le onchange des éléments permet simplement les mises à jour en "temps masqué" et de faire le calcul en parcourant les données de l'objet, ce qui sera toujours plus rapide que d'accéder aux différents éléments du DOM.

Citation:

Envoyé par SpaceFrog

des les attributs data-xxx

on se sert de ces attributs en jquery qui parse le code html pour remonter un data au niveau de l'objet

Code:

<div id="maDiv" data-type="homme" data-id="110" data-value="test value"></div>

en jquery on peut ainsi récupérer

Code:

$('#maDiv'].data('type')

Attention
JQuery ne parse pas le HTML
JQuery parcour le DOM crée par le navigateur à partir du HTML

je pense qu'on fait bien trop souvant des abuts de langage sur le sujet et que du coup on introduit des confusion
ainsi le get attribute data-value est inutile dans ce code
Citation:
Envoyé par headmax
Salut d'après ton exemple en jquery, tu peux faire en javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 //ne ser à rien //var i=1; //nombres de clicks pour incrémenté sinon tu met 1 à la place de i pour un seul click document.getElementById("input").onclick = function(){ if (!this.legende) { //on cherche la légende associe une seul fois lors du premier click this.legende = document.getElementById("legende"); } //Je creer un attribut et lui affect la valeur de l'input //Ne sert a rien a supprimer //this.setAttribute("data-value",this.getAttribute("value")); //Je creer un object montant comme l'exemple et affecte la valeur de départ dans data-value //this.montant = document.getElementById("input").getAttribute("data-value"); // a remplacer par value et au passage on parse car ces le montant qui nous intéresse pas le texte de l'input // mais il innutile de parcer le montant si on l'a fait au clik precedent if (!this.montant){ this.montant = parseFloat(this.getAttribute("value"); } // ne reste qu'a incrémenter le montant this.montant++; //J'affecte à la valeur de l'input this.montant+ la valeur d'incrémentation, formaté avec la bonne chaine //this.value = (parseFloat(this.montant)+i)+" €"; // le montant étant un number on obtient (de plus value est un attribut) this.setAttribute("value", this.montant+" €"); //J'écrit le message dans le span... //document.getElementById("legende").innerHTML = "Le montant du champs + i = "+(parseFloat(this.montant)+i)+" €"; //inutile de tout recalculer on l'a dans value et on utilise la référence à la légende this.legende.innerHTML = "Le montant du champs + i = "+this.getAttribute("value"); //ne sert à rien i++;// à chaque click on incrémente };
Le html
Code:

1 2 3 <input id="input" type="text" value="1234.56 €"> <span id="legende">Cliquer dans le champs</span>
Bonne chance ;) A+
l'usage de la référence à legende et typiquement le genre de chose qui simplifie le code et accélère l'exécution (on ne fait le gestElement qu'une seule fois) de plus si on détruit l'element input on n'a pas de variable qui reste en memoire. c'est donc propre, simple et efficace.

idem pour le montant montant etant un membre de input il faut bien définir son rôle s'il ne ser que de copie de travail de value alors inutile d'en faire un membre.
mais l'input dont tu a besoin a un montant et une représentation (string) de ce montant. en faisant de montant un membre on a tout intérêt à lui faire porter cette sémentique.
du coup au premier click on initialise le montant en parsant la valeur de l'input

ne rest plus qu'a l'incrémenter de 1 à chaque click
à formater le montant et l'afficher dans l'input et la légende.

on peut du coup aller plus loin car le même code est réplicable à l'infini
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function convertToCurrency(inputId, legendeId) { var input = document.getElementById(inputId); //initialisation du montant et de la legende input.legende = document.getElementById(legendeId); input.montant = parseFloat(input.getAttribute("value"); input.onclick = function(){ this.montant++; this.setAttribute("value", this.montant+" €"); this.legende.innerHTML = "Le montant du champs + i = "+this.getAttribute("value"); }; } convertToCurrency("input1", "legende1"); convertToCurrency("input2", "legende2")
Le html
Code:

1 2 3 4 5 <input id="input1" type="text" value="1234.56 €"> <span id="legende1">Cliquer dans le champs</span> <input id="input2" type="text" value="1239.56 €"> <span id="legende2">Cliquer dans le champs</span>
la seule chose que faisait data-value en plus c'etait de conserver la valeur initiale mais il y a déjà dans le Dom un membre des input qui fait ça de memoire defaulValue (nécéssaire au dom pour pouvoir faire form.reset())
A+JYT

Pour info, les attributs de type data sont destinés à être utilisés de façon similaire à jQuery !
On utilise getAttribute('data-xxx') uniquement à cause d'IE < 10 qui ne reconnait pas les dataset.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>data</title> </head> <body> <div id="data" data-nom="toto"></div> <script> alert(document.getElementById('data').dataset.nom); </script> </body> </html>

oui mais dans le code de headmax
le montant n'est pas transmit via un attribut html il est lu dans l'attribut value

utiliser un attribut dans le code HTML pour en disposer ensuite dans le DOM est une pratique qui me semble saine

mais lorsque le HTML n'a aucun attribut particulier je ne vois pas en quoi en ajouter dynamiquement change la donne
de plus dans ce cas cela oblige à sérialiser et dé-sérialiser à chaque fois. l'utilisation d'un membre data est alors largement suffisent.
lorsqu'on a le html suivant

Code:

<div id="maDiv"></div>

il est plus simple de faire
Code:

1 2 3 4 5 6 myDomElement.data.duree ++; myDomElement.data = { nom: 'toto', age: 18, cheveux: 'brun' };
que
Code:

1 2 3 4 5 6 myDomElement.setAttribute('data-duree', parseInt(myDomElement.getAttribute('data-duree'))+1); myDomElement.setAttribute('data-nom', 'toto');, myDomElement.setAttribute('data-age', '18'); myDomElement.setAttribute('data-cheveux', 'brun');
ce deuxième code est interessant lorsque on a le html

Code:

<div id="maDiv" data-duree="0" data-nom="paul" data-age="20" data-cheveux="roux"></div>

car la on va manipuler les valeur transmise par le source HTML au DOM.

A+JYT

07/09/2012, 09h59
headmax

Merci sekaijin et bovino, ça éclairci bien les idées ;).

Bonne journée à vous.