5 bonnes pratiques jQuery

Dernière mise à jour : juillet 2014

Je vais essayer de faire un petit tour des bonnes pratiques dont la plupart concernent jQuery et d’autres le Javascript en général. Voici les différents chapitres abordés :

Tous les codes que je vais montrer sont fonctionnels, l’indication « pas bon » indique une perte une performance ou une mauvaise pratique.

1. Utilisation du $

Vous savez que le symbole dollar est aussi utilisé par d’autres librairies, par exemple Mootools ou Prototype. Pour éviter les éventuels conflits, on spécifie la variable $ uniquement pour jQuery à l’intérieur du bloc.
De plus, il est nécessaire que le DOM soit prêt afin de le manipuler et d’utiliser les gestionnaires d’événements. Pour cela on utilise la méthode .ready() de document.

(function($) {
    // on peut utiliser le $ de jQuery
    
    $(document).ready(function() {
        // le DOM est chargé
    });
})(jQuery);

2. Les sélecteurs

Lorsque vous êtes amené à utiliser un objet jQuery plus d’une fois dans votre fonction ou votre script entier, mettez cet objet dans une variable, et de préférence avec un dollar devant de sorte à tout de suite reconnaître un objet jQuery d’une variable classique qui contient une simple valeur.

var $el = $('#element'); // bon
var el = $('#element'); // pas bon

C’est la même chose pour le $(this) :

$('#element').on('click', function(e) {
    e.preventDefault();

    var $this = $(this); // bon    
    var href = $this.attr('href'); // bon
    var text = $this.text(); // bon
    
    var href = $(this).attr('href'); // pas bon
    var text = $(this).text(); // pas bon
});

Si vous pouvez mettre un id à votre élément alors ne vous en privez pas ! En effet il reste le sélecteur le plus rapide. D’ailleurs, si l’on souhaite accéder à un id, il ne faut pas renseigner son tag dans le sélecteur, sinon le DOM utilisera d’abord getElementsByTagName() puis getElementById().

var $el = $('#element'); // bon
var $el = $('div#element'); // pas bon

Quand vous voulez sélectionnez plusieurs éléments, indiquez – si possible – l’id du parent le plus proche.

var $div = $('#main div'); // bon
var $div = $('div'); // pas bon

Pour la sélection de class, il faut – contrairement à l’id – indiquer le nom de l’élément concerné. Encore mieux, indiquer également l’id du parent le plus proche.

var $image = $('div.image'); // pas bon
var $image = $('#main .image'); // pas bon
var $image = $('.image'); // pas bon
var $image = $('#main div.image'); // bon

3. Le chaînage

Vous êtes censé savoir qu’une grande force de jQuery réside dans le chaînage des méthodes sur un sélecteur.

// pas bon
$('#element').hide();
$('#element').css('background-color', 'yellow');
$('#element').fadeIn('slow');

// pas bon
var $el = $('#element');
$el.hide();
$el.css('background-color', 'yellow');
$el.fadeIn('slow');

// bon
$('#element').hide().css('background-color', 'yellow').fadeIn('slow');

4. Mise à jour du DOM

Injecter du HTML dans le DOM s’avère coûteux en ressources, surtout dans une boucle. Il est préférable de mettre le contenu à ajouter dans une variable et de l’ajouter une fois la boucle terminée.

var tableau = [...]; // des données

for (var i in tableau) {
    $('#liste').append('<li>' + tableau[i] + '</li>'); // pas bon
}

/******************************************************/
var tableau = [...]; // des données
var puces = '';

for (var i in tableau) {
    puces += '<li>' + tableau[i] + '</li>'; // bon
}
$('#liste').append(puces);

5. Séparer le HTML et le JS

Il n’est pas très propre de trouver du code JS dans des éléments HTML. C’est pourquoi on essaye de le séparer un maximum. C’est plus pour une question d’organisation que de performance.

<!-- pas bon -->
<a href="#" id="lien" onclick="maFonction();return false;">lien<a>

On fera à la place :

<!-- bon -->
<a href="#" id="lien">lien<a>
$('#lien').on('click', function() {
    // code
    return false;
});

// Ou

$('#lien').on('click', function(e) {
    e.preventDefault();
    // code
});

Vous aimerez aussi...