W dobie frameworków takich jak React i bibliotek takich jak Angular, można by pomyśleć, że jQuery nie ma już prawa bytu. Nic bardziej mylnego! Ten najpopularniejszy dawniej framework nadal jest niezwykle przydatny w codziennej pracy!
Wpis powstał z okazji 1. kwietnia 2019 r.
Ale…
Wiem co teraz myślicie: „Ale przecież wszyscy hejtują jQuery!”. No jasne, na forach i na Facebooku tak. W praktyce jednak… okazuje się, że aż 94% señor developerów używa jQuery w codziennej pracy!
Jakie są powody? Oto 10 przykładów kodu, które są znacznie krótsze i bardziej czytelne dzięki jQuery.
1. Pobieranie elementów
Bez jQuery zmuszeni jesteśmy używać gołego DOM API, które bez żadnych abstrakcji zmusza do pisania bardzo długiego i nieczytelnego kodu. Wystarczy tylko porównać prosty przykład, czyli pobieranie elementów z DOM na podstawie selektorów CSS.
DOM API:
document.querySelectorAll('.klasa');
jQuery:
$('.klasa');
Dla tak krótkiego zapisu bez wątpienia warto załadować całą bibliotekę jQuery!
2. Dodawanie i usuwanie klas
Ewidentnie widoczna jest tutaj ogromna przewaga jQuery:
DOM API:
el.classList.add('selected');
el.classList.remove('selected');
el.classList.toggle('selected');
jQuery:
$(el).addClass('selected');
$(el).removeClass('selected');
$(el).toggleClass('selected');
3. Pobieranie rodzica elementu
Tutaj w szczególności widoczna jest ułomność DOM API:
DOM API:
el.parentNode;
jQuery:
$(el).parent();
4. Nadpisywanie treści elementu
DOM API nie mogłoby tutaj być chyba bardziej skomplikowane i mylące. jQuery sprawia, że rzeczy stają się proste:
DOM API:
el.innerHTML = 'Siema';
el.textContent = '<b>Siema</b>';
el.innerHTML;
el.textContent;
jQuery:
$(el).text('Siema');
$(el).html('<b>Siema</b>');
$(el).text();
$(el).html();
5. Pobieranie atrybutów
DOM API:
el.getAttribute('tabindex');
jQuery:
$(el).attr('tabindex');
6. Porównywanie elementów
Tutaj chyba nie muszę komentować, jak bardzo jQuery ułatwia codzienną pracę:
DOM API:
el1 === el2;
jQuery:
$(el1).is($(el2));
7. Nasłuchiwanie na zdarzenia
Od pisania tego w gołym DOM API nadal mam koszmary.
DOM API:
el.addEventListener('click', () => { /* … */ });
jQuery:
$(el).on('click', () => { /* … */ });
8. AJAX
Odejdźmy na moment od DOM API, gdyż jQuery to także przydatne abstrakcje do wykonywania między innymi Ajaksów, animacji i innych rzeczy…
Bez jQuery:
fetch('/api/users')
.then(response => response.text())
.then(body => {
console.log(body);
})
Z jQuery:
$.ajax({
url: '/api/users',
type: 'GET'
success(data) {
console.log(data);
}
})
Wow, no nie? Po zobaczeniu tego kodu, pewnie nigdy więcej nie będziecie chcieli wykonywać requestów bez jQuery!
9. Parsowanie JSON
Tam, gdzie goły JavaScript zawodzi, jQuery jak zwykle dowodzi swojej wyższości:
Bez jQuery:
JSON.parse(json);
Z jQuery:
$.parseJSON(json);
10. Zmiana kontekstu funkcji
„This” w funkcjach w JavaScripcie to skomplikowana sprawa! Na szczęście jQuery sprawia, że bindowanie, czyli zmiana kontekstu, staje się banalne:
Bez jQuery:
fn.bind(context);
Z jQuery:
$.proxy(fn, context);
Podsumowanie
Naucz się React na szkoleniu z Type of Web! Mam nadzieję, że tym wpisem chociaż nieco przekonałem Was, dlaczego warto nadal używać jQuery w 2019 roku. Oczywiście, ktoś mógłby mi zarzucić, że wybrałem tendencyjne przykłady — takie, w których zysk z użycia jQuery jest największy. Oczywiście! Ale na pewno są to operacje, które wykonujecie codziennie.
Nie słuchajcie nigdy fałszywych guru programowania, którzy mówią, aby odrzucać coś tylko dla zasady. jQuery jest, był i będzie znaczącym frameworkiem i wiele osób używa go razem z React, Vue czy Angularem. Sto lat, jQuery!
O kurczę, przeczytałem ten wpis dzisiaj i nie miałem włączonej lampki ostrzegawczej xd
Prawie się nabrałem 😛
niech zostanie ku pamięci hop aprilis 🙂
hehe fajne, ale tak nieco z innej strony to wiele osób hejtuje jQuery używając na co dzień np. angularaJS w jakiś starszych apkach jakby nie wiedzieli, albo nie chcieli wiedzieć, że w ajs pod spodem dzieci jQuery Lite 🙂
Ja ze swojej strony polecam wspaniałą bibliotekę `react-use-jquery`:
https://github.com/latviancoder/useJquery
Po przeczytaniu tytułu byłem już bardzo podejrzliwy. Po `Dla tak krótkiego zapisu bez wątpienia warto załadować całą bibliotekę jQuery!` nie miałem już wątpliwości 😀
Spójrz na datę :))
Wiem, wiem, po przeczytaniu wstępniaka szybko spojrzałem na datę publikacji i wszystko stało się jasne 😀 P.S. Fajny link ze statystyką użycja jQ wśród seniorów. Ciekaw jestem ile ludzi przeszło obok tej informacji obojętnie nie będąc jeszcze świadom bycia robionym w konia 😀
a może mi ktoś w paru słowach wyjaśnić, dlaczego nie powinno się używać jQuery?
jestem w branży jakies 14 lat co prawda robie backend ale fornt tez czasem musze ruszyć, i jquery jest jebane już chyba z 10 lat wstecz a ciągle jest na 90% www bo poprostu jest zajebiście proste i działa. Nie powinieneś używac jquery jeśli chcesz dobrze zarabiać jako frontend developer bo za react, angular śmiało dostaniesz 120-150 zł netto h i huj Cie obchodzi czy projekt jest z tego tytłu rentowny czy nie bo wystawiasz FV i masz to gdzieś 🙂
pytałem pod kątem portfolio, ale już wiem co i jak, dzięki 😉
hmm to moze nieco inny przykłąd:
jQuery:
$('a').click(function() {
/* Kod */
});
Javascript
[].forEach.call(document.querySelectorAll('a'), function(el) {
el.addEventListener('click', function() {
/* Kod */
})
});
już nie tak kolorowo 😀
$(document).on('click', #przycisk, function(){
/* Dalszy kod*/
});
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);