La force de la méthode forEach()

Pour boucler dans un lot d'éléments DOM, rien de mieux que d'utiliser .forEach(), et ainsi de remplacer la méthode jQuery .each().

Ainsi, ce code utilisant jQuery :

$('.bloc-extra').each(function (idx, elem) {
 ...
});

...peut être remplacé par ceci en JS natif :

document.querySelectorAll('.bloc-extra').forEach(elem => {
 ...
});

On remarquera ici que la function() dans le code jQuery utilise deux arguments et qu'à l'usage, le premier argument idx n'est pas utile la plupart du temps. Ce fut donc une bonne idée d'inverser l'ordre des arguments pour forEach().

Voir NodeList.prototype.forEach() sur MDN

Ceci dit, forEach(), accompagné de addEventListener(), sert à remplacer d'autres méthodes jQuery.

// Code jQuery
$(".select_genre").change(e => {
});

// Code natif
document.querySelectorAll('.select_genre').forEach(el => el.addEventListener('change', e => {
}));

Oui, le code natif est plus long à écrire, mais il a l'avantage d'être clair pour le réviseur : il indique qu'on s'adresse à plusieurs éléments. Le code jQuery ne précise pas ça.

J'ai donné en exemple l'événement change, mais ça s'applique à tous les événements.

"var" n'est pas obsolète, mais c'est tout comme

En JavaScript, le mot-clé var était un mal nécessaire, avant 2015. C'était le seul mot-clé à utiliser pour restreindre la portée des variables. La norme ES2015 (ou ES6) a introduit par la suite const et let, qui sont aujourd'hui beaucoup plus logiques, tellement que cela rend var quasiment inutile.

Lire la suite

Le JavaScript doit rester du JavaScript

Le titre est peut-être vague. Je vais essayer de phraser ça autrement : Le JavaScript ne devrait jamais contenir d'éléments d'autres langages. Dans le cas contraire, cela devient difficile pour tout validateur de ce monde (jsLint, par exemple) de faire son travail. Et ça permet de gagner en robustesse et en fiabilité.

Lire la suite

Remplacer slideDown() et slideUp() dans jQuery

Ce n'est pas facile de trouver une solution aisée à remplacer les méthodes $.slideDown() et $.slideUp(), qui servent essentiellement à plier et déplier des boîtes verticalement. Heureusement, Javascript a assez évolué pour pouvoir programmer une alternative assez succincte.

Lire la suite

Éviter le mot-clé « this »

Le mot-clé this1 est un raccourci parfois utile lorsqu'on écrit du nouveau code JavaScript. Ce mot-clé a cependant la particularité de se comporter différemment du this en C, C++ ou Java. Il se comporte même différemment selon la version JavaScript ou même si on est en mode strict ou pas. C'est  […]

Lire la suite

jQuery doit mourir

Ok, le titre est un peu exagéré. Mais jQuery est devenu somme toute une tare dans la programmation JavaScript. Aujourd'hui, utiliser jQuery retarde l'apprentissage du JavaScript. jQuery demande le chargement d'une bibliothèque de plus de 200 kibioctets, ce qui peut paraître léger pour un ordinateur  […]

Lire la suite

La beauté de la combinaison de addEventListener() et closest()

Pour remplacer la méthode jQuery.on(), ou son ancêtre jQuery.live(), qui permettent d'attacher un événement virtuellement à des éléments qui n'existent pas encore au moment de l'appel, ces deux méthodes sont très utiles. EventTarget.addEventListener() existe depuis longtemps. En fait, c'est Internet  […]

Lire la suite

Javacript - La suppression des événements avec removeEventListener() au lieu de $.off()

L'affaire qui se passe, c'est que $(el).on() ne fait pas seulement la même chose que el.addEventListener(). $(el).on() enregistre aussi l'événement dans une liste d'événements d'un certain type (ex:'click') pour que si jamais on fasse $.off() sur le même type d'événement, ça puisse les effacer. Une  […]

Lire la suite

La "sérialisation" des formulaires

C'est tellement facile avec jQuery, et jadis autrement plus compliqué en JS vanille. Heureusement, ça s'est (un peu) amélioré dans les dernières années, avec la venue de deux nouveaux types d'objets : FormData et URLSearchParams. Normalement les deux expressions suivantes devraient donner le même  […]

Lire la suite

Pourquoi ce blogue

Je suis programmeur informatique depuis 1995. Développeur web depuis 2005. J'ai passé par plusieurs langages: Foxpro, Assembleur, Clipper, VisualBasic, ASP... et depuis maintenant 15 ans LAMP (Linux-Apache-MySQL-PHP). Et le javascript s'est insidieusement imposé dans mon bagage de connaissances - tu  […]

Lire la suite

Haut de page