Remplacer JQuery par du simple JavaScript. Comment et pourquoi !
Apprenons comment arrêter d'utiliser les librairies JavaScript comme JQuery ou Lodash et remplacer leurs fonctionnalités par du JavaScript pur. Cela permettra d'alléger votre code source tout en perfectionnant votre connaissance du vanilla JS.
Il est bénéfique pour votre carrière de développeur web d’être capable d’utiliser le HTML, le CSS et le JavaScript en version vanilla, c'est-à-dire sans framework ou surcouche.
En apprenant à programmer de la sorte, cela vous permet d’appliquer votre maitrise du langage pur à tous les outils et frameworks. Par exemple, si vous maitrisez le JavaScript de base, il vous sera plus simple d’appréhender toutes évolutions de React, Vue ou Angular. Vous remarquerez que bien souvent, en agissant de la sorte, vous pourrez vous passer totalement de ces librairies dans de nombreux cas.
Pourquoi arrêter d'utiliser JQuery ?
Depuis la nouvelle norme ECMAScript 2015 (ES6), la majorité des fonctionnalités de JQuery sont désormais supportées par les navigateurs récents. En ne passant plus par une librairie tierce, vous renforcez l’efficacité de votre code et améliorez votre score Google PageSpeed Insights.
Wordpress effectue également doucement la transition vers JQuery avec son nouvel éditeur Gutenberg, tandis que Bootstrap a totalement arrêté l'emploi de JQuery depuis sa version 5.
Comment remplacer JQuery par du JS ?
Voyons ensemble toute une série d'alternatives à de nombreuses fonctionnalités que vous réalisez jusqu’à présent probablement en JQuery ou AlpineJS.
Sélectionner des éléments en JS
Le succès de JQuery, encore à ce jour, passe par la simplicité de sélectionner des éléments du DOM. Nous avons tous pris l’habitude d’utiliser le signe dollar et de cibler ensuite un élément via une classe ou un ID. Depuis IE9 vous pouvez facilement récupérer une liste de nœuds du DOM qui correspond à un sélecteur à l’aide de querySelectorAll. Tout comme dans JQuery, le sélecteur peut être un élément en HTML, un ID ou une classe.
/* JQuery */
$('p');
$('.classe');
$('#id');
/* Vanilla JS */
document.querySelectorAll('p');
document.querySelectorAll('.classe');
document.querySelectorAll('#id');Pour manipuler les éléments trouvés, contrairement à JQuery, vous devez faire une boucle sur chaque élément à l’aide d’un forEach. La méthode la plus simple pour cela est d’utiliser la fonction native à JavaScript nommée Array.forEach().
/* JQuery */
$('p').css('color', 'red');
/* Vanilla JS */
const items = document.querySelectorAll('p');
array.forEach(function(item, i){
item.style.color = 'red';
});Il est aussi possible de retourner seulement la première occurrence trouvée dans le DOM en utilisant querySelector.
/* JQuery */
$('p').css('color', 'red');
/* Vanilla JS */
// Retourne tous les éléments trouvés
const items = document.querySelectorAll('p');
array.forEach(function(item, i){
item.style.color = 'red';
});
// Retourne uniquement le premier résultat
const item = document.querySelector('p');
item.style.color = 'red';Ajouter une classe à un élément
Maintenant que vous savez nativement sélectionner des éléments, il est classique de leur ajouter une classe CSS. Dans JQuery, vous utilisiez la fonction addClass, en JS, vous pouvez accéder à la liste des classes via la propriété classList d’un élément du DOM. Vous avez ensuite accès aux méthodes add et remove pour ajouter ou supprimer une classe de la liste. Il existe même la méthode “toggle” qui enlèvera une classe si elle existe et l’ajoutera si elle n’existe pas.
/* JQuery */
$('p').addClass('nomDeLaClasse');
/* Vanilla JS */
const item = document.querySelector('p');
item.classList.add('nomDeLaClasse')
item.classList.remove('nomDeLaClasse')
item.classList.toggle('nomDeLaClasse')Réagir aux événements en JavaScript
En JQuery, les fonctions click() et .on('click', ...) permettent de lier une fonction à l'événement de clic. Cela fonctionne de la même manière en JavaScript pur grâce à la méthode addEventListener.
/* JQuery */
$('#button').click(function() {});
/* Vanilla JS */
const button = document.querySelector('#button');
button.addEventListener('click', function() {
// ...
}, false);Attention au bon ordre !
Il faut absolument que notre code JavaScript soit positionné en fin de page de sorte que l’élément du DOM existe au moment de son exécution.
Attendre le chargement de la page
Pour attendre le chargement complet de la page avant de commencer à exécuter le code JavaScript, comme vous le faisiez avec jQuery et la méthode .ready(), vous pouvez ajouter un .ready() sur le document global de la page et écouter l’événement nommé DOMContentLoaded.
/* JQuery */
$(document).ready(function() {});
/* Vanilla JS */
document.addEventListener('DOMContentLoaded', function() {
// ...
});Editer le style d’un élément en JS
Il est possible de modifier directement le style d'un élément du DOM en JavaScript. Remplaçons la méthode hide() de jQuery par son équivalent en Vanilla JavaScript en accédant à la propriété style de l’élément et en mettant la valeur pour style sur style.
/* JQuery */
$('#element').hide();
/* Vanilla JS */
const item = document.querySelector('#element');
item.style.display = 'none';Ajouter un élément après un autre
Pour ajouter des éléments avant ou après un élément du DOM, remplacez les méthodes after() et before() de jQuery par la méthode insertAdjacentElement avec le paramètre afterend ou beforebegin.
Tant que nous parlons de la manipulation du DOM, il existe également la méthode appendChild pour remplacer le append() de JQuery.
/* JQuery */
$('#element').after("<p>Hello World</p>");
$('#element').before("<p>Hello World</p>");
/* Vanilla JS */
const item = document.querySelector('#element');
item.insertAdjacentElement('afterend', "<p>Hello World</p>");
item.insertAdjacentElement('beforebegin', "<p>Hello World</p>");Accéder au texte et au HTML
Pour éditer ou accéder au texte ou au HTML d’un élément du DOM en JavaScript, vous pouvez utiliser la propriété textContent et innerHTML en . Cette propriété vous permet à la fois de récupérer la valeur ou d’en assigner une nouvelle valeur.
/* JQuery */
$('p').html();
$('p').html('<span>Lorem ipsum</span>')
$('p').text();
$('p').text('Lorem ipsum');
/* Vanilla JS */
const item = document.querySelector('#element');
item.innerHTML;
item.innerHTML = "<span>Lorem ipsum</span>";
item.textContent;
item.textContent = "Lorem ipsum";Voilà qui clôture nos exemples. Le but de cet article n'est pas de fournir une liste exhaustive des méthodes existantes ni même d'être un cours complet sur le JavaScript. J’espère toutefois qu'il vous a permis de vous rendre compte qu’il est possible de se passer complètement de librairies qui étaient jusqu’ici indispensables.
D’ailleurs si vous souhaitez vous assurer qu’une méthode en JavaScript est bien compatible avec les navigateurs, je vous invite à regarder cette formation vidéo et être certain de ne pas vous tromper dans la lecture des résultats de compatibilité.
