Bonnes pratiques JavaScript

Version imprimable

Voir 40 message(s) de cette discussion en une page

Sur le m�me genre de test. Une comparaison entre une boucle for sur une limite d�finie au pr�alable (imax dans mon post) ou directement sur Array.length

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Untitled Document</title>
  </head>
  <body>
  <input type="button" onclick="loopOnIMax()" value="boucler sur imax" />
  <input type="button" onclick="loopOnTableLength()" value="boucler sur array.length" />
  <script type="text/javascript">
  function loopOnIMax(){
    var Debut = new Date();
 
    var a = setArray(5000000);
    var b = true;
 
    for(var i=0, imax=a.length ; i<imax ; i++){
      var lol = !(b)
    }
    var Fin = new Date();
    alert((Fin-Debut)+ " ms"); 
  }
 
  function loopOnTableLength(){
    var Debut = new Date();
 
    var a = setArray(5000000);
    var b = true;
 
    for(var i=0 ; i<a.length ; i++){
      var lol = !(b)
    }
    var Fin = new Date();
    alert((Fin-Debut)+ " ms"); 
  }
 
  function setArray(l) {
    var a = [];
    for(var i=0; i<l ; i++){
      a.push(i);
    }
    return a;
  }
  </script>
  </body>
</html>

imax vainqueur

20/05/2009, 11h50
RomainVALERI

Citation:

Envoy� par franculo_caoulene

imax vainqueur

Merci pour le test ^^
Quoi qu'il en soit, j'avais d�j� trouv� que l'id�e �tait tr�s bonne et je l'avais d�j� adopt�e depuis ton intervention un peu plus haut... :ccool: merci en tout cas !

Citation:

Envoy� par franculo_caoulene

Sur le m�me genre de test. Une comparaison entre une boucle for sur une limite d�finie au pr�alable (imax dans mon post) ou directement sur Array.length

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Untitled Document</title>
  </head>
  <body>
  <input type="button" onclick="loopOnIMax()" value="boucler sur imax" />
  <input type="button" onclick="loopOnTableLength()" value="boucler sur array.length" />
  <script type="text/javascript">
  function loopOnIMax(){
    var Debut = new Date();
 
    var a = setArray(5000000);
    var b = true;
 
    for(var i=0, imax=a.length ; i<imax ; i++){
      var lol = !(b)
    }
    var Fin = new Date();
    alert((Fin-Debut)+ " ms"); 
  }
 
  function loopOnTableLength(){
    var Debut = new Date();
 
    var a = setArray(5000000);
    var b = true;
 
    for(var i=0 ; i<a.length ; i++){
      var lol = !(b)
    }
    var Fin = new Date();
    alert((Fin-Debut)+ " ms"); 
  }
 
  function setArray(l) {
    var a = [];
    for(var i=0; i<l ; i++){
      a.push(i);
    }
    return a;
  }
  </script>
  </body>
</html>

imax vainqueur

oui �a c'est une des optimisations utilis�e et pr�conis�e depuis un moment :)

il y a �galement de fait d'utiliser le mot cl� new et appeler une m�thode externe ( voir par exemple la source de spaffy , permettant de g�n�rer un immense tableau :) ) cf : les contributions

En enlevant les new dans l'appel des m�thode, je ne vois pas de diff�rence une utilisant ce code.

Puis c'est l�, qu'on choisit entre un code lisible (� son gout) et les performances. Je pr�f�re utiliser les litt�raux, m�me s'ils sont moins performants. Ce test montre la diff�rence d'appel d'une m�thode length depuis un litt�ral et un objet String.
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 32 33 34 35 36 37 38 39 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> </head> <body> <input type="button" onclick="test1()" value="littéral" /> <input type="button" onclick="test2()" value="objet" /> <script type="text/javascript"> function test1(){ var Debut = new Date(); var s = "blah"; var b = true; for(var i=0 ; i<500000 ; i++){ var lol = s.length; } var Fin = new Date(); alert((Fin-Debut)+ " ms"); } function test2(){ var Debut = new Date(); var s = new String("blah"); var b = true; for(var i=0 ; i<500000 ; i++){ var lol = s.length; } var Fin = new Date(); alert((Fin-Debut)+ " ms"); } </script> </body> </html>
Objet String vainqueur.

