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.
Umbrella JS jako alternatywa dla jQuery?
Moim zdaniem w większości projektów ta biblioteka sprawdzi się jako alternatywa dla jQuery. Zawiera większość przydatnych funkcji, a przy tym jest bardzo lekka.
Oczywiście Umbrella nie sprawdzi się, jeśli będziesz chciał użyć pluginów jQuery. Nie skorzystamy również z animacji (funkcja animate nie istnieje w Umbrella JS) i kilku mniej przydatnych funkcji.
Tak czy inaczej, zdecydowanie warto ją sprawdzić 🙂
Do prostych rzeczy wystarczy…. 🙂
Dokładnie 🙂
No ciekawe. Już pare razy miałem sytuację, gdzie do prostych animacji podpinałem jQuery. To się pewnie przyda, szczególnie gdy nie ma czasu na naukę JS, bo pewnie większość tego co potrzebowałem dałoby się zrobić czystym JS.
Jak najbardziej, zawsze warto spróbować nowych technologii 🙂