Як перевести код 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.

Варіант No1: Використовуйте онлайн-компілятор

Ви можете використовувати Інтернет-інструмент, такий як компілятор закриття 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);