10 Bonnes pratiques de codage en Javascript

JavaScript fait presque partie de toutes les pages Web. un code JavaScript mal écrit peut rendre difficile la garantie d’une expérience cohérente pour les utilisateurs. Dans cet article nous allons découvrir une liste des bonnes pratiques pour optimiser votre code JavaScript.
 
Commentaires en JavaScriptCommentaires en JavaScriptLes commentaires en JavaScript peuvent être utilisés pour expliquer le code JavaScript et le rendre plus lisible.     Les commentaires en JavaScript peuvent également…Lire plus

1. N’utiliser pas les commentaires HTML dans le bloc script

En 1995, certains navigateurs comme Netscape 1.0 n’avaient aucun support ou connaissance du tag script. Ainsi, lorsque javascript a été publié pour la première fois, une technique était nécessaire pour cacher le code des anciens navigateurs afin qu’ils ne l’affichent pas sous forme de texte dans la page. L’astuce consistait à utiliser des commentaires HTML dans le bloc script pour cacher le code.

Utiliser des commentaires HTML dans un bloc script est une mauvais pratique.

<script language="javascript">
<!--
   // votre code ici
//-->
</script>

 

2. Toujours utiliser ‘var’.

Les variables en javascript ont soit une portée globale, soit une portée locale, et l’utilisation du mot-clé ‘var’ est essentielle pour les garder impactes. Lors de la déclaration d’une variable à utiliser soit comme variable globale, soit comme variable locale, toujours préfixer la déclaration avec le mot-clé ‘var’. L’exemple ci-dessous met en évidence le problème potentiel causé par le fait de ne pas le faire.

Problème causé par la non-utilisation de « var »

var i=0; // crée une variable globale
function test() {
   for (i=0; i<10; i++) {
      alert("Welcom to WayToLearnX.com");
   }
}
test();
alert(i);   // La variable globale i est maintenant égale à 10!

Comme la variable i à l’intérieur de la fonction n’a pas été déclarée en tant que variable locale à l’aide du mot clé ‘var’, elle fait référence à la variable globale dans cet exemple. Il est correct de toujours déclarer les variables globales à l’aide de ‘var’, mais il est essentiel de déclarer les variables au niveau de fonction en utilisant ‘var’. L’approche suivante est une bonne pratique.

function test() {
   for (var i=0; i<10; i++) {
      alert("Welcom to WayToLearnX.com");
   }
}
Différence entre let et var en JavaScriptDifférence entre let et var en JavaScriptEn Javascript, vous devez déclarer les variables contenant des données auxquelles vous aurez besoin d’accéder ultérieurement pour pouvoir les utiliser dans votre programme. Vous avez…Lire plus  

3. Utilisez === au lieu de ==

JavaScript utilise deux types différents pour effectuer l’opération d’égalité: === et ==. Il est considéré comme une meilleure pratique de toujours utiliser le premier lors de la comparaison.

Si les deux opérandes sont du même type et de même valeur, alors === renvoie true.

Pourtant, lorsque vous travaillez avec ==, Vous rencontrez des problèmes lorsque vous travaillez avec différents types.

10 == '10' // true | Vérifier la valeur
10 == 10 // true | Vérifier la valeur
10 === '10' // false | Vérifier le type (int === string) => false 
10 === 10 // true | Vérifier le type (int === int) => true
Différence entre Undefined et Null en JavascriptDifférence entre Undefined et Null en JavascriptBien des fois, nous nous perdons souvent sur la différence entre UNDEFINED et NULL.     Undefined signifie qu’une variable a été déclarée mais qu’aucune…Lire plus
4. Évitez ‘eval’

La fonction eval() en javascript permet d’évaluer ou exécuter un argument. Si l’argument est une expression, eval() évalue l’expression. Si l’argument est une ou plusieurs instructions JavaScript, eval() exécute les instructions. Dans presque tous les cas, eval ne devrait jamais être utilisé. Si cela existe dans votre code, il y a presque toujours une manière plus correcte d’accomplir ce que vous faites.

La règle est: « Eval is evil. » Ne l’utilisez pas, sauf si vous êtes un développeur expérimenté et que votre cas est une exception.
 

5. Utiliser JS Lint

JSLint est un débogueur écrit par Douglas Crockford. Il vous suffit de coller votre script et il analysera rapidement tous les problèmes et erreurs notables de votre code.

Avant de livrer un code JavaSript, exécutez-le dans JSLint uniquement pour vous assurer que vous n’avez commis aucune erreur stupide.
 
 

6. Placez les scripts au bas de votre page
         ...
        </div>
        <script type="text/javascript" src="/js/page.js"></script>
        <script type="text/javascript" src="/js/script.js"></script>
    </body>
</html>

l’objectif est de rendre le chargement du page aussi rapide que possible pour l’utilisateur. Lors du chargement d’un script, le navigateur ne peut pas continuer tant que le fichier entier n’a pas été chargé. Ainsi, l’utilisateur devra attendre plus longtemps avant de constater une quelconque progression. Placez ces fichiers en bas, juste avant la fermeture de la balise body. C’est absolument une bonne pratique.
Les principales nouveautés de JavaScript ES6Les principales nouveautés de JavaScript ES6Dans ce tutoriel nous allons découvrir les nouvelles fonctionnalités de l’ES6 avec des exemples. ECMAScript 6, également appelé ECMAScript 2015, est la dernière version du…Lire plus

7. Déclarer les variables à l’extérieur

Mauvaise pratique :

for (var i = 0; i < arr.length; i++) {
  var row = document.getElementsByClassName("row");
  row[i].style.backgroundColor = "blue";
}

Bonne pratique :

var row = document.getElementsByClassName("row");

for (var i = 0; i < arr.length; i++) {
    row[i].style.backgroundColor = "blue";
}

 

8. Utiliser {} au lieu de New Object()

Il y a plusieurs façons de créer des objets en JavaScript. Peut-être que la méthode la plus traditionnelle est d’utiliser le mot-clé « new », comme indiqué ci-dessous :

var person = new Object();
person.firstName = "Yohan";
person.lastName = "Doe";
person.age = 30;
person.address = "Paris";

Pourtant, cette méthode est une mauvaise pratique. Au lieu de ça, c’est recommandé d’utiliser la méthode suivante puisqu’il est beaucoup plus robuste.

var person = {
        firstName: "Yohan", 
        lastName: "Doe", 
        age: 30, 
        address: "Paris"
};

Notez que si vous voulez simplement créer un objet vide, juste des accolades vide {}.
 
 

9. Utilisez [] au lieu de New Array()

La même chose s’applique pour créer un nouveau tableau.

var colors = new Array();
colors[0] = "blue";
colors[1] = 'red';
colors[2] = 'yellow';

Bonne pratique :

var colors = ['blue', 'red', 'yellow'];

 

10. Supprimer l’attribut « language »
<script type="text/javascript" language="javascript">
...
</script>

L’attribut LANGUAGE est obsolète dans la balise <script>. La manière appropriée de créer un bloc de code javascript est la suivante:

<script type="text/javascript">
...
</script>
QCM JavascriptQCM Javascript – Partie 1QCM sur Javascript avec des réponses pour la préparation des tests techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus
Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *