Newsletter Developpez.com

Inscrivez-vous gratuitement au Club pour recevoir
la newsletter hebdomadaire des développeurs et IT pro

Débat : Vos bonnes pratiques JavaScript

Le , par Bovino, Rédacteur
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 :
  • 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

à tous ceux qui participeront à cette discussion.


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de Kaamo Kaamo - Membre expert https://www.developpez.com
le 18/11/2013 à 11:40
J'aurais dû mentionner la version de Chrome avec laquelle j'ai testé : Version 30.0.1599.101 m

J'ai bien table dedans :
Code javascript : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
assert: function assert() { [native code] } 
clear: function clear() { [native code] } 
constructor: function Console() { [native code] } 
count: function count() { [native code] } 
debug: function debug() { [native code] } 
dir: function dir() { [native code] } 
dirxml: function dirxml() { [native code] } 
error: function error() { [native code] } 
group: function group() { [native code] } 
groupCollapsed: function groupCollapsed() { [native code] } 
groupEnd: function groupEnd() { [native code] } 
info: function info() { [native code] } 
log: function log() { [native code] } 
markTimeline: function markTimeline() { [native code] } 
profile: function profile() { [native code] } 
profileEnd: function profileEnd() { [native code] } 
table: function table() { [native code] } 
time: function time() { [native code] } 
timeEnd: function timeEnd() { [native code] } 
timeStamp: function timeStamp() { [native code] } 
trace: function trace() { [native code] } 
warn: function warn() { [native code] }

Voici ma source : Chrome Dev Tools / Annonce d'Addy Osmani
Le ticket webkit
L'équivalent Firebug
Avatar de sekaijin sekaijin - Expert éminent https://www.developpez.com
le 18/11/2013 à 12:36
ce n'est pas présent dans la version
Version 31.0.1650.57 m
qui pourtant à un n° suppérieur à
Version 30.0.1599.101 m

je pense que la page que tu site modifie le proto de la console
si je me mets sur le forum et que j'ouvre la console j'obtiens
Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
>console 
Object {log: function, debug: function, info: function, warn: function, error: function…} 
assert: function (){} 
count: function (){} 
debug: function (){} 
dir: function (){} 
dirxml: function (){} 
error: function (){} 
group: function (){} 
groupEnd: function (){} 
info: function (){} 
log: function (){} 
profile: function (){} 
profileEnd: function (){} 
time: function (){} 
timeEnd: function (){} 
trace: function (){} 
warn: function (){} 
__proto__: Object
si j'ouvre le lien https://developers.google.com/chrome...#console-table er que je fais la même opératio j'ai
Code : Sélectionner tout
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
>console 
Console {memory: MemoryInfo, debug: function, error: function, info: function, log: function…} 
memory: MemoryInfo 
__proto__: Console 
constructor: function Console() { [native code] } 
__proto__: ConsoleBase 
assert: function assert() { [native code] } 
clear: function clear() { [native code] } 
constructor: function ConsoleBase() { [native code] } 
count: function count() { [native code] } 
debug: function debug() { [native code] } 
dir: function dir() { [native code] } 
dirxml: function dirxml() { [native code] } 
error: function error() { [native code] } 
group: function group() { [native code] } 
groupCollapsed: function groupCollapsed() { [native code] } 
groupEnd: function groupEnd() { [native code] } 
info: function info() { [native code] } 
log: function log() { [native code] } 
markTimeline: function markTimeline() { [native code] } 
profile: function profile() { [native code] } 
profileEnd: function profileEnd() { [native code] } 
table: function table() { [native code] } 
time: function time() { [native code] } 
timeEnd: function timeEnd() { [native code] } 
timeStamp: function timeStamp() { [native code] } 
timeline: function timeline() { [native code] } 
timelineEnd: function timelineEnd() { [native code] } 
trace: function trace() { [native code] } 
warn: function warn() { [native code] } 
__proto__: Object
je dirais que c'est le script https://developers.google.com/_stati...script_foot.js qui fais ça.

