Warunkowe ładowanie skryptów JavaScript

Ostatnio przeglądając archiwum na css-tricks.com, natrafiłem na ciekawy artykuł opisujący zastosowanie loadera yepnopejs oraz modernizr, który testuje wsparcie dla HTML5 i CSS3. Łącząc je możemy z powodzeniem używać na swoich stronach nowości technologicznych, nie martwiąc się przeglądarkami, które ich nie obsługują, gdyż specjalnie dla nich zostanie załadowany skrypt emulujący takie elementy.

Yeonopejs

Jak podaje sam autor, Yepnopejs jest asynchronicznym skryptem warunkowego ładowania zasobów, tylko wtedy gdy dany użytkownik ich potrzebuje. Najprostszym sposobem na załadowanie pliku jest przekazanie do obiektu yepnope ścieżki pod, którą się znajduje:

yepnope('path/script.js');

Jak przeprowadzić test przy pomocy tego obiektu? W taki sposób:

yepnope({
  test: /* Test jaki chcemy przeprowadzić. */
  yep: /* Pliki ładowane jeżeli test zwrócił true */
  nope: /* Pliki ładowane w przypadku, gdy test zwrócił false */
});

Konkretnym przykładem zajmiemy się na końcu, a po więcej informacji na temat samego loadera odsyłam do strony autora: yepnopejs.com

Modernizr

Modernizr daje Tobie możliwość sprawdzenia, czy przeglądarka użytkownika obsługuje nowości ze świata HTML5 i CSS3, których chcemy użyć na stronie. Dla przykłady, możemy sprawdzić obsługę placeholder, przy pomocy następującej składni Modernizr.input.placeholder. Jeżeli wynikiem będzie true, przeglądarka obsługuje ten atrybut, jeżeli false, to jej twórcy nie doczytali specyfikacji :).

Aby zacząć jej używać, musimy najpierw wygenerować plik, w którym umieszczone zostaną wszystkie testy jakie nas interesują. Generator znajduje się pod tym linkiem. Dla leniwych, autorzy przygotowali już gotowy plik, zawierający wszystkie dostępne testy, a pobrać go można ze strony głównej projektu.

Warunkowe ładowanie

Po opisaniu potrzebnych narzędzi, możemy przejść do przykładu. Posłużę się tutaj przykładem z css-tricks, w którym testowana jest obsługa atrybutu placeholder (pisałem o nim tutaj). Na początek ładujemy oczywiście skrypty yepnopejs i modernizr. Następnie tworzymy skrypt, który dokona testu i w zależności od wyniku podejmie stosowne działania.

yepnope({
  test : Modernizr.input.placeholder,
  nope : [
        'scripts/jquery.js',
        'scripts/placeholder.js'
  ]
});

Jeżeli placeholder jest obsługiwany, skrypt nie robi nic, w przeciwnym wypadku ładowane są, biblioteka jQuery oraz plik ze skryptem emulującym działanie nieobsługiwanego atrybutu. To wszystko.

Podsumowanie

Dzięki tym dwóm bibliotekom załatwiliśmy sprawę z brakiem obsługi pewnych elementów w niektórych przeglądarkach. Jak widać samo użycie nie jest niczym trudnym, a jego wykorzystanie eliminuje problem ładowania niepotrzebnych plików, bo obok samych skryptów możemy również ładować pliki css.

Linki