So übersetzen Sie jQuery-Code in Vanilla JS

jQuery war einst eine der beliebtesten verfügbaren JS-Bibliotheken. Es löste viele Probleme, wie die Standardisierung von DOM-Manipulationen und Ajax-Aufrufen in allen verschiedenen Browsern, die JavaScript leicht unterschiedlich handhabten.

Viele der einst hochmodernen Funktionen von jQuery haben es in Vanille-JavaScript geschafft, sodass für nur wenige Funktionen nicht die gesamte Bibliothek geladen werden muss. Vor diesem Hintergrund ist es nicht ungewöhnlich, dass eine Ihrer Aufgaben darin besteht, jQuery in Vanille-JavaScript umzuschreiben.

So schreiben Sie jQuery in Vanilla JS um

Stellen Sie sich vor, Sie haben den folgenden Code:

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

Wenn Sie auf der Seite nach unten scrollen, sollte die Navigationsleiste die Farben ändern, wenn Sie zu verschiedenen Abschnitten gelangen:

Die Funktion, die dies handhabt, ist 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"); } }); }

Um onScrollin Vanilla JS zu übersetzen , haben Sie einige Möglichkeiten.

Option 1: Verwenden Sie einen Online-Compiler

Sie können ein Online-Tool wie den Closure Compiler von Google verwenden, um den Code zu komprimieren und unnötige jQuery zu entfernen.

Das Problem ist, dass Sie im Wesentlichen immer noch jQuery-Code haben, sodass der Browser die Bibliothek weiterhin laden muss.

Option 2: Übersetzen Sie den Code manuell

Am besten überprüfen Sie Ressourcen wie "Sie brauchen jQuery nicht" und "Sie brauchen jQuery möglicherweise nicht", bevor Sie Ihren jQuery-Code neu schreiben. Sie können die nativen JS-Versionen der beliebtesten jQuery-Methoden finden, von denen einige in Ihrem eigenen Code verwendet werden können.

Hier ist die onScrollFunktion in Vanilla 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);