Avec l’amélioration des compatibilités entre navigateurs et l’abandon du support pour les anciennes versions ( notamment IE 7- ), les développeurs commencent à se débarrasser du code utilisant la très célèbre librairie javascript nommée jQuery. En effet il est maintenant important de prendre en considération son utilisation ou non pour nos projets à venir et non l’inclure dans les sources de notre projet parce que » c’est plus facile parce que nous connaissons la doc par cœur « . Javascript a bien évolué depuis quelques années et il est tout a fait possible de coder en Vanilla javascript. Ce qui signifie coder en JS sans utiliser de libraires / frameworks, donc uniquement avec les fonctionnalités javascript native implémenté par les navigateurs sans surcouche.
Récement lors d’un de mes dev j’ai eu a refactorer du code jQuery en code javascript pure pour des raisons de performance principalement. Je dois dire que j’adore utiliser
document.querySelectorAll('.mon-selecteur');
C’est très pratique et simple d’utilisation, cependant prenons un exemple concret ou nous devons écouter l’événement click sur un menu contenant plusieurs liens.
Structure html :
Donc nous avons une structure html basique avec un ul qui a la classe menu et trois li contenant chacun une balise a. Pour sélectionner les balises a de notre code nous utilisons donc querySelectorAll de cette facon
var liens = document.querySelectorAll('.menu a');
Ce qui nous retourne une NodeList, qui est une collection de noeuds html contenant nos trois balises a que nous enregistrons dans une variable liens. Si nous écrivons liens dans la console debugger de notre navigateur, il nous retourne un tableau d’éléménts.
[Lien 1, Lien 2, Lien 3]
Ajouter l’écouteur d’événement sur nos balises
Pour ceux qui connaissent jQuery et la version native des navigateur pour ajouter un écouteur d’événements sur un élément html, il savent que la méthode on en jQuery équivaut a addEventListener en javascript.
Donc que se passe-t-il si nous faisons
liens.addEventListener('click', function(){}, false);
Nous obtenons une erreur
TypeError: Object # has no method ‘addEventListener’
Donc notre objet NodeList n’a pas de méthode addEventListener, en effet nous ne pouvons pas ajouter un écouteur d’événement sur toutes nos balises a de notre NodeList en même temps.
Alors comment faire pour ajouter nos écouteurs ?
Pour cela nous allons devoir itérer sur notre NodeList et ajouter chacun des événements un part un dans une boucle. Nous pourrions le faire dans une boucle de for, personnellement j’aime bien utiliser forEach pour effectuer la manipulation de notre tableau de liens.
[].forEach.call(liens, function (el)
{
el.addEventListener('click', function(){}, false);
});
De plus forEach est assez performant comme on peut le voir sur ce test de performance.
Pour conclure on note que la syntaxe est légèrement plus lourde que celle de jQuery. Pour ma part après avoir réfactoré du code jQuery en code javascript pur sur plusieurs projet, je trouve que la quantité de code n’augmente pratiquement pas ou peu, idem pour la lisibilité.
