Как да преведем jQuery кода във ванилия JS

jQuery някога е била една от най-популярните налични JS библиотеки. Той реши много проблеми, като например манипулиране на DOM и стандартни извиквания на Ajax във всички различни браузъри, които обработваха JavaScript малко по-различно.

Много от най-модерните функции на jQuery някога са превърнали във ванилов JavaScript, така че няма нужда да зареждате цяла библиотека само за няколко функционалности. Като се има предвид това, не е необичайно, че една от задачите ви в работата ще бъде да пренапишете jQuery във ванилов JavaScript.

Как да пренапиша jQuery във ванилия JS

Представете си, че имате следния код:

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

Когато превъртите надолу по страницата, лентата за навигация трябва да променя цветовете, докато стигате до различни раздели:

Функцията, която се справя с това, е 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"); } }); }

За да преведете onScrollвъв ванилия JS, имате няколко възможности.

Вариант # 1: Използвайте онлайн компилатор

Можете да използвате онлайн инструмент като компилатора на Google за затваряне, за да компресирате кода и да премахнете ненужните jQuery.

Проблемът е, че по същество все още ви остава jQuery код, така че браузърът все пак ще трябва да зареди библиотеката.

Вариант # 2: Преведете ръчно кода

Най-добрият вариант е да проверите ресурси като Не се нуждаете от jQuery и Може да не се нуждаете от jQuery, преди да пренапишете кода си за jQuery. Ще можете да намерите родните JS версии на най-популярните методи на jQuery, някои от които можете да използвате в собствения си код.

Ето onScrollфункцията във ванилия 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);