jQuery alebo Vanilla JS?

Návrat k jednoduchosti v občasnej zložitosti vanilkového JavaScriptu má svoje výhody

2016-05-12
JavaScript

jQuery patrí bezpochyby k najpoužívanejším JavaScriptovým knižniciam. Umožňuje manipuláciu s DOM elementmi, dynamické štýlovanie a logické nadväzovanie funkcií v zadanej postupnosti (chainig). Vďaka dokumentácii s praktickými ukážkami a stack overflowu príspevkov na technických fórach stačia užívateľovi len základné znalosti HTML a CSS selektorov na vytvorenie základných UI operácií.

jQuery netreba vnímať ako moderný MV* framework, ale skôr ako zbierka často používaných JavaScript snippetov ( toggle element visibility , wrap element ), ktorým jQuery priradí skratku cez funkciu.

Pre JavaScriptovo zdatnejších užívateľov zjednodušuje napr. písanie AJAX callov, handlovanie browser a user eventov zabezpečuje väčšiu crossbrowser kompatibilitu JavaScript kódu a umožňuje prístup ku webstorage API za použitia pluginov postavených na vrchu samotnej library, viď API.

K rozšírenosti určite prispieva aj obľuba WordPress stránok, ktoré defaultne inštalujú CDN link na knižnicu ako dependency pre WP themy a pluginy, pričom bežný administrátor obyčajného blogu nemusí o jeho existencii vôbec vedieť.

Nevýhodou môže byť veľkosť knižnice v pomere k skutočne použitým funkciám ( ak potrebujeme len jQuery.ajax() ), a potreba čakania na document.ready a načítanie core library. Posledné spomenuté môže spôsobiť krátky flash stránky neupravenej jQuery kódom.

Pre rýchlu orientáciu a zváženie, či na napísanie jednej JS funkcie na rýchlu dynamickú úpravu výšky elementu budeme potrebovať jQuery (ak nie je defaultne predinštalované, potom sa vráťte v čase a nečítajte tento článok), odporúčam GitHub repo You Don’t Need jQuery.

Pár príkladov

Select podľa id

1
2
3
4
5
6
7
8
// jQuery
$('#id');
// Native
document.querySelector('#id');
// or
document.getElementById('id');

Select podľa class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// jQuery
$('.class');
// Native
document.querySelectorAll('.class');
// or
document.getElementsByClassName('class');
// (Alebo pre staršie browsery)
function replaceContentInContainer(matchClass, content) {
var elems = document.getElementsByTagName('*'), i;
for (i in elems) {
if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ') > -1) {
elems[i].innerHTML = content;
}
}
}

Komentáre: