Chapitre 15 – Bonnes pratiques jQuery

1) Règle n°1 : séparer le JS du HTML

Évite d’écrire du JavaScript dans les attributs HTML (ex : onclick="..."). Préfère toujours on() dans ton fichier JS.

<!-- ⚠️ Mauvais -->
<button onclick="doSomething()">OK</button>

// ✅ Bon
$(function(){
  $('#btn').on('click', function(){
    doSomething();
  });
});

2) Organiser son code : un point d’entrée + des fonctions

Pattern simple :

• Un $(function(){...}) au démarrage
• Des fonctions en dehors pour la logique

function showMessage(type, text){
  $('#message').removeClass('ok warn').addClass(type).text(text);
}

$(function(){
  $('#save').on('click', function(){
    showMessage('ok', 'Enregistré.');
  });
});

3) Stocker les sélections (caching)

Chaque fois que tu écris $('.item'), jQuery parcourt le DOM. Si tu réutilises souvent la même sélection, stocke-la.

$(function(){
  const $list = $('#list');
  const $message = $('#message');

  $('#add').on('click', function(){
    $list.append('<li>Nouveau</li>');
    $message.text('Ajouté.');
  });
});

4) Préférer le “code local” : partir de $(this)

Dans un événement, tu as presque toujours un point de départ naturel : l’élément cliqué ou modifié.

$('.del').on('click', function(){
  $(this).closest('li').remove();
});

5) Délégation : indispensable pour le contenu dynamique

Règle : si tu ajoutes des éléments après coup (append, load…), utilise la délégation.

$('#list').on('click', '.del', function(){
  $(this).closest('li').remove();
});

6) Éviter les anti-patterns (erreurs fréquentes)

Anti-pattern A : multiples handlers identiques

// ⚠️ Mauvais : on attache plein de handlers
$('.btn').each(function(){
  $(this).on('click', function(){ ... });
});

// ✅ Bon : un seul handler
$(document).on('click', '.btn', function(){ ... });

Anti-pattern B : trop d’injections DOM dans une boucle

// ⚠️ lent si grosse boucle
for(let i=0;i<1000;i++){
  $('#list').append('<li>Item</li>');
}

// ✅ mieux : construire et injecter une fois
let html = '';
for(let i=0;i<1000;i++){
  html += '<li>Item</li>';
}
$('#list').html(html);

Anti-pattern C : mélanger style et logique

// ⚠️ à éviter
$('#box').css('background', 'red').css('color', 'white');

// ✅ mieux : classe CSS
$('#box').addClass('error');

7) Préférer text() à html() pour la sécurité

Si une donnée vient d’un utilisateur, on ne l’injecte pas en HTML.

// ✅ sûr
$('#out').text(userInput);

// ⚠️ dangereux si userInput n’est pas nettoyé
$('#out').html(userInput);

8) Gérer l’état “loading” (UX pro)

Pendant un appel AJAX, on peut :

• Désactiver le bouton
• Afficher “Chargement…”
• Réactiver au retour

function setLoading($btn, loading){
  $btn.prop('disabled', loading);
  $btn.text(loading ? 'Chargement...' : 'Envoyer');
}

9) Mini “structure pro” recommandée

Un exemple d’organisation simple (sans framework) :

const App = {
  init(){
    this.cache();
    this.bind();
  },

  cache(){
    this.$list = $('#list');
    this.$add = $('#add');
    this.$msg = $('#message');
  },

  bind(){
    this.$add.on('click', () => this.addItem());
    this.$list.on('click', '.del', (e) => this.removeItem(e));
  },

  addItem(){
    this.$list.append('<li>Nouvel item <button class="del">X</button></li>');
    this.$msg.text('Ajouté.');
  },

  removeItem(e){
    $(e.currentTarget).closest('li').remove();
    this.$msg.text('Supprimé.');
  }
};

$(function(){
  App.init();
});

Exercice – Refactoriser une todo list

1. Reprends ta todo list (chapitres 5/6).
2. Stocke les sélections importantes.
3. Utilise la délégation pour la suppression.
4. Ajoute un message global via une fonction showMessage().

Résumé du chapitre

• Séparer JS/HTML, éviter onclick
• Un point d’entrée + fonctions réutilisables
• Caching des sélections jQuery
• Partir de $(this) (code local)
• Délégation pour contenu dynamique
• Limiter les insertions DOM en boucle
• Sécurité : text() plutôt que html()