Apprendre jQuery : astuces pour mieux développer

jQuery est un framework bien utile et dont il est de plus en plus difficile de se séparer dans le cadre de nos différents projets. Rapidité de mise en place, taille de la communauté, facilité de développement, les avantages sont nombreux. Certaines astuces ou méthodes de travail sont tout de même à connaître afin d’améliorer les performances de vos scripts. J’utilise la version 1.7.2 dans ces exemples. Certaines beaucoup plus anciennes versions n’offrent pas toutes les fonctionnalités présentées ici.

Rappel : plus vos scripts sont lourds et plus ils consomment de la mémoire. Plus ils consomment de la mémoire et plus ils s’exécutent lentement. Or un site lent peut non seulement être contre productif pour vos visiteurs mais également néfaste à votre référencement naturel.

Si vous cherchez à optimiser vos scripts, je pars du principe que vous avez déjà acquis les bases du développement avec jQuery (classe, id, pseudo-classe, et fonctions de base). Je ne vais donc pas revenir dessus.

1/ Eviter les conflits avec les autres frameworks JavaScript

Vous avez surement déjà été confronté à un projet qui utilisait différentes librairies JavaScript différentes (Mootools, Prorotype…). Le signe $ est utilisé par certaines d’entre elles et c’est pourquoi j’utilise dans la plupart de mes développement une fonction anonyme qui s’appelle elle-même (elle s’auto-exécute). Elle est placée juste avant la balise fermante body car je n’utilise pas de document.ready. Dans allons donc importer jQuery comme une variable locale pour éviter tous les conflits.

Avant :

<script type="text/javascript">
    $(document).ready(function () {
        // code 
    });
</script>

Maintenant :

    <script type="text/javascript">
        (function($) {        
            // code
        })(jQuery);
    </script>
</body>

2/ Mise en cache des sélecteurs

Le principe de la mise en cache des sélecteurs et simplement de stocker des objets dans une variable afin de les utiliser plus tard. Par exemple, si vous êtes ammené à manipuler plusieurs fois vos éléments. Cela permet d’améliorer la vitesse d’exécution de vos scripts et évite de recréer une collection d’objets déjà existante.

Avant :

<script type="text/javascript">
    (function ($) {
        if ($('#unInput').val() == "") {
            $('#unInput').addClass('vide');
            $('#unInput').css('border', '1px solid red');
            $('#output').html("C'est vide !");
        }
    })(jQuery);
</script>

Maintenant :

<script type="text/javascript">
    (function ($) {
        var $monInput = $('#unInput');
        var $monDiv = $('#output');
        if ($('#unInput').val() == "") {
            $monInput.addClass('vide');
            $monInput.css('border', '1px solid red');
            $monDiv.html("C'est vide !");
        }
    })(jQuery);
</script>

Aller plus loin :

Je créé un objet qui sauvegarde les éléments dont je vais avoir besoin dans mon script :

<script type="text/javascript">
    (function ($) {
        var $monDom = {monInput: $('#unInput'), monDiv: $('#output')}
        if ($('#unInput').val() == "") {
            $monDom.monInput.addClass('vide');
            $monDom.monInput.css('border', '1px solid red');
            $monDom.monDiv.html("C'est vide !");
        }
    })(jQuery);
</script>

3/ Capture d’évènements

jQuery permet de capturer des évènements tels que Click, Submit, Mouseenter, Mouseleave… Je ne vous apprends rien. Chacune de ces fonctions est en fait un raccourci vers une autre fonction. Le fait d’utiliser de multiples fois ces fonctions plutôt que celle présentée ci-dessous a pour conséquence de ralentir vos scripts (test). Nous sommes d’accords, il en faut un certain nombre pour que cela se ressente.

Avant :

<script type="text/javascript">
    (function ($) {
        $('#unInput').click(function (e) {
            // code 
        });
    })(jQuery);
</script>

Maintenant :

<script type="text/javascript">
    (function ($) {
        $('#unInput').on('click', function (e) {
            // code
        });
    })(jQuery);
</script>

4/ Enchaîner les fonctions

Presque toutes les méthodes jQuery retournent un objet et permettent donc de s’enchaîner. Après avoir lancé une méthode sur votre sélecteur, vous pouvez directement enchaîner avec les méthodes suivantes. Du coup, il y a moins de code à écrire et le script s’exécute plus rapidement.

