Pour rester cohérents avec nos conventions HTML et CSS.
Même s’ils sont parfois optionnels, pour des questions de robustesse lors de la concaténation/minification il est préférable de toujours les ajouter.
Cela nous permet de pouvoir utiliser des double quotes dans le HTML et ainsi de pouvoir inclure l’un dans l’autre si nécessaire.
===
pour les égalitésJavascript possède ce fantastique concept de variables truthy ou falsy qui
rends les comparaison à base de ==
sujettes à de nombreux effets de bords. Il
est donc indispensable de tester ses égalités avec ===
qui teste à la fois
l’égalité des éléments, ainsi que leur type.
lien vers vidéo wtfjs
()
ou les []
Ces exemples parlent d’eux-même :
/* BAD */
if( condition ) {
alert( foo[ 'bar' ] );
}
/* GOOD */
if (condition) {
alert(foo.bar);
}
{
et }
sur les if
, while
, etcMême si l’instruction ne prends qu’une ligne, il est préférable de toujours
ajouter les {}
. Cela améliore la lisibilité et permet d’ajouter de nouvelles
instructions sans introduire de bugs (google: apple ssl bug).
/* BAD */
if (true) foo()
/* BAD */
if (true)
foo()
/* GOOD */
if (true) {
foo();
}
C’est la convention appliquée par jQuery, Angular, Underscore, etc.
Si vous devez définir des constantes, utilisez cette notation pour les différencier des variables classiques.
Si vous définissez une variable qui doit être appellée avec l’opérateur new
,
alors mettez la première lettre en majuscule, afin d’identifier clairement que
c’est un constructeur.
Lorsque Javascript s’execute, il remonte les définitions de variables en haut du bloc où elles sont définies. Ce mécanisme s’appelle l’hoisting. Pour simplifier la lisibilité, il est donc préférable de définir nos variables en haut du bloc où elles sont utilisées.
/* BAD */
function foo() {
var foo = 'bar';
[...]
var bar = 'baz'
}
/* GOOD */
function foo() {
var foo = 'bar';
var bar = 'baz';
}
Note: Le cours Javascript #3 de CodeSchool, The Hoisting Hills, explique très bien ce principe, avec des exemples.
On préférera la syntaxe suivante pour les définitions d’objets :
var foo = {
bar: 'pouet',
'new': 42,
'long key': 'is long'
};
La syntaxe JSON nécessite que l’on mette des double quotes autour des clés des
objets, mais cela n’est pas nécessaire en Javascript dans la majorité des cas.
Les seules exceptions sont pour les mots réservés (new
, var
, etc) et les
clés contenants des espaces ou des tirets.
.
plutot que []
pour accèder à une cléIl est possible d’accèder à la clé bar
de l’objet foo
soit avec foo.bar
ou foo['bar']
. On préferera la première notation.
Les exceptions sont bien sur pour les clés avec des espaces ou tirets, ou les
mots réservés. On utilisera aussi la notation []
quand la clé est elle-même
une variable.
Lorsqu’on utilise une SIF, il est préférable d’entourer la fonction dans des parenthèses pour lever le ambiguités et éviter des erreurs lors de la minification.
/* BAD */
function() {
alert('bhou');
}();
/* GOOD */
(function() {
alert('bhou');
})();
N’ajoutez jamais de méthodes custom sur les objets natifs (String
, Array
,
Object
, etc). A la rigueur, si vous devez faire un shim pour un navigateur
qui n’implémente pas une certaine fonction, vérifier toujours la présence de
ladite fonction avant de la redéfinir.
Mettre du HTML en dur dans du Javascript vous empêche de profiter des fonctions de vérification de syntaxe ou de linting de votre IDE.
Essayez au maximum de garder le markup HTML dans des fichiers HTML (soit en les
chargeant en asynchrone, soit en définissant des templates dans la page avec
<script language="template"></script>
.
Ajouter des styles aux éléments du DOM manuellement depuis le Javascript est
similaire à utiliser l’attribut style
dans le HTML : les styles ainsi
appliqués ont la précédence sur ce qui peut être défini sur le Javascript.
Si possible, ajoutez ou supprimez plutot des classes CSS sur l’élément.
Il est déconseillé d’écrire à la main les boucles d’itération sur les clés d’un
objet ou les éléments d’un tableau. Utilisez plutot les méthodes d’itération
(_.each
, angular.forEach
, etc) fournies par votre bibliothèque. Vous aurez
ainsi un code plus lisible et éviterez pas mal de edge-case.
moment
pour gérer les datesSi vous avez besoin de faire le moindre travail sur des dates en Javascript,
moment
est la meilleure bibliothèque disponible.
lodash
ou underscore
.Ces deux bibliothèques exposent la variable _
en global qui donne accès à un
sucre syntaxique très pratique (test de type, itération sur collection,
wrapping de fonctions). Nous recommandons lodash, pour sa compatibilité et ses
performances.
JSHint est une version paramétrable de JSLint. Vous trouverez un fichier
.jshintrc
dans le dossier ./tools
, à utiliser dans vos projets.
JavaScript CodeStyle. Complémentaire à JSHint, vous permet de définir avec plus de granularité vos conventions de code.