Bonnes pratiques JavaScript [Débat]

**Bovino** · 19/05/2009, 15h44

@RV :

2) Heu... que veux-tu éviter en contraignant volontairement l'utilisation de paramètres à ce niveau ?

3) Nous sommes bien d'accord
Cependant je ne vois pas le lien (je veux dire : je ne le vois pas encore ) entre eval et ceux que tu désignes comme ses dérivés, je pense notamment à setTimeOut ou setInterval...

Non, je ne cherche pas à contraindre l'utilisation de paramètres, mais les rendre possibles

Pour info, le premier argument de setTimeout et setInterval est :

soit une chaîne... si c'est le cas, la méthode eval() sera appelée pour interpréter le contenu ;
soit un nom de fonction, mais aucun argument possible ;
soit une fonction anonyme dans laquelle tu peux appeler une fonction avec des paramètres du contexte, c'est cette méthode que je préconise !

A noter aussi qu'avec Firefox, il est possible d'ajouter des arguments à ces fonctions qui seront transmis en paramètres à la fonction appelée :

Code :

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

setTimeout(une_fonction, 1000, param1, param2);

est équivalent à :

Code :

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

setTimeout(function(){une_fonction(param1, param2)}, 1000);

malheureusement, n'étant pas cross-browser, l'intérêt reste relatif

Pour en revenir à :

Envoyé par franculo_caoulene

1) Je mets le code Javascript en fin de document, pour une question de performance et d'amélioration progressive.

Cette méthode permet de modifier le contenu avant le déclenchement du onload et peut à certains égards être considérée comme plus performante que le classique onload sur le body

Envoyé par franculo_caoulene

2) Je privilégie les notations littérales. C'est plus court et plus lisible à force.

+1

**SpaceFrog** · 19/05/2009, 15h53

on ne peut malheureusement pas se passer complètement de l'eval sauf à passer par window[ ] masi cela revient au même
Je pense en particulier à un retour d'objet json (ou hash) par ajax, l'eval est obligatoire...

**Bovino** · 19/05/2009, 16h02

Envoyé par SpaceFrog

on ne peut malheureusement pas se passer complètement de l'eval sauf à passer par window[ ] masi cela revient au même
Je pense en particulier à un retour d'objet json (ou hash) par ajax, l'eval est obligatoire...

il est possible de passer par un parseur JSON (ici par exemple). D'autre part, khayyam90 nous a proposé récemment une source qui devrait bientôt arriver sur les pages FAQ et Sources

Ceci dit, il faut cependant garder à l'esprit que ces bonnes pratiques sont plus un "idéal" à atteindre que des obligations gravées dans le marbre !

**SpaceFrog** · 19/05/2009, 16h41

oui à coup de split ou de regExp ou en parsant

mais bon c'est assez gourmand ...

**RomainVALERI** · 19/05/2009, 16h49

Envoyé par Bovino

Pour info, le premier argument de setTimeout et setInterval est :
* soit une chaîne... si c'est le cas, la méthode eval() sera appelée pour interpréter le contenu ;
* soit un nom de fonction, mais aucun argument possible ;
* soit une fonction anonyme dans laquelle tu peux appeler une fonction avec des paramètres du contexte, c'est cette méthode que je préconise !

Ok ^^ j'ignorais la possible utilisation de code "brut" en premier paramètre, je n'ai toujours employé que les deux autres méthodes, au début des noms de fonctions, et depuis quelques temps des fonctions anonymes...

**franculo_caoulene** · 19/05/2009, 18h39

Au fait, quelle est votre façon de déclarer des variables? Nous avons déjà deux façons de faire différentes. Laquelle préférez-vous? Laquelle utilisez-vous?

**Auteur** · 19/05/2009, 20h26

- Ne pas utiliser des expressions régulières pour comparer / tester des dates. Utiliser... l'objet date exemple :
http://www.developpez.net/forums/d57...t/#post3415858 (oui je me fais de la pub

)

Envoyé par Bovino

* Pour les fonctions récurrentes et/ou non cross-browser, se faire une bibliothèque de fonctions utilitaires. L'exemple le plus courant étant :

Code :

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

1
2
3
function $(un_id){
    return document.getElementById(un_id);
}

Cette bibliothèque de fonction pourra par ailleurs être définie dans l'objet des variables globales !

Juste une précision : pas la peine de télécharger les 100-200ko d'une bibliothèque JS pour le plaisir d'utiliser uniquement la fonction $()

(si, si j'ai vu ça

)
Donc utilisez une bibliothèque de fonctions... pour utiliser les fonctions de la bibliothèque, ou créez votre bibliothèque.

**RomainVALERI** · 20/05/2009, 09h47

Tiens au fait : je me demandais autre chose :

>>> est-ce que vous vous autorisez de longs chainages de fonctions ? ou est-ce que vous préférez "atomiser" un peu les instructions, pour une meilleure lisibilité ?
un exemple (assez simple) de ce que je veux dire (mais qui pourrait bien sûr être bien plus long ou tordu) :

Code :

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

1
2
3
4
5
 
