Kuidas tõlkida jQuery kood Vanilla JS-i

jQuery oli kunagi üks populaarsemaid JS-i raamatukogusid. See lahendas palju probleeme, näiteks muutis DOM-i manipuleerimine ja Ajaxi kõned standardseks kõigis erinevates brauserites, mis kõik käsitsesid JavaScripti veidi erinevalt.

Paljud jQuery kunagised tipptasemel funktsioonid on muutnud selle vanilje JavaScripti, nii et pole vaja kogu raamatukogu laadida vaid mõne funktsiooni jaoks. Seda arvesse võttes pole haruldane, et teie tööülesannete hulka kuulub jQuery vanill JavaScripti kirjutamine.

Kuidas jQuery vanilli JS-i kirjutada

Kujutage ette, et teil on järgmine kood:


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

Lehte alla kerides peaks navigeerimisriba erinevatesse jaotistesse jõudmisel värve muutma:

Funktsioon, mis sellega tegeleb, on 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"); } }); }

onScrollVanilli JS-i tõlkimiseks on teil mõned võimalused.

1. võimalus: kasutage veebikompilaatorit

Koodi tihendamiseks ja ebavajaliku jQuery eemaldamiseks võite kasutada veebipõhist tööriista nagu Google'i sulgemiskompilaator.

Probleem on selles, et sisuliselt on ikkagi jQuery kood alles, nii et brauser peaks ikkagi teegi laadima.

Valik nr 2: koodi käsitsi tõlkimine

Parim variant on enne jQuery koodi ümberkirjutamist tutvuda ressurssidega, nagu te ei vaja jQuery ja te ei pruugi seda vajada. Leiate kõige populaarsemate jQuery-meetodite JS-i natiivversioonid, millest mõnda saate kasutada oma koodis.

onScrollVanilli JS- i funktsioon on järgmine:

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