Hogyan lehet lefordítani a jQuery kódot Vanilla JS-be

A jQuery egykor az elérhető legnépszerűbb JS könyvtárak egyike volt. Sok problémát megoldott, mint például a DOM-manipuláció és az Ajax-hívások szabványosítása az összes böngészőben, amelyek valamennyire másként kezelték a JavaScript-et.

A jQuery egykor legmodernebb funkcióinak köszönhetően vanília JavaScript lett, így nincs szükség egy teljes könyvtár betöltésére csak néhány funkcióhoz. Ezt figyelembe véve nem ritka, hogy az egyik feladata a jQuery átírása vanília JavaScript-be.

Hogyan lehet átírni a jQuery-t vanília JS-be

Képzelje el, hogy a következő kóddal rendelkezik:

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

Amikor lefelé görget az oldalon, a navigációs sávnak változtatnia kell a színét, amikor a különböző szakaszokra jut:

Az ezt kezelő funkció 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"); } }); }

onScrollVanília JS-be történő lefordításához van néhány lehetőség.

1. lehetőség: Használjon online fordítót

Használhat egy online eszközt, például a Google Closure Compiler programját a kód tömörítésére és a felesleges jQuery eltávolítására.

A probléma az, hogy lényegében még mindig megmaradt a jQuery kód, ezért a böngészőnek továbbra is be kellene töltenie a könyvtárat.

2. lehetőség: A kód manuális fordítása

A legjobb megoldás az, hogy ellenőrizze az olyan erőforrásokat, mint a Nincs szükség a jQuery-re, és a Szükséges lehet, hogy a jQuery nem szükséges, mielőtt átírná a jQuery-kódot. Megtalálja a legnépszerűbb jQuery módszerek natív JS verzióit, amelyek közül néhányat a saját kódjában is felhasználhat.

Itt van a onScrollvanília JS funkciója:

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);