Mais on se disperse un peu par ma faute. Les bonnes pratiques sont-elles li�es au performances?

20/05/2009, 12h30
RomainVALERI

Citation:

Envoy� par franculo_caoulene

Mais on se disperse un peu par ma faute. Les bonnes pratiques sont-elles li�es au performances?

+10 ^^ ce sont deux sujets compl�tement distincts...

Mais visiblement �a int�ressait tout le monde quand m�me, alors bon...tu es pardonn� :mouarf:
20/05/2009, 13h33
le_chomeur

+1 !

Je pense que les deux sont plus ou moins li� mais ... il reste des exceptions ^^

par exemple l'ajout d'�l�ment via innerHTML est plus rapide que par le document.createElement MAIS cela pose des soucis de compatibilit� et autre ( sur les formulaires par exemple )

Mais un cloneNode est plus rapide qu'un innerHTML ET qu'un document.createElement ...

Donc je pense qu'en dehors des bonnes m�thodes ( disons plut�t des pr�conisation ) il faut parfois sortir des sentiers battu ;)
20/05/2009, 14h25
DoubleU

Citation:

Envoy� par le_chomeur

il y a �galement de fait d'utiliser le mot cl� new et appeler une m�thode externe ( voir par exemple la source de spaffy , permettant de g�n�rer un immense tableau ) cf : les contributions

Citation:

Envoy� par franculo_caoulene

En enlevant les new dans l'appel des m�thode, je ne vois pas de diff�rence une utilisant ce code.

Jme souviens qu'on avait d�ja eu ce d�bat fut un temps ^^
20/05/2009, 16h48
RomainVALERI
Citation:

Envoy� par RomainVALERI

>>> est-ce que vous vous autorisez de longs chainages de fonctions ?
[...]
>>> quand on en chaine ou imbrique plusieurs, �a fait un peu mal les yeux :calim2: :aie:
Mais j'avoue que je le fais quand m�me de temps en temps... et vous autres ? ^^

J'ai retrouv� un exemple "r�el" dans un code � moi (ja sais : c'est assez moche � lire MAIS pas taper sur ma t�te svp :aie:)
Code:

