:::: MENU ::::

Javascript : Style et Bonnes pratiques

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.

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 recommandations je vous conseille 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];

Balise <script>

La balise script doit être déclarée en bas de la page html, cela afin de ne pas bloquer le chargement de la page. Aujourd’hui, la meilleur manière de la déclarer est la suivante :

&lt;script&gt;
 // Javascript Ici
&lt;/script&gt;

// Lien vers un fichier
&lt;script type="text/javascript" src="js/fichierJs.js"&gt;&lt;/script&gt;

Difficile de faire plus simple ! On peut dire merci au HTML5 qui nous épure nos balises. Il est possible de rajouter type=’text/javascript’, ce n’est plus obligatoire mais reste une Obsolete but conforming features.

 

Comparaison

Javascript propose deux méthodes de comparaison. Avec ou sans vérification du type. Il est conseillé d’utiliser l’opérateur avec vérification ( === ) qui, au delà du gain de performance , évite les surprises.

0==false   // true
0===false  // false
1=="1"     // true
1==="1"    // false

La simple comparaison effectue une coercition de type ( ou conversion de type ) . C’est à dire que Javascript essaye de convertir la donnée à tester pour que le type corresponde. Dans le cas du test sans coercition, la valeur ET le type doivent correspondre.

 

Utilisation de eval, with() et for in

Ces trois fonctionnalités de javascript sont à utiliser avec précaution :

 

eval

Eval permet de faire exécuter une chaîne de code par le moteur de javascript. Certains proposent de ne pas l’utiliser, j’ajouterai, à moins de savoir exactement ce que l’on fait car c’est une énorme source de faille de sécurité puisqu’on donne accès directement au compilateur.

 

With

Honnêtement je ne l’ai jamais utilisé et il ne vaut mieux pas. With() permet de travailler sur le contexte d’un objet.

with document {
var x = body.scrollLeft;
write('text1');
write('text2');
write('text3');
}

// Equivalence
var d = document;
var x = d.body.scrollLeft;
d.write('text1');
d.write('text2');
d.write('text3');

// Source de l'exemple : http://javascript.about.com/library/blwith.htm

Pour résumer : ne pas utiliser with() .

 

For in

Cette déclaration permet de faire une boucle sur un objet. Il est préférable d’utiliser un simple for dans la plupart des cas, notamment lorsqu’il s’agit d’itérer sur un tableau. En effet, for-in va faire une liste des propriétés de l’objet ce qui signifie une perte de performances (néanmoins pour moins de 50 éléments à traiter il n’y a aucune différence perceptible) .

Personnellement je trouve aussi plus efficace d’avoir la maîtrise de ses boucles pour éviter les surprises.

Merci à Gildas pour les précisions dans son commentaire qui indique aussi le fait que l’ordre l’itération d’un for in n’est pas garanti

 

Opérateur ternaire

C’est une petite astuce qui permet de réduire son code pour des tests conditionnels simple (vrai ou faux).

if (h === true) {
    console.log(true);
} else {
    console.log(false);
}

// Devient
var retour = (h === true) ? "vrai": "faux";
console.log(retour);

