Bonnes pratiques JavaScript [Débat]

**franculo_caoulene** · 20/05/2009, 11h44

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**RomainVALERI** · 20/05/2009, 11h50

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...

merci en tout cas !

**le_chomeur** · 20/05/2009, 11h57

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**franculo_caoulene** · 20/05/2009, 12h17

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

**RomainVALERI** · 20/05/2009, 12h30

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é

**le_chomeur** · 20/05/2009, 13h33

+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

**DoubleU** · 20/05/2009, 14h25

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

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 ^^

**RomainVALERI** · 20/05/2009, 16h48

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

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

)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
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... ^^

**le_chomeur** · 20/05/2009, 17h00

Envoyé par RomainVALERI

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**mvvvv** · 22/05/2009, 08h28

Ce débat me conforte dans l'utilisation de GWT.

**Bovino** · 22/05/2009, 09h56

Envoyé par mvvvv

Ce débat me conforte dans l'utilisation de GWT.

Salut,
Pourrais-tu être plus explicite ? Car l'utilisation d'un framework n'exonère en rien d'utiliser du code 'propre'

**mvvvv** · 22/05/2009, 19h09

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 ....

**bigboomshakala** · 22/05/2009, 19h42

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

**bigboomshakala** · 22/05/2009, 19h48

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.

**Bovino** · 22/05/2009, 19h50

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 !

**Boa67** · 23/05/2009, 00h04

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.

**le_chomeur** · 23/05/2009, 03h04

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

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...

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é ?????

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

**Auteur** · 23/05/2009, 09h42

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).

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

Ils ont tous un point commun : la méthode est appelée dans une fonction JS. Et là c'est la catastrophe

**olivierPa** · 23/05/2009, 21h52

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 ?

**Boa67** · 24/05/2009, 16h15

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>');
            },

Bonnes pratiques JavaScript [Débat]

JavaScript

Discussions similaires

Partager

Partager