Metody jQuery w czystym JavaScript (Vanilla)

Ten artykuł to coś w rodzaju ściągi dla osób, które chciałyby przekształcić często wykorzystywane metody jQuery na czysty JavaScript. Użyta nazwa „Vanilla” to szeroko przyjęte ale nieoficjalne oznaczenie kodu JavaScript wolnego od wszelkich bibliotek i frameworków. Zamienienie często wykorzystywanych wyrażeń jQuery na prawdziwy JavaScript nie wymaga szczególnych umiejętności i może być dobrym wstępem do głębszego poznania tego języka, którego znajomość będzie bardzo przydatna i będzie się opłacać przez wiele lat.

Skoro czytasz ten artykuł zakładam, że wiesz czym jest jQuery, a jeżeli nie to odsyłam do podlinkowanego artykułu. Pomijając ideologiczną dyskusję czy warto uczyć się jQuery przejdźmy do zasadniczej części artykułu.

Zalety korzystania z Vanilla JS

Nie trzeba mieć doktoratu z algorytmów i złożoności by dojść do wniosku, że główną zaletą wykorzystywania czystego kodu JavaScript jest większa wydajność aplikacji.

Każdorazowe dołączenie biblioteki / frameworka / wtyczki – jak zwał tak zwał – zawsze będzie okupione kosztem szybkości wykonywania. W bibliotekach i frameworkach wykorzystuje się często metody statyczne, które są następstwem obowiązywania w powszechnym programowaniu paradygmatu obiektowego.

Brak zależności to też szybkość wczytywania stron internetowych i lepsze wyniki we wszelkiego rodzaju analizatorach np. PageSpeed Insights. Usunięcie pliku z kodem jQuery to jedna z najlepszych technik na zmniejszenie głębokości żądań krytycznych.

Brak ograniczenia możliwościami biblioteki może dać też więcej swobody i elastyczności przy tworzeniu własnych funkcjonalności na stronie.

Zdarzenia

ready()

Zdarzenie ready() ma miejsce wtedy, kiedy wszystkie elementy DOM są bezpieczne i gotowe do użycia. W bloku takim można umieścić instrukcje, które muszą być wykonane zanim strona pokaże się użytkownikowi. Mogą to być inicjalizacje bibliotek / wtyczek itp…

jQuery:

$(document).ready(function() {
  /* Kod */
});

Vanilla JS

document.addEventListener('DOMContentLoaded', function() {
  /* Kod */
});

click()

Zdarzenie ma miejsce kiedy kliknięty zostaje wybrany element. W przykładzie poniżej zostają wybrane wszystkie linki czyli elementy <a>

jQuery:

$('a').click(function() {
  /* Kod */
});

Vanilla JS

[].forEach.call(document.querySelectorAll('a'), function(el) {
  el.addEventListener('click', function() {
    /* Kod */
  })
});

Jeżeli interesuje nas tylko pierwszy element DOM, możemy pominąć forEach i użyć querySelector:

const el = document.querySelector('.moj-link');
el.addEventListener('click', function() {
     /* Kod */ 
 });

W przypadku zdarzenia click często wykorzystujemy preventDefault():

const el = document.querySelector('.moj-link');
el.addEventListener('click', function(e) {
     e.preventDefault();
     /* Kod */ 
 });

on()

Za pomocą on() możemy obsłużyć dowolne zdarzenia na wybranym elemencie.

jQuery

$(document).on('click', #przycisk, function(){
   /* Dalszy kod*/
});

Vanilla JS

document.addEventListener('click', function(e) {
   for (var target = e.target; target && target != this; target = target.parentNode){
      if (target.matches(document.getElementById('przycisk'))) {
      handler.call(target, e);
      break;
   }
}
}, false);

trigger()

Trigger pozwala wywołać konkretne zdarzenie na wybranym elemencie

jQuery

$(element).trigger('change');

Vanilla JS

var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
element.dispatchEvent(event);

Szukanie i wybieranie elementów

Za pomocą selektorów możemy wybierać elementy z DOM aby następnie przetwarzać je w ramach skryptów.

Tagi

jQuery

var allDivs = $('div');

Vanilla JS

var allDivs = document.getElementsByTagName("div")

Identyfikatory

jQuery

