Sådan oversættes jQuery-kode til vanille JS

jQuery var engang et af de mest populære tilgængelige JS-biblioteker. Det løste mange problemer, som at lave DOM-manipulation og Ajax-opkald standard på tværs af alle de forskellige browsere, som alle håndterede JavaScript lidt forskelligt.

En masse af jQuerys engang banebrydende funktioner har gjort det til vanilje JavaScript, så der er ingen grund til at indlæse et helt bibliotek for blot nogle få funktioner. I betragtning af dette er det ikke ualmindeligt, at en af ​​dine opgaver på jobbet vil være at omskrive jQuery til vanilje JavaScript.

Sådan omskrives jQuery til vanille JS

Forestil dig, at du har følgende kode:


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

Når du ruller ned på siden, skal navlinjen ændre farver, når du kommer til forskellige sektioner:

Funktionen, der håndterer dette, er 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"); } }); }

For at oversætte onScrolltil vanille JS har du et par muligheder.

Mulighed nr. 1: Brug en online compiler

Du kan bruge et onlineværktøj som Googles Closure Compiler til at komprimere koden og fjerne enhver unødvendig jQuery.

Problemet er, at du stadig i det væsentlige sidder tilbage med jQuery-kode, så browseren stadig har brug for at indlæse biblioteket.

Mulighed nr. 2: Oversæt koden manuelt

Den bedste mulighed er at tjekke ressourcer som Du behøver ikke jQuery og du måske ikke brug for jQuery, før du omskriver din jQuery-kode. Du kan finde de oprindelige JS-versioner af de mest populære jQuery-metoder, hvoraf nogle kan bruges i din egen kode.

Her er onScrollfunktionen i vanille 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);