Kako prevesti jQuery kôd u vaniliju JS

jQuery je nekad bila jedna od najpopularnijih JS knjižnica koje su dostupne. Riješio je puno problema, poput izrade DOM manipulacije i Ajaxova poziva standardnim standardima u svim različitim preglednicima, koji su svi obrađivali JavaScript malo drugačije.

Mnogo jQuery-jevih nekoć vrhunskih značajki pretvorilo je u vanilin JavaScript, tako da nema potrebe učitavati cijelu knjižnicu za samo nekoliko funkcionalnosti. S obzirom na to, nije rijetkost da će jedan od vaših zadataka na poslu biti prepisivanje jQuery-a u vanilin JavaScript.

Kako prepisati jQuery u vanilin JS

Zamislite da imate sljedeći kod:

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

Kad se pomičete prema dolje, navigacijska traka trebala bi mijenjati boje dok dolazite do različitih odjeljaka:

Funkcija koja ovo rješava je 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"); } }); }

onScrollImate nekoliko mogućnosti za prijevod u JS vanilije.

Opcija br. 1: Upotrijebite mrežni kompajler

Za komprimiranje koda i uklanjanje nepotrebnog jQueryja možete upotrijebiti mrežni alat kao što je Googleov Clips Compiler.

Problem je u tome što vam još uvijek ostaje jQuery kôd, pa bi preglednik i dalje trebao učitati knjižnicu.

2. opcija: Ručno prevedite kod

Najbolja opcija je provjeriti resurse poput Ne trebate jQuery i Možda vam ne treba jQuery prije nego što prepišete svoj jQuery kôd. Moći ćete pronaći izvorne JS verzije najpopularnijih jQuery metoda, od kojih neke možete koristiti u vlastitom kodu.

Evo onScrollfunkcije u vanilije 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);