//Ou même
console.log(h ? "vrai" : "faux);

Javascript et le multi-lignes

Il y a deux manières d’écrire du texte multi-lignes en javascript :

// 1ere méthode
var multiligne1 =
‘Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec eu turpis tortor, at luctus nunc. Nulla suscipit
porttitor diam, id dapibus sem mollis ine. Donec semper
suscipit ligula, a molestie ante sagittis nec. Nunc diam
urna,congue nec sagittis non, feugiat ac nib’ ;

// 2eme méthode
var multiligne2 = ‘Lorem ipsum dolor sit amet,consectetur'+
'adipiscing elit. Donec eu turpis tortor,at luctus nunc.'+
'Nulla suscipit porttitor diam, id dapibus sem mollis id.'+
'Donec semper suscipit ligula,a molestie ante sagittis nec'+
'Nunc diam urna, congue nec sagittis non, feugiat ac nib’;

Il est conseillé d’utiliser la deuxième méthode.

 

Tester son Code

Pour terminer dans les bonnes pratiques, tester la qualité de son code est un bon réflexe. Il existe un testeur javascript bien connu JSLintJSHint est moins contraignant et tout aussi performant.

Il s’agit de tests sur la syntaxe et non de tests fonctionnels

Un peu de lecture

C’est la fin de ce premier article consacré au Javascript. Pour terminer un peu de lecture pour ceux qui souhaitent aller plus loin.
Liens :

JavaScript Performance Best Practices

Google JavaScript Style Guide

JavaScript Style Guides And Beautifiers


  • Pingback: Présentation d’une série d’articles sur Javascript | Maxlab | Le Blog()

  • Gilles Duboscq

    Bon article,
    est-ce que tu pourrai élaborer sur le for..in ? Pourquoi est-ce déconseillé ?

    • maxdow

      Merci, tu as raison j’ai été un peu bref sur le for in et je vais aller compléter un peu l’explication. Le for in est utile pour les boucles sur un tableau mais il est moins performant qu’un simple for car il fait une énumération des propriétés de l’objet à boucler et cela de manière récursive http://ecma262-5.com/ELS5_HTML.htm#Section_12.6.4 .
      C’est sur que pour un tableau de 10 éléments on ne verra pas la différence..mais je trouve qu’il est bon de garder le contrôle sur ses boucles car si on ne maîtrise pas ce qui se passe avec un for in ou un forEach par exemple, on peut vite perdre des perfs pour rien.

  • http://www.camilleroux.com/ Camille Roux

    Petite faute dans le titre « bonne pratiques » => « bonnes pratiques »

    • maxdow

      Wow j’ai laissé traîner ça :( . Merci c’est corrigé

  • http://twitter.com/mathrobin mathrobin

    Regroupement de variables : à séparer par une virgule et non un point-virgule ;)
    Le point-virgule n’est jamais obligatoire : http://dailyjs.com/2012/04/19/semicolons/
    Pour la manipulation de contenus HTML, encore une fois, il vaut mieux définitivement prohiber cette pratique (http://www.mathieurobin.com/2012/05/creation-merdique-de-dom-en-js-plus-dexcuses/)

    Sinon en soit, toujours bien de rappeler les bases^^

    • maxdow

      Merci pour ce retour. Je viens de bien relire le passage et effectivement il n’est pas très clair car je parle de fin de ligne pour le point virgule alors qu’une déclaration multiple peut se faire sur plusieurs lignes. Je vais un peu le remanier pour les prochains lecteurs.
      Sinon effectivement le point-virgule n’est pas obligatoire, mais disons très conseillé ;)

  • http://twitter.com/check_ca Gildas

    A propos du for in, tu ecris, je cite, « Cette déclaration permet de faire une boucle sur un tableau. ».

    C’est partiellement faux. Le mot clef in utilisé dans une boucle for permet d’itérer sur les propriétés d’un objet. Accessoirement, un tableau est un objet en JS donc ca itère sur les eléments du tableau sauf dans le cas où on a ajouté une propriété au tableau en question. Dans ce cas, on va aussi itérer sur cette propriété. Exemple :

    var property, array;
    array = [1, 2, 3];
    array.foo = 4;
    for (property in array) {
    console.log(property); // affiche 0, 1, 2 et foo
    }

    C’est pour cette raison qu’il est fortement déconseillé d’utiliser un for in pour itérer sur un tableau. Petite remarque supplémentaire, les specs d’ECMAScript disent clairement que l’ordre d’itération n’est pas garanti dans un for in, ce qui peut s’averer génant.

    • maxdow

      Merci pour ces précisions, je vais améliorer ce passage en citant ton exemple.

  • http://twitter.com/G4llic4 Simon RENOULT

    Je ne sais pas si c’est une « bonne pratique » mais on peut raccourcir le ternaire suivant en un autre plus simple à mon goût :
    (h === true) ? retour= »vrai »: retour= »faux »;
    en
    retour = (h === true) ? « vrai » : « faux »;

    Après je ne sais pas si la sépration entre déclaration et affectation est volontaire mais on pourrait auss l’écrire comme ceci :
    var retour = (h === true) ? « vrai » : « faux »;

    • maxdow

      Merci pour le retour. En effet je préfère aussi la version d’attribution direct. Je vais modifier l’exemple. Pour ce qui est de la bonne pratique disons que c’est plus une astuce, le principal étant de garder son code compréhensible et cohérent ( et l’opérateur ternaire ne va pas nécessairement dans ce sens si il est mal utilisé )

  • Pingback: Advanced JS | Pearltrees()

  • Pingback: jfd98ayhcim()