Większość developerów w ostatnich czasach zaczyna coraz częściej korzystać z CDN Google czy Microsoftu celem załadowania jQuery, Prototype czy innego frameworka do JavaScript.
Jest w tym mnóstwo korzyści i sam też tak robię. Co jeśli jakimś cudem nie uda się połączyć z zewnętrznym serwerem? Strona pozostanie bez najważniejszej biblioteki, przez co reszta naszych skryptów nie zadziała.
W jaki sposób ładować zewnętrzne biblioteki JavaScript?
Rozwiązanie jest banalnie proste i skuteczne! A ponadto bardzo przydatne choćby podczas pracy na localhoście, kiedy nie ma łączności z Internetem (czasem się tak zdarza, przynajmniej u mnie).
W najprostszym przypadku ładujemy jQuery (czy jakąkolwiek inną bibliotekę) w następujący sposób:
1 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
czy z serwerów jQuery:
1 | <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> |
Zalet takiego rozwiązania jest kilka, m. in.:
- spora część użytkowników przeglądając inne strony załadowała już tą bibliotekę do cache, przez co nie musi po raz kolejny pobierać,
- biblioteka jest na serwerach krawędziowych położonych najbliżej klienta, a więc nie musi on czekać zbyt długiego czasu (tutaj więcej o Content Delivery Network),
- biblioteki te zazwyczaj ważą koło 50 KB (w najlepszym przypadku), także możemy zaoszczędzić sporo swojego transferu, ponieważ biblioteki będą wczytywane z zewnętrznych serwerów.
Zalet pewnie jest więcej, ale już powyższe przekonują mnie w zupełności.
Co jeśli biblioteka się nie wczyta?
No właśnie, zmierzamy do meritum tematu. Jak zapobiec niewczytaniu się biblioteki? Załadować ją z lokalnego serwera!
W przypadku jQuery robimy to następująco:
1 | !window.jQuery && document.write('<script src="jquery.min.js"><\/script>'); |
Tak, to już wszystko :-)
I choć to tak proste i oczywiste, nigdy wcześniej nie wpadłem na taki pomysł. Zresztą jak często widzę w kodzie innych stron i serwisów, także i inni zapominają o tak ważnym szczególe.
Takie rozwiązanie ma jednak pewien spory minus – polecam lekturę http://happyworm.com/blog/2010/01/28/a-simple-and-robust-cdn-failover-for-jquery-14-in-one-line/
Choć faktem jest, że każde rozwiązanie jest już dobre – w obliczu tego, że rzeczywiście mało kto w ogóle myśli o tym, że trzeba oprogramować też sytuację, w której biblioteka nie wczytała się z CDN ;)
PS. Gratuluję świetnego bloga – krótko i przystępnie opisujesz rzeczywiście istotne rzeczy :)
Faktycznie, masz rację! Nie sądziłem, że problem jest tak skomplikowany do rozwiązania, ale teraz już lepiej rozumiem problem – dziękuję za przesłanie wartościowego linka :-)
Dziękuję także za miłe słowa odnośnie bloga :-)
Z tego co ostatnio pisali, JQuery zablokuje hotlinkowanie do plikow js i css na ich serwerach, wiec wpis nieco mylacy ;)
Wpis nie jest mylący, bo Google nadal będzie udostępniać swoje CDN. A jak nie Google to Microsoft.
Btw. można prosić o link potwierdzający Twoją tezę? Nie mogę nigdzie się doszukać, a jakoś wątpię. Tym bardziej, że nawet na stronie jQuery mamy napisane, że możemy śmiało hotlinkować: http://bit.ly/emCW2Q
@Kamil http://blog.jquery.com/2010/12/30/hotlinking-to-be-disabled-on-jan-31-2011/ prosze ;) na blogu napisali :)
Faktycznie, nie widziałem tego. Dziwne, że nie dodałem jeszcze ich blogu do swoich RSS-ów :-) Tak czy siak, można skorzystać z CDN Google lub Microsoftu.
Na szczęście sam zawsze wybierałem serwery Google, więc nie mam tego problemu – współczuję jednak ludziom, którzy korzystali z CDN jQuery, nie odczytają posta na blogu i za jakiś czas będą się męczyć i doszukiwać problemu.
Nieuczciwa zagrywka ze strony jQuery – albo od razu nie zezwalają na hotlinkowanie albo zezwalają na zawsze.
Jest też taka mała zabawka (chociaż jeżeli ma służyć tylko do ominięcia CDN to raczej się nie opłaci):
http://yepnopejs.com/
Dzięki Tobiasz za komentarz ;) Owszem, znam yepnope, ale akurat nie wpadłem na to, by tutaj zastosować, dobry pomysł.
yepnope zawsze rozpatrywałem w kwestii wczytywania cross browser polyfills w połączeniu z Modernizr :)