Comment traduire le code jQuery en Vanilla JS

jQuery était autrefois l'une des bibliothèques JS les plus populaires disponibles. Cela a résolu de nombreux problèmes, comme la manipulation du DOM et les appels Ajax standard sur tous les différents navigateurs, qui géraient tous JavaScript légèrement différemment.

De nombreuses fonctionnalités jQuery autrefois de pointe en ont fait du JavaScript vanilla, il n'est donc pas nécessaire de charger une bibliothèque entière pour quelques fonctionnalités. Compte tenu de cela, il n'est pas rare que l'une de vos tâches au travail soit de réécrire jQuery en JavaScript vanilla.

Comment réécrire jQuery en JS vanilla

Imaginez que vous ayez le code suivant:

  • Home
  • Portfolio
  • About
  • Contact
body, html { margin: 0; padding: 0; height: 100%; width: 100%; } .menu { width: 100%; height: 75px; background-color: rgba(0, 0, 0, 1); position: fixed; background-color:rgba(4, 180, 49, 0.6); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .light-menu { width: 100%; height: 75px; background-color: rgba(255, 255, 255, 1); position: fixed; background-color:rgba(4, 180, 49, 0.6); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #menu-center { width: 980px; height: 75px; margin: 0 auto; } #menu-center ul { margin: 15px 0 0 0; } #menu-center ul li { list-style: none; margin: 0 30px 0 0; display: inline; } .active { font-family:'Droid Sans', serif; font-size: 14px; color: #fff; text-decoration: none; line-height: 50px; } a { font-family:'Droid Sans', serif; font-size: 14px; color: black; text-decoration: none; line-height: 50px; } #home { background-color: grey; height: 100%; width: 100%; overflow: hidden; background-image: url(images/home-bg2.png); } #portfolio { background-image: url(images/portfolio-bg.png); height: 100%; width: 100%; } #about { background-color: blue; height: 100%; width: 100%; } #contact { background-color: red; height: 100%; width: 100%; }
$(document).ready(function () { $(document).on("scroll", onScroll); //smoothscroll $('a[href^="#"]').on('click', function (e) { e.preventDefault(); $(document).off("scroll"); $('a').each(function () { $(this).removeClass('active'); }) $(this).addClass('active'); var target = this.hash, menu = target; $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top+2 }, 500, 'swing', function () { window.location.hash = target; $(document).on("scroll", onScroll); }); }); }); function onScroll(event){ var scrollPos = $(document).scrollTop(); $('#menu-center a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top  scrollPos) { $('#menu-center ul li a').removeClass("active"); currLink.addClass("active"); } else{ currLink.removeClass("active"); } }); }

Lorsque vous faites défiler la page, la barre de navigation doit changer de couleur à mesure que vous accédez à différentes sections:

La fonction qui gère cela est onScroll:

function onScroll(event){ var scrollPos = $(document).scrollTop(); /* console.log(scrollPos); */ $('#menu-center a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top  scrollPos) { $('#menu-center ul li a').removeClass("active"); currLink.addClass("active"); } else{ currLink.removeClass("active"); } }); }

Pour traduire onScrollen vanilla JS, vous avez quelques options.

Option 1: utiliser un compilateur en ligne

Vous pouvez utiliser un outil en ligne tel que le compilateur de fermeture de Google pour compresser le code et supprimer toute jQuery inutile.

Le problème est qu'il vous reste essentiellement du code jQuery, le navigateur aurait donc toujours besoin de charger la bibliothèque.

Option n ° 2: traduire manuellement le code

La meilleure option est de consulter des ressources telles que You Don't Need jQuery et You Might Not Need jQuery avant de réécrire votre code jQuery. Vous pourrez trouver les versions JS natives des méthodes jQuery les plus populaires, dont certaines peuvent être utilisées dans votre propre code.

Voici la onScrollfonction dans vanilla JS:

function onScroll(event) { var sections = [...document.querySelectorAll('#menu-center a')]; var scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; sections.forEach(function(currLink) { var val = currLink.getAttribute('href'); var refElement = document.querySelector(val); if (refElement.offsetTop  scrollPos)) { //document.querySelector('#menu-center ul li a').classList.remove('active'); currLink.classList.add('active'); } else { currLink.classList.remove('active'); } }); } document.addEventListener('scroll', onScroll);