1 2 tabResultat[((i == (blocs.length - 2)) && (bloc == "1")) ? (tabResultat.length - 1) : tabResultat.length] = grandeursFr[(tabResultat[i] == "un") ? 0 : 1][blocs.length - i - 1];
(contexte de l'extrait : une fonction maison qui transforme un Number en une chaine en toutes lettres)

edit pour leChomeur, voir post ci-dessous : dans un thread appel� "Bonne pratiques", je vous conc�de que cet extrait fait un peu figure de contre-exemple :aie:
Disons quand m�me qu'en la passant sur plusieurs lignes et avec un peu d'indentation, on att�nue la douleur ^^ mais � ce moment l�, autant la d�couper... ^^

Citation:

Envoy� par RomainVALERI

Code:

1
2
 
tabResultat[((i == (blocs.length - 2)) && (bloc == "1")) ? (tabResultat.length - 1) : tabResultat.length] = grandeursFr[(tabResultat[i] == "un") ? 0 : 1][blocs.length - i - 1];

:calim2: :calim2: :calim2: :calim2: :calim2:

22/05/2009, 08h28
mvvvv

pour ma part

Ce d�bat me conforte dans l'utilisation de GWT.:aie:
22/05/2009, 09h56
Bovino

Citation:

Envoy� par mvvvv

Ce d�bat me conforte dans l'utilisation de GWT.:aie:

Salut,
Pourrais-tu �tre plus explicite ? Car l'utilisation d'un framework n'exon�re en rien d'utiliser du code 'propre' :?
22/05/2009, 19h09
mvvvv

C'est moins l'aspect framework que l'aspect langage

GWT c'est du JAVA qui se transforme tout seul en du Javascript qui va bien.

JAVA est un vrai langage qui a toute ses r�gles de bonnes pratiques et surtout les bons IDE pour s'y tenir.

Donc avec GWT le probl�me ne se pose plus de savoir si on est d�claratif ou pas comment on organise son code source par rapport � son HTML .... on fait juste du java ... de la m�me mani�re qu'on faisait du bon vieux MOTIF, du SWING du SWT ....
22/05/2009, 19h42
bigboomshakala

Citation:

Envoy� par le_chomeur

par exemple l'ajout d'�l�ment via innerHTML est plus rapide que par le document.createElement MAIS cela pose des soucis de compatibilit� et autre ( sur les formulaires par exemple )

tu es s�r ?
je ne sais plus si j'ai test� ou pas avec createElement, mais en tout cas pour du texte c'est plus rapide de passer par createTextNode que par innerHTML pour l'�criture, et firstChild.data plut�t que innerHTML pour la lecture
22/05/2009, 19h48
bigboomshakala

Citation:

Envoy� par mvvvv

GWT c'est du JAVA qui se transforme tout seul en du Javascript qui va bien.

JAVA est un vrai langage qui a toute ses r�gles de bonnes pratiques et surtout les bons IDE pour s'y tenir.

Donc avec GWT le probl�me ne se pose plus de savoir si on est d�claratif ou pas comment on organise son code source par rapport � son HTML .... on fait juste du java ... de la m�me mani�re qu'on faisait du bon vieux MOTIF, du SWING du SWT ....

et j'aurais tendance � dire que tu es hors sujet.

AMHA, le d�bat est explicitement tourn� vers l'utilisation directe du JavaScript. Si on part sur du code g�n�r� ya plus de d�bat. Dans ce cas tu utilises le code g�n�r� et point. Et si on n'utilise pas syst�matiquement GWT ou autre �a peut �tre pour diverses raisons : pas possible, pas envie, etc.
22/05/2009, 19h50
Bovino

Attention
Je tiens � rappeler que le th�me du d�bat porte sur les bonnes pratiques !

Mais vu l'engouement pour les questions de performances, ce sera le th�me du prochain !
23/05/2009, 00h04
Boa67

Bonjour,
Je comprends parfaitement le choix de bannir eval() et ses composantes.
N�anmoins il existe toujours des situations o� ces fonctions sont obligatoires. Quelles sont donc les pr�cautions d'utilisation que vous pr�coniseriez?

De m�me pour document.write. J'ai d'ailleurs beaucoup de mal � comprendre en quoi un document.write doit �tre banni totalement.

Par exemple sous IE6 (oui, je cherche la compatibilit�), l'ajout d'un script dynamiquement dans le <head> ne fonctionnera pas avec les fonctions DOM. Si par exemple on cherche � inclure un .js en plus � la page, sous firefox on pourra le g�rer en DOM, mais pas sous IE. Le document.write devient incontournable dans ce genre de cas.

Du reste j'approuve � peu pr�s tout ce que j'ai lu. N�anmoins je suis contre l'utilisation de objet.on'evenement'=function() {}; dans le cadre de programmes proprements d�velopp�s et devant �tre r�utilis�s.
23/05/2009, 03h04
le_chomeur

Citation:

Envoy� par Boa67

Bonjour,
Je comprends parfaitement le choix de bannir eval() et ses composantes.
N�anmoins il existe toujours des situations o� ces fonctions sont obligatoires. Quelles sont donc les pr�cautions d'utilisation que vous pr�coniseriez?

�crire un code propre d�s le d�part et non pas des pseudos string :)

