Umbrella JS jako alternatywa dla jQuery?

Umbrella JS to bardzo lekka biblioteka JavaScript, która może stanowić alternatywę dla jQuery. W tym artykule dowiesz się jak z niej korzystać.

Główne plusy Umbrella JS:

składnia jest mocno inspirowana jQuery. Jeśli korzystałeś z niej wcześniej, to w ciągu kilku minut odnajdziesz się w Umbrella
w porównaniu do jQuery jest bardzo lekka – tylko 3kb po kompresji
posiada wszystkie niezbędne funkcje – obsługę wydarzeń i AJAX oraz manipulację DOM

Instalacja biblioteki

Instalacja Umbrella JS ogranicza się do pobrania pliku .js i podpięcia go do strony.

<script src="umbrella.min.js"></script>

Korzystanie z Umbrella

Jeśli korzystałeś wcześniej z jQuery, to szybko przestawisz się na Umbrella. Składnia tych bibliotek jest bardzo podobna.

Obsługa eventów

Obsługa wydarzeń jest w Umbrella prawie identyczna jak w jQuery. Korzystamy z funkcjo on. Wygląda to następująco:

u("p").on('click', function(){
   console.log(u(this).text());
});

Jak widzisz jedyną różnicą jest użycie u zamiast $. Po kliknięciu na paragraf w konsoli wyświetli się jego zawartość.

W ten sam sposób możemy korzystać z innych eventów:

u("p").on('mouseenter mouseleave', function(){
   console.log(u(this).text());
});

u("form").on('submit', function(e){
   e.preventDefault();
});

I tak dalej.

Pętla

Podobnie jak w jQuery mamy tutaj możliwość użycia funkcji each.

u('a').each(function(node, i){
  u(node).attr({ target: '_blank' });
});

Powyższy kod doda target=”_blank” do wszystkich linków.

Ajax

Obsługa Ajax jest również bardzo prosta. Korzystamy z funkcji ajax.

u('.kontakt').ajax(function(err){
  if (err) return alert("Error");
  alert("Dziękujemy za wiadomość!");
});

Dodawanie/usuwanie klas i atrybutów

Co tu dużo pisać – praktycznie wszystko odbywa się w identyczny sposób jak w jQuery.

u(".menu").addClass("active"); // dodanie klasy
u(".menu").removeClass("active"); // usunięcie klasy

u("input").attr('name'); // pobranie atrybutu
u("input").attr('name', 'devcorner'); // ustawienie atrybutu

Scrolluj do elementu

Możemy w prosty sposób przewinąć stronę do elementu, używając funkcji scroll.

u('.scroll').on('click', function(e){
  e.preventDefault();
  u('section').scroll();
});

Pełną listę dostępnych funkcji możesz znaleźć w oficjalnej dokumentacji.