jQuery a fost odată una dintre cele mai populare biblioteci JS disponibile. A rezolvat o mulțime de probleme, cum ar fi efectuarea manipulării DOM și apelurile Ajax standard în toate browserele diferite, care toate gestionau JavaScript ușor diferit.

O mulțime de funcții de ultimă oră ale jQuery au transformat-o în JavaScript vanilat, deci nu este nevoie să încărcați o bibliotecă întreagă doar pentru câteva funcționalități. Având în vedere acest lucru, nu este neobișnuit că una dintre sarcinile tale la locul de muncă va fi rescrierea jQuery în JavaScript vanilat.

Cum se rescrie jQuery în vanilie JS

Imaginați-vă că aveți următorul cod:

<div class="m1 menu">
    <div id="menu-center">
        <ul>
            <li><a class="active" href="https://www.freecodecamp.org/news/how-to-translate-jquery-code-into-vanilla-js/#home">Home</a>

            </li>
            <li><a href="#portfolio">Portfolio</a>

            </li>
            <li><a href="#about">About</a>

            </li>
            <li><a href="#contact">Contact</a>

            </li>
        </ul>
    </div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>
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 && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

Când derulați pagina în jos, bara de navigație trebuie să schimbe culorile pe măsură ce ajungeți la diferite secțiuni:

Cum se traduce codul jQuery in vanilie JS

Funcția care gestionează acest lucru este 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 && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

A traduce onScroll în vanilie JS, aveți câteva opțiuni.

Opțiunea # 1: utilizați un compilator online

Puteți utiliza un instrument online precum Google Compilator de închidere pentru a comprima codul și a elimina orice jQuery inutil.

Problema este că rămâne în esență codul jQuery, deci browserul ar trebui să încarce biblioteca.

Opțiunea # 2: Traduceți manual codul

Cea mai bună opțiune este să verificați resurse precum Nu aveți nevoie de jQuery și S-ar putea să nu aveți nevoie de jQuery înainte de a rescrie codul jQuery. Veți putea găsi versiunile native JS ale celor mai populare metode jQuery, dintre care unele le puteți utiliza în propriul cod.

Iată onScroll funcție în vanilie 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 && (refElement.offsetTop + refElement.offsetHeight > scrollPos)) {
      //document.querySelector('#menu-center ul li a').classList.remove('active');
      currLink.classList.add('active');
    } else {
      currLink.classList.remove('active');
    }
  });
}

document.addEventListener('scroll', onScroll);