// version chainée, compacte mais pas très lisible sans un rapide examen pour quelqu'un reprenant le code...
var truc = tableauMachin[new Date().getFullYear()].substr((condition)? 0 : n);
// où tableauMachin ne contient que des string, condition est un booléen, et n un number
// au final, truc contiendra une sous-chaine de l'une des chaines contenues dans le tableau

___________________________________

Même chose pour l'opérateur ternaire : "(cond)?a:b;"

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

**le_chomeur** · 20/05/2009, 10h14

tout dépend de l'utilité et des commentaires qui sont fait sur la source

de même qu'un var b = (a) ? c:b;
est parfois plus pratique si l'on n'est pas dans une optique de performance

**franculo_caoulene** · 20/05/2009, 10h16

Ça dépend de la lisibilité dans les deux cas. Si c'est trop long, ou si le code contient déjà pas mal d'indentations à ce niveau là, j'ai tendance à écrire sur plusieurs lignes.

Code :

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

1
2
3
4
5
        if (bien.Description) {
            s = (bien.Description.length > 150)
                ? bien.Description.substring(0, 149)
                : bien.Description;
        }

En suivant ton exemple, plutôt tordu, j'écrirais

Code :

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

1
2
3
4
var truc = tableauMachin[
  new Date()
  .getFullYear()
].substr((condition)? 0 : n);

je suis le même principe pour les crochets que pour les accolades. L'opérateur ternaire est court et intimement lié au substring(), le mettre à la ligne rendrait ce bout de code moins lisible.

**franculo_caoulene** · 20/05/2009, 10h19

Envoyé par le_chomeur

tout dépend de l'utilité et des commentaires qui sont fait sur la source

Je ne fais pas de commentaire à ce niveau là, personnellement. J'essaie d'utiliser des noms assez lisibles et de factoriser au maximum de façon à ce qu'on comprenne sans commentaire.

Envoyé par le_chomeur

de même qu'un var b = (a) ? c:b;
est parfois plus pratique si l'on n'est pas dans une optique de performance

Des performances? C'est moins performant qu'un if?

**DoubleU** · 20/05/2009, 10h36

Envoyé par Bovino

il est possible de passer par un parseur JSON (ici par exemple). D'autre part, khayyam90 nous a proposé récemment une source qui devrait bientôt arriver sur les pages FAQ et Sources

C'est quoi l'intérêt de ce parseur

?

Le seul cas ou le eval se jusifie, c'est sur un retour json d'une requete Ajax. Tant que l'ajax reste non cross-browser, ca signifie que tu maitrises ce qui se passe coté serveur, donc que tu n'as pas besoin de te méfier de ce que tu renvoies toi même.

**le_chomeur** · 20/05/2009, 10h36

oui un test conditionnel est plus lent qu'un if , car il doit évaluer l'instruction pour pouvoir tester la condition.

**franculo_caoulene** · 20/05/2009, 10h54

Je veux bien te croire mais j'aimerais une source, je n'en trouve pas.

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

un exemple simplifié :

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
<!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="contional()" value="test conditionnel" />
		<input type="button" onclick="normal()" value="test normal" />
		<script type="text/javascript">
			function contional(){
				var Debut = new Date();
 
				var a = true;
 
				for(var i = 0 ; i<500000 ; i++){
					var lol = (a) ? "ok":"ko";
				}
				var Fin = new Date();
				alert((Fin-Debut)+ " ms"); 
			}
 
			function normal(){
				var Debut = new Date();
 
				var a = true;
				for(var i = 0 ; i<500000 ; i++){
					if(a){
						var lol = "ok";
					}
					else{
						var lol = "ko";
					}
				}
				var Fin = new Date();
				alert((Fin-Debut)+ " ms"); 
			}
 
		</script>
	</body>
</html>

sur mon poste , j'ai 10 ms de différences, avec un test ULTRA simple , donc je te laisse imaginer le résultat avec des boucles plus complexe ...

**DoubleU** · 20/05/2009, 11h17

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
function time(fn, n)
{
 var start = new Date(); 
 for(var v=0; v<n; v++)
 {
  fn();
 } 
 var stop = new Date();
 return (stop.getTime() - start.getTime());
}
 
function test1()
{
  return (Math.random() > Math.random() ? "aaaa" : "bbbb");
}
 
function test2()
{
 if( Math.random() > Math.random() )
  return "aaaa";
 else
  return "bbbb";
}
 
var n = 1000000;
 
alert("test 1:" + time(test1, n));
alert("test 2:" + time(test2, n));

Quelques dizaines de millisecondes pour un million d'itérations. Bref, du vent...

Mêmes tests, conclusions différentes mdr

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

Chez moi le test de doubleU confirme l'hypothèse, mais pas le test de le_chomeur!

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

Expérience personnel :

http://easynews.free.fr/calendrier/agenda/

optimisé au maximum ( à l'époque, ce code date d'il y a un an ^^ )

et le "scan" étant utilisé a chaque changement de cellule, en remplaçant les ? : par des if/else j'ai une perte conséquente des performances ...

d'ou ma précision dans un cas pratique et non pas sur des benchs simples