Citation:

Envoy� par Boa67

De m�me pour document.write. J'ai d'ailleurs beaucoup de mal � comprendre en quoi un document.write doit �tre banni totalement.

pose de nombreux probl�me : de performance, de compatibilit� , et de GROS probl�mes avec les formulaires...

Citation:

Envoy� par Boa67

Par exemple sous IE6 (oui, je cherche la compatibilit�), l'ajout d'un script dynamiquement dans le <head> ne fonctionnera pas avec les fonctions DOM. Si par exemple on cherche � inclure un .js en plus � la page, sous firefox on pourra le g�rer en DOM, mais pas sous IE. Le document.write devient incontournable dans ce genre de cas.

as tu test� ?????

Citation:

Envoy� par Boa67

Du reste j'approuve � peu pr�s tout ce que j'ai lu. N�anmoins je suis contre l'utilisation de objet.on'evenement'=function() {}; dans le cadre de programmes proprements d�velopp�s et devant �tre r�utilis�s.

la je te rejoins ;)
23/05/2009, 09h42
Auteur

Citation:

Envoy� par Boa67

Bonjour,
Je comprends parfaitement le choix de bannir eval() et ses composantes.
N�anmoins il existe toujours des situations o� ces fonctions sont obligatoires. Quelles sont donc les pr�cautions d'utilisation que vous pr�coniseriez?

au lieu d'eval tu peux utiliser l'objet Function() (� ne pas confondre avec function).
M�me si comme eval(), Function() prend en param�tres des chaines de caract�res, celui-ci doit �tre du code Javascript (en fait on cr�e dynamiquement une fonction JS).

Citation:

Envoy� par Boa67

De m�me pour document.write. J'ai d'ailleurs beaucoup de mal � comprendre en quoi un document.write doit �tre banni totalement.

Regarde le nombre de sujets o� document.write() pose probl�me :mouarf: Ils ont tous un point commun : la m�thode est appel�e dans une fonction JS. Et l� c'est la catastrophe :aie:
23/05/2009, 21h52
olivierPa

Pourquoi proscrire innerHTML ?

OK, ce n'est pas valide W3C, mais le probleme de compatibilite avec la norme est plus l'affaire des developpeurs de navigateurs que des utilisateurs.
Meme si mon experience en JS est assez maigre (je viens de m'y mettre en fait), je n'ai pas constate de comportements differents lors de son utilisation selon le navigateur employe (contrairement a bcp de commandes parfaitement valides et interpretee de maniere incorrecte).
Personnellement, je ne suis pas le chantre du purisme en programmation, sauf s'il apporte une certaine plus value (compatibilite, visibilite, performance, portabilite,...).

Ok, s'il s'agit simplement de creer un noeud text innerHTML ne sert absolument a rien, mais sinon ?

@le_chomeur -> oui, j'ai test�.
Voil� ma fonction : (inclureV0 sert donc uniquement pour IE6, sous lequel la fonction inclure ne fonctionne pas)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
        inclure :
            function(fichier) {
                if(libBoa.ie) return lib.inclureV0(fichier);
                var n=document.createTextNode('\n');
                var b=document.createElement('script');
                var p=libBoa.path==''?'':'/';
                b.src=libBoa.path+p+fichier+'.js';
                b.type='text/javascript';
                b.charset=libBoa.charset;
                var head=document.getElementsByTagName('head')[0];
                if(! head) {
                    if(libBoa.debug) alert("libBoa :\nErreur lors de l'importation des packs. La balise head est introuvable");
                    return;
                }
                head.appendChild(n);
                head.appendChild(b);
            },
        inclureV0 :
            function(fichier) {
                document.write('\n<script type="text/javascript" charset="'+libBoa.charset+'" src="'+libBoa.path+'/'+fichier+'.js"></script>');
            },

Voir 40 message(s) de cette discussion en une page