Chapitre 20 – Bonnes pratiques et optimisation

La qualité du code JavaScript n'est pas seulement une question de syntaxe correcte. Écrire du code propre, lisible et performant est essentiel pour maintenir, déboguer et faire évoluer une application dans le temps. Ce chapitre passe en revue les bonnes pratiques fondamentales et quelques techniques d'optimisation.

1. Écriture propre et lisible

• Indentation cohérente : Utiliser toujours le même style d'indentation (2 ou 4 espaces).
• Commentaires clairs : Commentez le pourquoi du code, pas le comment.
• Simplicité : Préférez le code simple et lisible à une solution complexe mais « maligne ».

// Mauvais : difficile à lire
if(x){y();}else{z();}

// Bon : lisible
if (x) {
  y();
} else {
  z();
}

2. Nommage clair des variables

• Variables explicites : Donnez des noms qui décrivent clairement leur rôle.
• Évitez les abréviations inutiles : nbUsers est plus clair que nu.
• Convention : Utilisez camelCase pour les variables et fonctions, PascalCase pour les classes.

// Mauvais
let x = 42;
let a = true;

// Bon
let maxUsers = 42;
let isAuthenticated = true;

3. Réduction de la complexité

Un code trop imbriqué ou trop long est difficile à maintenir. Voici quelques conseils :

• Découpez les fonctions : Chaque fonction doit faire une seule chose.
• Utilisez des fonctions fléchées pour les callbacks simples :
• Évitez les effets de bord : Les fonctions doivent avoir un comportement prévisible.

// Mauvais : fonction trop longue
function process(data) {
  // 50 lignes de code
}

// Bon : décomposition
function process(data) {
  const cleaned = clean(data);
  const result = compute(cleaned);
  display(result);
}

4. Éviter les fuites de mémoire

Une fuite de mémoire survient quand des objets restent en mémoire alors qu'ils ne sont plus utilisés. Quelques règles à suivre :

• Supprimez les écouteurs d'événements inutiles avec removeEventListener.
• Évitez les références globales inutiles.
• Nettoyez les timers (clearTimeout, clearInterval).

// Mauvais : l'écouteur persiste
function init() {
  document.addEventListener('click', handleClick);
}

// Bon : suppression propre
function init() {
  function handleClick() {
    console.log("cliqué");
  }
  document.addEventListener('click', handleClick);
  // plus tard…
  document.removeEventListener('click', handleClick);
}

5. Optimisation des performances

Quelques techniques pour améliorer les performances :

• Cachez les sélections DOM : Stockez les éléments DOM dans des variables plutôt que de les resélectionner.
• Évitez les manipulations DOM inutiles : Utilisez DocumentFragment ou modifiez le HTML en mémoire avant l'insertion.
• Optimisez les boucles : Calculez les longueurs de tableau avant la boucle.

// Mauvais : resélectionne à chaque fois
function updateItems() {
  document.querySelectorAll('.item').forEach(item => {
    item.style.color = 'red';
  });
}

// Bon : cache la sélection
function updateItems() {
  const items = document.querySelectorAll('.item');
  items.forEach(item => {
    item.style.color = 'red';
  });
}