var content = $('#content');

Vanilla JS

var content = document.getElementById('content');

Klasy

jQuery

var navbar = $('.navbar');

Vanilla JS

var navbar = document.getElementsByClassName('navbar');

Selektor jak w jQuery

JavaScript umożliwia też wybrać elementy w podobny sposób jak w jQuery, za pomocą kombinacji klas, identyfikatorów i tagów, np:

jQuery

$('.klasa #identyfikator ul');

Vanilla JS

document.querySelectorAll('.klasa #identyfikator ul');

addClass()

Metoda addClass() dodaje klasę do wybranego elementu. W przykładach jest to dodanie klasy o nazwie „active”.

jQuery

myElement.addClass('active');

Vanilla JS

myElement.classList.add('active');

removeClass()

Jak można się domyślić usuwanie klasy.

jQuery

myElement.removeClass('active');

Vanilla JS

myElement.classList.remove('active');

toggleClass()

Dodaje klasę jeżeli jej nie ma a usuwa jeżeli istnieje:

jQuery

myElement.toggleClass('active');

Vanilla JS

myElement.classList.toggle('active')

Tworzenie elementu

jQuery

var newDiv = $('<div/>');

Vanilla JS

var newDiv = document.createElement('div');

Manipulacje

append()

Za pomocą append dodajemy do wybranego elementu obiekt podany w argumencie.

jQuery

$('body').append($('<span/>'));

Vanilla JS

document.body.appendChild(document.createElement('span'));

after()

Metoda after wstawia treść określoną w paramaterze element i dodaje po elemencie target.

jQuery

$(target).after(element);

Vanilla JS

target.insertAdjacentElement('afterend', element);

before()

Jak można się domyślić, metoda before wstawia treść element przed obiektem target.

jQuery

$(target).before(element);

Vanilla JS

target.insertAdjacentElement('beforebegin', element);

children()

Wybiera obiekty potomne elementu, które możemy filtrować za pomocą argumentu.

jQuery

$(element).children();

Vanilla JS

element.children

clone()

Metoda clone() klonuje element. Możemy to robić w celu zduplikowania czegoś na stronie.

jQuery

$(element).clone();

Vanilla JS

el.cloneNode(true);

each();

Metoda each to bardzo często wykorzystywana instrukcja w jQuery. Za jej pomocą możemy łatwo iterować po kolejnych wybranych elementach . W Vanilla JS mamy nieco więcej kodu, który bazuje na konstrukcji forEach.

jQuery

$(selector).each(function(i, el){
   /* Kod z dodatkowymi instrukcjami */
});

Vanilla JS

var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i){
   /* Kod z dodatkowymi instrukcjami */
});

remove()

Remove usuwa element w DOM

jQuery

$(element).remove();

Vanilla JS

el.parentNode.removeChild(element);

html()

Za pomocą metody html() jest możliwe podmienienie treści w danym elemencie.

jQuery

$(element).html('Witaj Świecie');

Vanilla JS

element.innerHTML = 'Witaj Świecie';

attr()

Metoda attr dodaje atrybut do danego elementu.

var path = 'img/obrazek.png';

jQuery

$(element).attr('src', path);

Vanilla JS

element.setAttribute('src', path);

removeAttr()

Metoda ta może usunąć dany atrybut.

$(element).removeAttr('required');

Vanilla JS

element.removeAttribute('required');

Obliczenia

Bibliteka jQuery często jest wykorzystywana do łatwego pobierania wymiarów danych elementów.

width()

Metoda width zwraca szerokość wybranego elementu.

jQuery

var elementWidth = $(element).height();

Vanilla JS

var elementWidth = parseFloat(getComputedStyle(element, null).width.replace("px", ""));

height()

Metoda height zwraca wysokość wybranego elementu.

jQuery

var elementHeight = $(element).height();

Vanilla JS

var elementHeight = parseFloat(getComputedStyle(el, null).height.replace("px", ""));

Wyrażenia logiczne / warunki

hasClass()

Metoda hasClass zwraca prawdę jeżeli dany element posiada klasę podaną w argumencie. Jeżeli nie – zwraca fałsz.

jQuery

$(element).hasClass('klasa');

Vanilla JS

element.classList.contains('klasa');