A+JYT
Avatar de Kaamo Kaamo - Membre expert https://www.developpez.com
le 18/11/2013 à 14:03
Bien vu ! J'avais testé dans un nouvel onglet Chrome qui doit embarquer aussi une console améliorée. Quoiqu'il en soit, c'est à surveiller car le rendu est pas mal pour débugger
Avatar de NoSmoking NoSmoking - Modérateur https://www.developpez.com
le 20/11/2013 à 14:54
Bonjour,
Citation Envoyé par Kaamo
Uniquement dans Chrome à priori

cela existe sous FireFox mais pas de souvenir depuis quand, avec la présentation suivante
Avatar de Kaamo Kaamo - Membre expert https://www.developpez.com
le 20/11/2013 à 15:38
Je crois que c'est grâce à Firebug. D'ailleurs Chrome s'en est inspiré apparemment.
Avatar de Watilin Watilin - Membre expert https://www.developpez.com
le 20/11/2013 à 16:34
Citation Envoyé par Kaamo  Voir le message
Je crois que c'est grâce à Firebug. D'ailleurs Chrome s'en est inspiré apparemment.

Effectivement je me souviens avoir vu ça dans une patch note de Firebug. Je crois que ça date de la versions actuelle (1.12).
Avatar de NoSmoking NoSmoking - Modérateur https://www.developpez.com
le 25/11/2013 à 21:20
Il semblerait que cela soit plus ancien, firebug ver 1.8, mais l'importance est toute relative.
Avatar de SylvainPV SylvainPV - Rédacteur/Modérateur https://www.developpez.com
le 26/11/2013 à 0:58
Ce qui serait très utile aussi dans l'API console, c'est un moyen de logger le scope d'une closure selon l'endroit du code où on se trouve. On peut déjà le voir en mettant un breakpoint sous Chrome, dans la barre latérale de débug à droite.
Avatar de Coocky10 Coocky10 - Membre habitué https://www.developpez.com
le 13/09/2016 à 13:32
Citation Envoyé par Auteur  Voir le message
Pour 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) ;

Pourquoi bannir innerHTML ?
Avatar de sdamart sdamart - Membre du Club https://www.developpez.com
le 14/09/2016 à 10:56
Citation Envoyé par Coocky10  Voir le message
Pourquoi bannir innerHTML ?

Ce n'est pas innerHTML qu'il faut bannir mais document.write car il s'agit je pense d'une méthode qui t'oblige à réécrire le contenu de ta page. Et aujourd'hui ce n'est plus ce que l'on cherche à faire.
Pour la citation de auteur,
Certaine personne écrivent cela :
Code : Sélectionner tout
document.getElementById("el").innerHTML="<div id=\"autre_el\">POP</div>";
Il n'y a rien à dire dans cette ligne de code j'ajoute une DIV dans #el définitivement
Mais ça :
Code : Sélectionner tout
1
2
3
4
5
document.getElementById("el").innerHTML="<div id=\"autre_el\">POP<a href=\"#\" id=\"closer\">x</a></div>"; 
document.getElementById("closer").onClick=function(){ //Je ne tiens pas compte des event_caller IE et FireFox (c'est pour l'exemple) 
document.getElementById("autre_el").remove(); 
return false; 
};
C'est maladroit est bancal
Avatar de NoSmoking NoSmoking - Modérateur https://www.developpez.com
le 14/09/2016 à 18:42
Citation Envoyé par sdamart
Ce n'est pas innerHTML qu'il faut bannir mais document.write...

peut être pas bannir mais a utiliser en connaissance de code et de façon cohérente.

Pour test et pour ce rendre compte des effets de bord : http://www.developpez.net/forums/d97...l/#post5463783.
Offres d'emploi IT
Data scientist senior H/F
Safran - Ile de France - Magny-les-Hameaux (Saclay)
Expert décisionnel business intelligence H/F
Safran - Ile de France - Évry (91090)
Architecte électronique de puissance expérimenté H/F
Safran - Ile de France - Villaroche - Réau

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique Développement Web : Xavier Lecomte -