Hoe jQuery-code te vertalen naar Vanilla JS

Programmeren

jQuery was ooit een van de meest populaire beschikbare JS-bibliotheken. Het loste veel problemen op, zoals het maken van DOM-manipulatie en Ajax-oproepen standaard in alle verschillende browsers, die JavaScript allemaal iets anders behandelden.

Veel van de ooit geavanceerde functies van jQuery hebben het in vanille JavaScript omgezet, dus het is niet nodig om een ​​hele bibliotheek te laden voor slechts een paar functionaliteiten. Gezien dit is het niet ongebruikelijk dat een van uw taken tijdens het werk het herschrijven van jQuery in vanille JavaScript is.

Hoe jQuery te herschrijven in vanilla JS

Stel je voor dat je de volgende code hebt:


    
    
     
  • 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"); } }); }

Wanneer u naar beneden scrolt op de pagina, zou de navigatiebalk van kleur moeten veranderen als u naar verschillende secties gaat:

De functie die dit afhandelt is 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"); } }); }

Om te vertalen onScrollnaar vanille JS, heb je een paar opties.

Optie 1: gebruik een online compiler

U kunt een online tool zoals Google's Closure Compiler gebruiken om de code te comprimeren en onnodige jQuery te verwijderen.

Het probleem is dat je in wezen nog steeds jQuery-code overhoudt, dus de browser moet de bibliotheek nog steeds laden.

Optie 2: vertaal de code handmatig

De beste optie is om bronnen zoals You Don't Need jQuery en You Might Not Need jQuery te bekijken voordat u uw jQuery-code herschrijft. U zult de native JS-versies van de meest populaire jQuery-methoden kunnen vinden, waarvan u sommige in uw eigen code kunt gebruiken.

Hier is de onScrollfunctie in 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);