Artykuł

flickr.com/photos/dmitry-baranovskiy/2378867408 flickr.com/photos/dmitry-baranovskiy/2378867408
sty 31 2014
0

Dublowanie biblioteki jQuery

Jeśli ktoś z Was, zadałby mi szybkie pytanie: Z czym kojarzy mi się jQuery?, to z pewnością odpowiedziałbym, że ze znakiem dolara, który jest używany w wielu konstrukcjach stosowanych przez tą bibliotekę. Dla mnie osobiście jest to jeden z bardziej charakterystycznych i rozpoznawalnych elementów tego rozwiązania. Oczywiście inne biblioteki również zdążyły się z nim zaprzyjaźnić (Prototype, YUI itp.), ale mimo wszystko odnoszę wrażenie, że to właśnie jQuery najbardziej wypromowało dolara.

Zastosowanie takiej jedno-znakowej konstrukcji ma sporo zalet. Przede wszystkim możemy pisać szybciej kod, który dzięki krótkiemu wyrażeniu zajmuje również mniej miejsca na naszym dysku twardym. Niestety takie podejście bywa również bardzo problematyczne, ponieważ trzeba uważać na kod innych bibliotek, które chcielibyśmy dołączyć do naszej strony - zarówno tych które również korzystają z dolara i tych, które wraz ze sobą przynoszą własną kopię jQuery... W ostatnim czasie sam boleśnie się o tym przekonałem...

W czym problem?

Oprócz tego że $ jest znakiem charakterystycznym jQuery, ma on wiele założeń funkcjonalnych. Przede wszystkim jest on swego rodzaju przestrzenią nazw dla biblioteki. Dzięki jego zastosowaniu, dostęp do dowolnej funkcjonalności jQuery odbywa się poprzez wywołanie funkcji poprzedzonej właśnie tym symbolem.

Takie podejście pozwala choćby na uniknięcie konfliktu nazw, który mógłby zaistnieć pomiędzy naszymi lokalnymi funkcjami, a tym co serwuje jQuery w środku. Innymi słowy biblioteka żyje własnym życiem i jest w pełni niezależna od utworzonego przez nas kodu. Oczywiście jQuery pozwala na rozszerzanie swoich możliwości i właśnie m.in. dzięki temu zbudowało swoją potęgę.

Powoli dochodzimy więc do sedna problemu. Tworząc wtyczki rozszerzamy domyślną przestrzeń jQuery o nasze własne funkcje, które później w obrębie aplikacji możemy wywołać. Oczywiście ich zasięg obejmuje tylko lokalną witrynę. W normalnych sytuacjach wszystko będzie w porządku, ale temat może się skomplikować, gdy spróbujemy podczepić do naszej witryny jakieś zewnętrzne rozwiązania - np. wtyczki ulubionego programu partnerskiego. Ostatnio spotkałem się właśnie z taką sytuacją.

Na swojej stronie korzystam już od dawna z jQuery oraz kilku mniejszych wtyczek (w tym gronie znajdują się również moje własne rozszerzenia). Ostatnio eksperymentowałem również z programami partnerskimi. Z pewnością ogólną ich ideę znacie, natomiast warto nadmienić tutaj aspekt developerski. W ramach PP, właściciel witryny musi najczęściej umieścić u siebie na stronie jakiś skrypt/widget, dzięki któremu będzie mógł emitować określoną reklamę. W praktyce tego rodzaju widget pochodzi z zewnątrz i jest to mieszanka HTMLu, CSS oraz przede wszystkim JavaScriptu. Jeden z testowanych ostatnio przeze mnie programów korzystał z jQuery i nie nadpisywał domyślnego znaku dolara. Jak myślicie jaki to przyniosło efekt?

Brawa dla tych, którzy spodziewali się problemów. Zewnętrzna biblioteka jQuery nadpisywała przestrzeń nazw mojej kopii biblioteki i tym sam kasowała z pamięci odwołania do wszystkich moich wtyczek. Oczywiście na początku nie skojarzyłem tematu, bo symptomy wskazywały zupełnie inny problem, ale usunięcie wtyczki przywróciło wszystko do pionu, jak za dotknięciem czarodziejskiej ręki. Jak rozpoznać, że taka sytuacja ma miejsce u Was? Charakterystycznym objawem jest komunikat błędu w konsoli w stylu:

x is not a function

Gdzie x to nazwa Waszej wtyczki.

Jak temu zapobiec?

W moim odczuciu nie powinno to być zmartwieniem właściciela witryny i powinni się zająć tym Ci, którzy dostarczają nam swojej skrypty. Niestety świat nie jest idealny i często jest lepiej zrobić coś samemu.

Ponieważ znak dolara jest dosyć popularny, twórcy jQuery przygotowali odpowiednie zabezpieczenie, które pozwala korzystać z trybu No-Conflict, w praktyce trzeba je wywołać od razu po załadowaniu kopii biblioteki, która ma zwrócić dolara prawowitemu właścicielowi*:

<script src="some-other-dollar-library.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function
 
$j(document).ready(function() {
    $j( "div" ).hide();
});

Oczywiście taki trick w praktyce powinien zastosować skrypt, którzy przychodzi do naszego środowiska jako gość. Nie powinno być to naszym zmartwieniem, ale tak jak pisałem wcześniej, świat nie jest idealny i warto znać obejście problemu w sytuacji gdy coś nagle przestanie działać. Kod oddający dolara prawowitej bibliotece najlepiej wywołać zaraz po załadowaniu feralnej biblioteki/plugina. Pamiętajcie że kod HTML jest czytany od góry do dołu i kolejność instrukcji ma znaczenie!. Swoją drogą, wtyczki od PP niestety często stoją na bardzo niskim poziomie.

W przypadku gdy $ zostanie nadpisany przez inną bibliotekę niż jQuery (dotyczy to sytuacji - najpierw ładujemy jQuery, później coś innego z dolarem), to do naszej ulubionej biblioteki można wciąż dostać się poprzez konstrukcję jQuery:

jQuery( document ).ready(function() {
    jQuery( "div" ).hide();
});

* - Skrypt zaczerpnięty z dokumentacji jQuery, do której odsyłam również po większą liczbę przykładów i szerszy opis.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus