Débat : Vos bonnes pratiques JavaScript
Le 2009-05-17 10:18:24, par Community Management, Community Manager
Bonjour,
De par sa nature, JavaScript est plutôt mal loti concernant les bonnes pratiques de code.
L'apparition du "Web 2.0" a entrainé un regain d'intérêt pour ce langage, ainsi qu'une évolution notable de celui-ci.
Cependant, encore trop de codes obsolètes trainent sur la toile, codes souvent réalisés pour des versions anciennes des principaux navigateurs.
De plus, la syntaxe JavaScript est particulièrement permissive.
Tout cela implique que de trop nombreux débutants, se contentant de copier/coller des codes sans les comprendre, de même que par la suite, des développeurs confirmés continuent à utiliser des mauvais codes par habitude.
Je vous propose donc dans cette discussion d'indiquer ce que vous considérez comme la meilleure syntaxe JavaScript, que ce soit en terme de fonctions et méthodes à privilégier ou proscrire ou simplement en terme d'écriture du code.
A terme, le but est de collecter ces bonnes et mauvaises pratiques dans un article.
Nous vous demandons toutefois de respecter quelques règles élémentaires :
Cela implique que des avis parfois contradictoires sont susceptibles d'apparaitre.
Il est donc impératif de rester courtois et de ne pas troller inutilement
Gardez à l'esprit qu'il faut savoir rester humble et que le fait d'avoir un avis ne fait pas de celui-ci une vérité absolue !
Donner son point de vue est une chose, l'expliquer et l'argumenter est encore mieux, merci donc d'expliquer au mieux les raisons de votre (vos) choix, cela permettra à la discussion d'être constructive et pédagogique.
Il est important de bien rédiger ses interventions.
Certes, nous ne demandons pas que vous soyez dignes de l'académie française, mais prenez le temps de vous relire, de corriger vos fautes.
Le langage SMS, comme sur l'ensemble des forums est interdit.
Tout message ne respectant pas ces règles sera susceptible d'être supprimé à vue
à tous ceux qui participeront à cette discussion.
De par sa nature, JavaScript est plutôt mal loti concernant les bonnes pratiques de code.
L'apparition du "Web 2.0" a entrainé un regain d'intérêt pour ce langage, ainsi qu'une évolution notable de celui-ci.
Cependant, encore trop de codes obsolètes trainent sur la toile, codes souvent réalisés pour des versions anciennes des principaux navigateurs.
De plus, la syntaxe JavaScript est particulièrement permissive.
Tout cela implique que de trop nombreux débutants, se contentant de copier/coller des codes sans les comprendre, de même que par la suite, des développeurs confirmés continuent à utiliser des mauvais codes par habitude.
Je vous propose donc dans cette discussion d'indiquer ce que vous considérez comme la meilleure syntaxe JavaScript, que ce soit en terme de fonctions et méthodes à privilégier ou proscrire ou simplement en terme d'écriture du code.
A terme, le but est de collecter ces bonnes et mauvaises pratiques dans un article.
Nous vous demandons toutefois de respecter quelques règles élémentaires :
- Ceci est un débat
Cela implique que des avis parfois contradictoires sont susceptibles d'apparaitre.
Il est donc impératif de rester courtois et de ne pas troller inutilement
Gardez à l'esprit qu'il faut savoir rester humble et que le fait d'avoir un avis ne fait pas de celui-ci une vérité absolue !
- Pour chaque intervention
Donner son point de vue est une chose, l'expliquer et l'argumenter est encore mieux, merci donc d'expliquer au mieux les raisons de votre (vos) choix, cela permettra à la discussion d'être constructive et pédagogique.
- Faites attention à ceux qui vous liront !
Il est important de bien rédiger ses interventions.
Certes, nous ne demandons pas que vous soyez dignes de l'académie française, mais prenez le temps de vous relire, de corriger vos fautes.
Le langage SMS, comme sur l'ensemble des forums est interdit.
Tout message ne respectant pas ces règles sera susceptible d'être supprimé à vue
-
WatilinExpert éminentLcf, je pense que tu en as déjà entendu parler, mais je le dis au cas où : il existe en JavaScript une directive "use strict";. John Resig, le créateur de jQuery, a écrit un billet dessus
Personnellement, je préfère déclarer mes fonctions avec function plutôt que var car je sais que de toute façon elles seront dans le scope local. Ça fait, à mon goût, un code plus lisible pour le même résultat. Ensuite, je leur donne toujours un nom, après le mot-clé function, car comme vous l'avez dit, ce nom apparaît dans la pile lors du débogage.
Ce qui se passe est plutôt simple : le débogueur utilise la propriété name qu'ont toutes les fonctions. Quand la fonction a été déclarée sans nom, sa propriété name est une chaîne vide "".Code console : 1
2
3
4
5
6
7
8>>> var x = function fun( ){} undefined >>> x.name "fun" >>> var y = function( ){} undefined >>> y.name ""
Pour changer de sujet, j'ai découvert il y a pas plus de 3 jours l'outil JSLint, qui est une sorte de « relecteur » JavaScript, à défaut d'être un correcteur. Il met en évidence certaines erreurs et mauvaises pratiques.
J'ai aussi découvert que Douglas Crockford a écrit des conventions de codage pour JavaScript. Cela dit, j'ai adopté les miennes et je les aime bien et, après tout, ce n'est pas très différentle 08/02/2013 à 18:51 -
AuteurExpert éminent séniorArrêter de croire que la réponse à un problème simple passe nécessairement par l'utilisation d'une bibliothèque....
Ce n'est pas une critique envers les diverses bibliothèques javascript qui existent actuellement, mais je vois de plus en plus dans la résolution de problèmes simples des réponses du genre "utilise la bibliothèque unetelle ou une autre" alors que souvent 10 lignes de code suffisent à résoudre le problème.
Edit :
tiens je me répètele 13/03/2011 à 13:11 -
AuteurExpert éminent séniorPour commencer :
- Toujours déclarer ses variables qu'elles soient locales ou globales :
Firefox est très sensible à ça et avec IE on peut avoir de mauvaises surprises ; - le nom de variables ne doit pas être un mot-clef JS ou l'id ou le name d'un élément ou le nom d'une balise (cf. le lien ci-dessus) ;
- bannir innerHTML pour inclure dans la page des nouveaux éléments (div, input, table, etc.). Utiliser le DOM ;
- bannir document.write()
- dans les balises HTML écrire le nom des événements en minuscules (sinon ça ne passe pas la validation W3C) ;
Ensuite en ce qui me concerne, j'évite les méthodes getAttribute() et setAttribute(). Au lieu d'utiliser setAttribute(), je préfère écrire :
element.style.attribut = "valeur";
J'évite également addEventListener() et attachEvent() (les navigateurs reconnaissent soit l'une soit l'autre fonction), je préfère cette écriture :
element.onevent = function(){mafonction()};le 17/05/2009 à 11:56 - Toujours déclarer ses variables qu'elles soient locales ou globales :
-
franculo_caouleneMembre émérite9 == '9' retourne true
9 === '9' retourne falsele 19/05/2009 à 12:14 -
WillpowerMembre expérimentéCa dépendra de la nature de l'objet à tester je dirai.
Dans bien des cas,Code : if(obj=="undefined")
pour obtenir un "true" , il est donc évident qu'il vaut mieux utiliser la propriété undefined plutot qu'un string.
par contre si on sait d'avance que la nature de notre obj devrait être de type "Object object" par exemple(enfin, n'importe quoi sauf un booleen et un entier qui pourraient valoir 0 ou false), il est plus simple (et plus rapide*) de testerCode : if(!obj)
*plus rapide, d'après mes testes, de :
~2% sous ff
~35% sous chrome
~65% sous ieCode : 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
46function compare(fn1,fn2){ var MAX_DELAY = 20, NBR_TEST = 9; // var tab1=[],tab2=[],iter=1,delay=0,median=Math.round(NBR_TEST /2),time; while(delay<MAX_DELAY){ time=new Date().getTime(); for(var j=(iter*=2);j>0;j--){ fn1(); fn2(); } delay = (new Date().getTime())-time; } for(;NBR_TEST>0;NBR_TEST--){ // test fn1 time = new Date().getTime(); for(var j=iter;j>0;j--) fn1(); tab1.push((new Date().getTime())-time); // test fn2 time = new Date().getTime(); for(var j=iter;j>0;j--) fn2(); tab2.push((new Date().getTime())-time); } tab1.sort(function(a,b){return a-b;}); tab2.sort(function(a,b){return a-b;}); return (tab1[median]/tab2[median]); } // test1 function f1(u){ for(var i=0;i<1 && !u;i++); } function f2(u){ for(var i=0;i<1 && u==undefined;i++); } alert("ration (!u)/(u==undefined) : "+Math.round(compare(f1,f2)*100)+"% (1/ration = "+Math.round(compare(f2,f1)*100)+"%)"); // test2 function f11(u){ for(var i=0;i<10000 && !u;i++); } function f22(u){ for(var i=0;i<10000 && u==undefined;i++); } alert("ration (!u)/(u==undefined) : "+Math.round(compare(f11,f22)*100)+"% (1/ration = "+Math.round(compare(f22,f11)*100)+"%)");
le 12/03/2011 à 22:07 -
sekaijinExpert éminentC'est sur qu'il vaut mieux 10 ligne de code.
Et à l'opposé arrêter de penser que vous ferrez mieux que des dizaines de developpeurs
et évitez de réécrire ce que d'autres ont fait dans des librairies de façon efficace et éprouvé.
donc en toutes circonstances soyez pragmatique.
A+JYTle 13/03/2011 à 18:15 -
sekaijinExpert éminentPourquoi à chaque fois on ne se concentre que sur une partie du post des gens
en omettant ce qui change tout son sens ?donc en toutes circonstances soyez pragmatique.
il a A
ou il a B
Les réaction sont
il a A
Heu les gars un post c'est un tout
Lisez le entier. et si vous en critiquez une partie n'oubliez de citer ce qui dans le reste dit exactement la même chose que votre critique.
A+JYTle 15/03/2011 à 10:25 -
sekaijinExpert éminentparce que ça consomme du temps et ça ne sert à rien la plus part du temps
exemple on cherche l''élément à chaque click
Code html : 1
2
3
4
5<script>myFonction(id) { el = document.getElementById(id); //fait quelque chose avec el }</script> <a id="45" onclick="return myFonction(45)">click</a>
Code html : 1
2
3
4<script>myFonction(el) { //fait quelque chose avec el }</script> <a onclick="return myFonction(this)">click</a>
sur un objet autre que lui-même
Code html : 1
2
3
4
5
6
7
8<div id="45">.... <script> //on ne recherche q'une fois els[45] = document.getElementById(45); myFonction(id) { //fait quelque chose avec el[45] }</script> <a onclick="return myFonction(45)">click</a>
c'est qu'en utilisant le dom tu te passe de toutes les recherches
Code : 1
2
3
4
5
6
7div45 = document.createElement('DIV'); ... a = document.createElement('A'); a.ref=div45; a.onclick = function () { //fait quelque chose avec this.ref }
lorsque tu fait un site en HTML et que tu ne fais que y ajouter un peu de js
getElementById est parfait. mais pourquoi l'appeler à chaque événement si tu peux le faire une seule fois.
je pense à un script que j'ai vu récemment qui sur un timer toute les seconde va chercher un div et lui remplacer son contenu par l'heure courante.
alors que placer la référence au div dans une variable une première fois puis sur le timer utiliser la référence est bien plus efficace.
A+JYTle 15/03/2011 à 17:09 -
Pour ma part, en plus de ce qui a déjà été dit :
- Préférer au possible le passage d'objet en paramètres de fonction lorsque beaucoup d'arguments.
Code : 1
2
3
4function toto(obj){ /*ie : obj=={name:'bob',firstName:'moran',...}; */ }
- Une seule "classe"=function à instancier avec new par fichier et nommer son fichier du même nom que la fonction avec la première lettre en majuscule.
Cela facilite l'exploration du code quand on dev. - Les fonctions ne nécessitant pas instanciation ont justement la première lettre en minuscule.
- Toujours des accollades {} autour des if/else. Ca a déjà été dit, mais je rajoute une raison (que j'ai pe ratée). Il s'agit de pouvoir facilement tracer le code en rajoutant une ligne dans le bloc (console.log par exemple). Donc c'est pas perdu.
- Lors de la définition d'une fermeture, préférer la première syntaxe
Code : 1
2
3
4
5
6
7
8
9
10
11
12function Popper(objParams){ var _private = objParams['specialProperty']; var that = {}; that.kikoo = function(){ return _private; }; that.kikooUpper = function(){ return that.kikoo().toUpperCase(); }; return that; }
Code : 1
2
3
4
5
6
7
8
9
10
11
12
13function Popper(objParams){ var _private = objParams['specialProperty']; var kikoo = function(){ return _private; } return { kikoo:kikoo, kikooUpper:function(){ return kikoo().toUpperCase(); } }; }
En plus, les méthodes définies sur that sont déjà accessibles par celles qu'on définit par la suite.
Dans la seconde, on est obligé de définir kikoo pour pouvoir l'appeler depuis kikooUpper, donc autant définir directement sur la variable that. - Egalement, préfixer les variables "privées" (non visibles par l'appelant) par un underscore.
- Et un anti-pattern : on ne peut pas utiliser un nom de variable qui est un mot clé du langage. Donc par exemple
Code : 1
2
3
4function popper(class){ //do some stuff on html nodes with 'class' attr }
J'ai déjà vu du
Code : 1
2
3
4function popper(klass){ //do some stuff on html nodes with 'class' attr }
Voilà pour ma part.le 11/07/2011 à 16:52 - Préférer au possible le passage d'objet en paramètres de fonction lorsque beaucoup d'arguments.
-
sekaijinExpert éminentBonjour pourquoi utiliser un texte là ou une référence fonctionne
Code : window.setTimeout(function () {alert("toto")}, 300)
Code : 1
2toto = function () {alert("toto")}; window.setTimeout(toto, 300)
Code : eval(function(p,a,c,k,e,r){e=String;if(!''.replace(/^/,String)){while(c--)r[c]=k[c]||c;k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('0=1(){2("0")};3.4(0,5);',6,6,'toto|function|alert|window|setTimeout|300'.split('|'),0,{}))
de façon générale mieux vaut utiliser une référence qu'un texte qui interprété donnera un appel à la référence.
par exemple ne pas faireCode : function toto() {alert("toto")};
Code html : <a id='truc' onClick='toto()'>...
le navigateur va générer ceci:Code : 1
2function toto() {alert("toto")}; document.getElementById('truc').onclick= function() {toto();};
Code : document.getElementById('truc').onclick=function() {alert("toto")};
Code : 1
2function toto() {alert("toto")}; document.getElementById('truc').onclick=toto;
A+JYTle 04/02/2012 à 18:28