Avant :

<script type="text/javascript">
    (function ($) {
        var $monInput = $('#unInput');
        if ($('#unInput').val() == "") {
            $monInput.addClass('vide');
            $monInput.css('border', '1px solid red');
        }
    })(jQuery);
</script>

Maintenant :

<script type="text/javascript">
    (function ($) {
        var $monInput = $('#unInput');
        if ($('#unInput').val() == "") {
            $monInput.addClass('vide').css('border', '1px solid red');
        }
    })(jQuery);
</script>

5/ Appel de méthode de façon conditionnelle

Les méthodes ne sont que des fonctions appliquées à des objets. Vous n’avez pas besoin de les appeler de façon habituelle (à la chaîne) si vous souhaitez les appeler suivant une condition. Le code sera plus parlant.

Avant :

<script type="text/javascript">
    (function ($) {
        var $monInput = $('#unInput');
        if ($monInput.is(':visible')) {
            $monInput.hide();
        } else {
            $monInput.show();
        }
    })(jQuery);
</script>

Maintenant :

<script type="text/javascript">
    (function ($) {
        var $monInput = $('#unInput');
        $monInput[$monInput.is(':visible') ? 'hide' : 'show']();
    })(jQuery);
</script>

6/ Supprimer une classe

Si vous recherchez une classe spécifique à supprimer sur certains éléments, il est toujours plus rapide de sélectionner la classe en question plutôt que de sélectionner tous les éléments du même niveau. Cela permet de ne pas passer par tous les éléments que vous n’avez de toute façon pas besoin.

Avant :

<script type="text/javascript">
    (function ($) {
        $('#container input').removeClass('test');
    })(jQuery);
</script>

Maintenant :

<script type="text/javascript">
    (function ($) {
        $('#container input.test').removeClass('test');
    })(jQuery);
</script>

7/ Trouver un élément parent

Pour trouver un élément, vous avez plusieurs fonction : parent() et parents(). Mais le code peut vite devenir un fouillis. Le code que j’utilise remonte non seulement plusieurs niveaux du DOM (les éléments de la page), il est également bien plus efficace car il s’arrête dès qu’il a trouvé l’élément recherché.

Avant :

<script type="text/javascript">
    (function ($) {
        $('#unInput').parents('#papa').html('Tu es mon père.');
    })(jQuery);
</script>

Maintenant :

<script type="text/javascript">
    (function ($) {
        $('#unInput').closest('#papa').html('Tu es mon père.');
    })(jQuery);
</script>

8/ Déléguer l’appel de méthode

Un Event Listener est une méthode qui capture un évènement sur un élément sur votre page. Nous pouvons optimiser cette façon de faire en plaçant l’Event Listener sur le parent plutôt que sur chaque élément contenu dans ce dernier. Cela permet d’alléger considérablement les performances du script, surtout si la page est complexe.

Avant :

<script type="text/javascript">
    (function ($) {
        $('#container input').on('click', function (e) {
            // code
        });
    })(jQuery);
</script>

Maintenant :

<script type="text/javascript">
    (function ($) {
        $('#container').delegate('input', 'click', function (e) {
            // code
        });
    })(jQuery);
</script>

9/ Requête en AJAX

Tu connais probablement $.get(), $.post() ou $.getJSON() et tu les utilises ? Tu as tout faux. Ces fonctions sont une fois de plus des raccourcis vers la fonction principale qui n’est autre que $.ajax(). GET est utilisé par défaut mais vous pouvez spécifier une requête en POST en modifiant les paramètres (je l’ai quand même précisé ici).

Avant :

<script type="text/javascript">
    (function ($) {
        $.get('page.php', function (data) {
            // success
        });
    })(jQuery);
</script>

Maintenant :

<script type="text/javascript">
    (function ($) {
        $.ajax({
            url: 'page.php', type: 'GET', success: function (data) {
                // success
            }
        });
    })(jQuery);
</script>

10/ Condition sur une classe

La fonction is() permet de vérifier sur un élément x répond aux arguments spécifiés. Cela permet de savoir si une checkbox est cochée, si un menu déroulant est sélectionné et plus particulièrement pour vérifier la classe d’un élément. Pour cette dernière tâche, la fonction hasClass(), est beaucoup plus rapide mais elle ne permet que de récupérer la classe d’un élément.

