Lorsque l’on débute dans un nouveau langage on ne maîtrise pas forcément ses spécificités techniques et sans recul on fait parfois quelques erreurs. Respecter certaines contraintes lorsque l’on code permet d’obtenir un programme maintenable et souvent éviter de perdre beaucoup de temps sur des bugs inutiles.<!-- more -->
Le Javascript est un langage qui permet de mettre en oeuvre des applications web de manière assez simple. L’absence de contraintes de typage et de gestion de la mémoire le rend accessible même pour quelqu’un ne possédant pas de grandes compétences en programmation.
Il est possible d’apprendre à programmer avec Javascript mais il est quand même important de respecter certaines règles (qui s'appliquent aussi très bien à d'autres langages).
Pour commencer cette série d’articles consacrée à javascript , voici quelque conseils de base.
Guide de style
Le meilleur exemple étant l’illustration, voici un code inutile résumant les différents points que l'on va aborder :
/**
* Un exemple de code Javascript
* @param {string} bar Argument inutile
* @author maxlab.fr
*/
function functionInutile( bar ) {
var hello = ‘world’,
test = [1, 2, 3],
objetJavascript = {
nombre : 123,
text : ‘blabla’
};
// une boucle
for ( var i=0,t=test.length; i<t; i++) {
if ( true ) {
console.log( test[i] );
}
}
}
Commentaires
Je suis assez partisan du “code en tant que documentation”. C’est à dire écrire un code le plus descriptif possible en particulier dans le choix du nom des variables et fonctions pour qu’il soit lisible et compréhensible. Cela reste tout de même insuffisant et un code commenté est souvent indispensable. Javascript ne déroge pas à la règle et propose un système de commentaire proche du C++. On peut utiliser des codes spéciaux dans les blocs de commentaires pour générer une documentation grâce à des outils comme JsDoc. L’utilisation de commentaires sur une ligne est aussi possible mais pour garder en lisibilité, il convient de ne pas faire de commentaires en fin de ligne.
Regroupement des variables
Au début de la fonction, on peut séparer les différentes variables par une virgule et terminer la déclaration du groupe par un point virgule. Cette pratique est particulièrement utile lorsqu’il y a de nombreuses variable à gérer. On peut remarquer que j’aurai pu faire de même pour les variables i et t dans la boucle. Je fais le choix de déclarer les variables utiles à la boucle dans celle-ci pour pouvoir s’y retrouver.
Concernant l’utilisation du point virgule : ils sont nécessaire à chaque fin d'instruction. Absolument obligatoires conseillés lors d’une déclaration de variable, il ne le sont pas pour les fonctions.
Utilisation des variables
Pour terminer sur les variables, il faut TOUJOURS utiliser le mot clé var pour la déclaration. On évite ainsi de se retrouver avec des variables globales dont l'utilisation doit être la plus limité le plus possible ( question de performance et de maintenabilité du code ).
Mise en cache
Dans l’exemple, la variable t correspond à la taille de notre tableau test. Il est inutile de recalculer cette valeur à chaque itération, par conséquent, même si c’est aussi un sujet touchant à l’optimisation des performances qu'au style, c’est une pratique importante. Il en va de même pour jQuery avec le DOM. La mise en cache permet d'économiser des ressources processeur surtout lors du traitement en boucle.
Les accolades sont obligatoires !
Même si il est possible de s’en passer dans certains cas il faut les utiliser. Les risques d’erreurs sont trop important pour passer à coté. Pour un code lisible, le mieux est de placer des espaces entre les parenthèses et accolades et d’effectuer un retour à la ligne après l’ouverture du bloc d’instruction.
Utilisation des guillemets
Simple ou double peut importe, ce qui compte c’est de faire un choix et de s’y tenir. Il est toutefois recommandé d’utiliser les guillemets simple lors de l’utilisation de contenus HTML.
Être cohérent
Certainement la règle la plus importante, que ce soit seul et encore plus en équipe, la cohérence est une des clés d’un code propre et maintenable. Parmi les éléments importants on peut noter les espaces, les guillemets, formatage des noms ( camelCase ou underscore_case).
Ne pas mélanger espaces et tabulations
C'est une règle applicable pour l’indentation notamment qui découle de la précédente.
La meilleur chose est d’activer l’affichage des caractères invisibles afin de nettoyer le code. Il est d’autant plus important d’avoir un code propre pour le travail en équipe utilisant des gestionnaires de version. Cela évite en effet d’avoir à constater une modification sur un simple espace.
Pour voir d'autres recommendations je vous conseil de faire un tour ici.
Bonne pratiques
On a vu quelques bon réflexes à avoir pour l'écriture de code, passons maintenant à quelques bonnes pratiques plus spécifiques à Javascript.
Notation simplifiée
Il y a plusieurs manières de déclarer un tableau ou un objet en javascript. Il est conseillé d'utiliser la notation simplifiée car elle simplifie l'écriture et permet d'éviter des erreurs comme l'oublie du mot clé new.
// Objet
// Notation complète
var objet = new Object();
o.couleur = 'Rouge';
o.angles = 4;
o.maCouleur = function() {
console.log(this.couleur);
};
// Notation simplifiée ( littérale )
var objet = {
couleur : 'Rouge',
angles : 4,
maCouleur : function() {
console.log(this.couleur);
}
};
// Tableau
// Notation complète
var tableau = new Array();
tableau[0] = 1;
tableau[1] = 2;
// Notation simplifiée
var tableau = [1, 2];