Coder sans jQuery : Remplacer $(function)

Publié le jeudi 8 avril 2021

Article sur comment coder sans jquery dollar function

Introduction

On ne présente plus jQuery, la librairie de développement web probablement la plus utilisée à l’heure actuelle. Elle est livrée en standard sur les sites WordPress (ces derniers représentent plus de 40% des sites internet), Drupal et Joomla (pour ne citer qu’eux). Dotée de nombreux plugins et existant depuis longtemps, elle est également appréciée des développeurs – notamment ceux qui ont vu l’avènement du web depuis ses débuts. Certains considèrent même qu’il s’agit d’un langage à part entière (« Tu codes en quoi ? Moi en jQuery »).

Note : comme la plupart des codes sources proposés sur le blog, le code présent dans cet article est compatible avec Internet Explorer à partir de la version 11.

Pourquoi coder sans jQuery

L’utilisation massive de cette librairie est remise en question dans les applications web modernes (basées sur des frameworks tel que React, Vue ou autre), mais également au sein des sites plus classiques. Parmi les raisons, on trouve la taille (90kb pour la version 3.6 minifiée, 30kb après compression gzip), le support d’anciennes versions de navigateurs désormais inutilisées (les versions 6 à 10 de Internet Explorer, vous connaissez ?) et un certain « encroutement » des développeurs, qui s’enferment dans un écosystème et ignorent les possibilités du javascript moderne (on parle du VanillaJS, le javascript sans librairie additionnelle).

Choisir s’il faut utiliser jQuery dans un projet demande une réflexion qui mérite un article à elle-seule. Pour ma part, ce qui me motive à quitter (ou au moins à réduire l’utilisation) de cette librairie c’est l’optimisation qui s’ensuit :

Décharger jQuery fait gagner en temps et quantité de données transférées (comme dit plus haut, 30kb sur un serveur configuré avec compression gzip, 90kb sinon – ou plus, si la version utilisée n’est pas minifiée)
Décharger les plugins associés fait aussi gagner du temps, soit en les remplaçant par des librairies vanilla plus légères (pas mal), soit par notre propre code javascript (mieux)

Je vais donc, au cours de prochains articles, expliquer comment remplacer certaines fonctionnalités fournies par la librairie avec notre propre code javascript.

Le code de base utilisant jQuery

La première chose que l’on apprend quand on utilise jQuery, c’est d’entourer notre code par un appel à la fonction jQuery, dont le diminutif est $. Basiquement, cela donne quelque chose comme $(function(){ ... }).

Selon l’humeur et le sens de l’humour de l’enseignant, on apprend que cela évite de causer des catastrophes naturelles, de noyer des chatons ou d’exécuter son code tant que l’ensemble du document qui forme la page n’a pas été construit.
En général, le cours ou le tutoriel se termine par un bout de code plus complet du type :

(function($){

  "use strict";

  $(function(){
    // Votre code ici
  });

})(window.jQuery)

Optimisation et remplacement de jQuery

Ce que fait $(function)

Pour comprendre de ce que fait cet appel, il faut avoir une idée générale de ce qu’il se passe au chargement d’une page dans le navigateur. Sans entrer dans les détails, le processus est le suivant :

Le code source de la page est lu et traité au fur et à mesure de haut en bas : le navigateur n’a aucune idée de ce qu’il y a plus bas alors qu’il traite les lignes plus haut.
Le chargement des ressources (notamment des scripts) a lieu lui aussi au fur et à mesure de haut en bas. Cela veut dire qu’un script peut être chargé et lancé bien avant que tous les éléments de la page ne soient présents (s’il est dans la partie <head> de la page par exemple).
Lorsque la fin du code source a été atteinte, un évènement DOMContentLoaded est émis au niveau du document. A cet instant, l’ensemble des éléments présents dans le code HTML de la page existe. Certains contenus ne sont peut être pas encore chargés, les images, les iframes et les scripts asynchrones par exemple.
Lorsque toutes les ressources ont finalement été chargées (selon leur taille et la qualité de la connexion du visiteur il peut se passer plusieurs secondes) un évènement load est émis au niveau de la fenêtre.

Un appel à $(function) permet de n’exécuter une fonction que si l’évènement DOMContentLoaded a été émis, et d’attendre qu’il ait lieu si ce n’est pas le cas. Cela donne la certitude que l’ensemble des éléments du document existe au moment de l’exécution, sans avoir à attendre le chargement complet de toutes les ressources (images…).

Alternative sans jQuery

Remplacer l’appel à jQuery parait plutôt simple finalement, tout ce que nous avons à faire c’est de détecter si l’évènement DOMContentLoaded a déjà eu lieu, et exécuter notre fonction immédiatement si c’est le cas. Dans le cas contraire, on attend l’évènement avant d’exécuter la fonction.

Connaitre l’état du chargement du document se fait via la propriété readyState de ce dernier. Différentes valeurs sont possibles (loading si on est avant DOMContentLoaded, interactive si on est entre DOMContentLoaded et load, complete si on est après load).
Attendre un évènement se fait avec la méthode addEventListener()

On obtient le code ci-dessous :

(function(){

  "use strict";

  var onDom = function(){
    // Votre code ici
  };
  
  if(document.readyState != "loading")
    onDom();
  else
    document.addEventListener("DOMContentLoaded", onDom);  

})();

Conclusion

Damned, la version optimisée est plus longue que la version originale !
Enfin, plus longue, mais pas plus lourde, si on considère qu’il y a la librairie jQuery en moins à charger.

A bientôt pour un prochain article sur le remplacement des appels jQuery !
D’ici là, pensez à ne plus utiliser $(function) dans vos scripts, étant donné la facilité de le remplacer.

Références

Mozilla Developers – L’évènement DOMContentLoaded
Mozilla Developers – L’évènement load
Mozilla Developers – Fonction addEventListener()