Avant :

<script type="text/javascript">
    (function ($) {
        if ($('#unInput').is('.test')) {
            // code
        }
    })(jQuery);
</script>

Maintenant :

<script type="text/javascript">
    (function ($) {
        if ($('#unInput').hasClass('test')) {
            // code 
        }
    })(jQuery);
</script>

11/ Trouver des éléments enfants

La méthode la plus courante lorsqu’on recherche un ensemble d’éléments contenu dans un autre est d’utiliser la méthode #parent enfant. Elle permet de rechercher les enfants quelque soit leur proximité avec le parent (un ou plusieurs niveaux). Il existe également la fonction children() mais ces 2 méthodes sont plus lentes que celle que j’utilise. Un petit test ici peut vous le montrer. Privilégier donc la fonction find().

Avant :

<script type="text/javascript">
    (function ($) {
        $('#container .arraySpan').addClass('lent');
    })(jQuery);
</script>

Maintenant :

<script type="text/javascript">
    (function ($) {
        $('#container').find('.arraySpan').addClass('rapide');
    })(jQuery);
</script>

PreventDefault

Pour empêcher l’action par défaut d’un élément (un lien ou un bouton par exemple) : preventDefault()

<div id="container">
    <a href="https://www.lije-creative.com" id="lien" target="_blank">Click moi !</a>
</div>
<script type="text/javascript">
    (function ($) {
        $('#container').find('#lien').on('click', function (e) {
            e.preventDefault();
            alert('Action par défaut bloquée');
        });
    })(jQuery);
</script>

Trigger

Pour simuler un évènement sur un élément, vous pouvez utiliser la fonction trigger(). J’ai illustré cet exemple en modifiant le paramètre de ma fonction click() lorsque celle-ci est simulé par la fonction trigger() :

<input type="text" id="unInput" class="test" value="" />
<script type="text/javascript">
    (function ($) {
        $('#unInput').on('click', function (e, param) {
            param = param || "réél";
            alert('Click ' + param);
        });
        $('#unInput').trigger('click', ['simulé']);
    })(jQuery);
</script>

FadeToggle / SlideToggle

Certaines fonctions ont 2 états. Par exemple, fadeIn() et fadeOut() ou encore slideUp() ou slideDown(). Lorsque vous avez besoin d’utiliser les deux, des raccourcis vous permettent même de ne pas vous occuper des conditions (if visible, cache le ou if caché, affiche le) avec :

<input type="text" id="unInput" class="test" value="" />
<button id="boutton">Action</button>
<script type="text/javascript">
    (function ($) {
        $('#boutton').on('click', function (e) {
            $('#unInput').fadeToggle();
            // $('#unInput').slideToggle();
        });
    })(jQuery);
</script>

Animate

La fonction animate() est surpuissante. Elle permet d’appliquer tous les effets que vous souhaitez sur un élément. Fonction de callback, paramètres automatique, vitesse d’exécution, tout peut être géré. Mon exemple est relativement simple :

<input type="text" id="unInput" class="test" value="" />
<button id="boutton">Action</button>
<script type="text/javascript">
    (function ($) {
        $('#boutton').on('click', function () {
            $('#unInput').animate({opacity: 'toggle', height: 'toggle'}, 1000, 'swing', function () {
                console.log('action terminée');
            });
        });
    })(jQuery);
</script>

CSS

J’utilise assez souvent la fonction css(). Vous la connaissez surement, elle permet de modifier les propriétés CSS d’un élément défini. Plutôt que de chaîner les méthodes ou de les répéter les unes en dessous des autres, vous pouvez passer tous les paramètres d’un coup :

<span id="unInput" class="test">Astuces Jquery</span>
<script type="text/javascript">
    (function ($) {
        $('#unInput').css({'font-size': '+=5', 'color': 'red', 'font-weight': 'bold', 'display': 'block', 'float': 'left'});
    })(jQuery);
</script>

Ressources intéressantes :

• Un ensemble de Code Snippets par CSS-Tricks.com

Vous connaissez une astuce qui n’est pas listée dans cet article ? N’hésitez pas à m’en faire part dans les commentaires, je l’ajouterai à la liste avec plaisir.