AJAX

Za pomocą AJAX jest możliwe wysyłanie asynchronicznych zapytań bez konieczności przeładowania bieżącej strony.

get()

Metoda GET wykonuje standardowe zapytanie. Do obiektu data zostanie przypisana odpowiedź.

jQuery:

$.get('//przykladowa-domena.pl/skrypt.php', function (data) {
  /* Kod wykonywany w przypadku powodzenia */
});

Vanilla JS

var httpRequest = new XMLHttpRequest()
httpRequest.open('GET', 'przykladowa-domena.pl/skrypt.php');
httpRequest.onreadystatechange = function (data) {
  /* Kod wykonywany w przypadku powodzenia */
}
httpRequest.send();

post()

Tak samo możemy obsłużyć metodę POST. Argument userid to przykładowe przesłanie zmiennej userID.

jQuery

$.post('//przykladowa-domena.pl/skrypt.php', {userid: userID }, function (data) {
  /* Dodatkowy kod wykonywany w przypadku powodzenia */
});

Vanilla JS

var httpRequest = new XMLHttpRequest()
httpRequest.onreadystatechange = function (data) {
  /* Dodatkowy kod wykonywany w przypadku powodzenia */
}
httpRequest.open('POST', '//przykladowa-domena.pl/skrypt.php');
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
httpRequest.send('userid=' + encodeURIComponent(userID));

Efekty wizualne

Bibliotekę jQuery często wykorzystuje się do wykonania prostych animacji. Okazuje się, że z wykorzystaniem CSS3 jest możliwe ich stosunkowo łatwe oprogramowanie w czystym JavaScript

fadeIn()

Efekt fadeIn to płynne pojawianie się elementu. Modal to przykładowy obiekt który można zainicjować za pomocą var modal = $(’.modal’);

jQuery

$(element).fadeIn();

Vanilla JS + CSS3

<style>
.show {
transition: opacity 400ms;
}
.hide {
opacity: 0;
}
</style>

<script>
element.classList.add('show');
element.classList.remove('hide');
</script>

fadeOut()

Metoda fadeOut przeciwnie – ukrywa element stopniowanym zanikaniem.

jQuery

$(element).fadeOut();

Vanilla JS + CSS3

<style>
.show {
opacity: 1;
}
.hide {
opacity: 0;
transition: opacity 400ms;
}
</style>

<script>
element.classList.add('hide');
element.classList.remove('show');
</script>

hide()

Metoda ta nagle ukrywa wybrany element. W ten sposób mogą być zamykane okna modalne wywołane z kodu JS.

jQuery

$(element).hide();

Vanilla JS

element.style.display = 'none';

show()

Ukryte elementy można z powrotem pokazać za pomocą metody show().

jQuery

$(element).show();

Vanilla JS

element.style.display = ' ';

Opóźnienia

Wykonywanie kodu JavaScript po określonym czasie setInterval i setTimeout to natywne funkcje JavaScript i nie są zależne od jQuery 🙂

Vanilla JS

setTimeout(function(){ /* Coś do zrobienia */ }, 10000);

Podsumowanie

Jak widać, posługiwanie się czystym JavaScript nie jest tak trudne jak mogłoby się wydawać. Nie da się ukryć, że kod w jQuery jest krótszy i ładniejszy – po to zresztą została wymyślona ta biblioteka. Wybieranie elementów za pomocą znaku $ jest bardzo wygodne, nie wspominając o krótkich metodach, których szybko można się nauczyć bez wnikania w zawiłości JavaScript.

Zalety wykorzystywania Vanilla JS mogą być w pewnych przypadkach bardzo korzystne. Jeżeli chcesz dodać jQuery z powodu chęci wykorzystania zaledwie kilku metod może warto z niego zrezygnować i nauczyć się czegoś nieco bardziej uniwersalnego i przyszłościowego? Nagrodą już dziś będzie szybsze działanie i lepsza wydajność tworzonej strony.

Jeżeli migrujesz z jQuery do czystego JavaScript sprawdź mój kurs JavaScript od podstaw, w którym pokazałem nowości wprowadzone w ES6.

Źródła:

• https://api.jquery.com/
• https://gist.github.com/joyrexus/7307312
• http://youmightnotneedjquery.com/