Artykuł

gru 16 2012
0

Jak szybciej i efektywniej pisać kod w jQuery

Kiedy pierwszy raz na poważnie skorzystałem z jQuery w mojej pracy, przeżyłem mały szok. Był on głównie spowodowany faktem, że około 100 liniowy kod wykorzystywany do utworzenia pewnej struktury DOM, udało się skrócić praktycznie do kilku linijek. Szok był tym większy, że dzięki tej bibliotece właściwie mogłem zapomnieć o problemach kompatybilności JavaScriptu z różnymi przeglądarkami.

Dziś jedna z moich aplikacji webowych tworzonych w pracy, ma blisko 10 tys. linii kodu jQuery. Boję się myśleć ile by to było, gdyby w tym miejscu znalazł się klasyczny JavaScript. Strach również pomyśleć o dziesiątkach godzin, które w tym przypadku musiałbym spędzić na debugowaniu kodu dla Internet Explorera 6... (uroki pisania kodu, który ma działać w pewnej dużej krajowej korporacji).

Choć z jQuery nie zawsze jest lekko (w tym miejscu pozdrowienia dla twórców za ich nie zawsze do końca przemyślane zmiany), to w tej chwili nie wyobrażam sobie pracy bez tej biblioteki - myślę, że w tym miejscu nie jestem sam;)

Pisałem, że jQuery skraca kod i jest to najprawdziwsza prawda, ale w tym miejscu dzieje się też pewna magia. Tak naprawdę, tam odrobinę głębiej wciąż siedzi stary, dobry JS. Nieumiejętne użycie naszej ulubionej biblioteczki, może zdrowo obciążyć zasoby i łącza naszych użytkowników. Warto wiedzieć, że wiele rzeczy tutaj można zrobić szybciej, lepiej i efektywniej niż się to z pozoru wydaje;)

O tym co mam na myśli, postaram się opowiedzieć więcej w dalszej części wpisu.

Wartości domyślne Ajaxa

Obecny rynek, dość mocno wymusza dynamiczne strony WWW, w których większość treści powinna wczytywać się w tle. Oczywistym rozwiązaniem w tym przypadku są żądania asynchroniczne, które w przypadku jQuery doczekały się opakowania w dedykowaną funkcję $.ajax. Kluczowym elementem tej funkcji, jest tablica ustawień przekazywana podczas jej wywołania. Oczywiście istnieją wartości domyślne, ale prawda jest taka, że bardzo często i tak musimy je nadpisać swoimi wartościami.

Dla przykładu, w większości moich zawodowych projektów zawsze kieruje żądania Ajax na określony URL, ustawiam typ POST oraz wyłączam cache'owanie ze względu na dynamiczną strukturę zwracanych danych.

Kilka - kilkanaście wywołań Ajax na jednej stronie, powoduje zwiększenie kodu o kilkanaście - kilkadziesiąt zbędnych linijek, które wykonują dokładnie te samą czynność.

Na szczęście twórcy jQuery umożliwili nam lokalną zmianę wartości domyślnych. Dzięki temu, po zastosowaniu konstrukcji z poniższego listingu, będziemy mogli pominąć wybrane parametry we wszystkich żądaniach Ajax na określonej stronie:

$.ajaxSetup({
	url: 'default.aspx',
	type: 'POST',
	cache: false,
	dataType: 'json'
});

Oczywiście jeśli dowolne żądanie będzie musiało skorzystać z innych wartości, można je standardowo ustawić bezpośrednio w nim:)

Podobna sztuczka działa dla wielu innych funkcji jQuery.

Wartości domyślne dla jQuery UI

Drugim elementem który jest mocno obecny w moich aplikacjach, są dialogi z jQuery UI. W tym przypadku skala problemu jest znacznie większa, ponieważ w moim przypadku wartości domyślne dostarczone przez twórców, nie sprawdzają się kompletnie. Na szczęście również w tym przypadku możemy nadpisać wartości domyślne praktycznie dowolnego widgetu dostępnego w jQuery UI.

W tym celu należy wykorzystać funkcję $.extend, o której pisałem już kilka razy m.in. w aspekcie tworzenia rozszerzeń jQuery.Za jej pomocą, wskazujemy po prostu nasze własne wartości domyślne. W tym przypadku możemy zmieniać nie tylko standardowe właściwości, ale także całe funkcje. Spójrzmy na poniższy kod:

$.extend($.ui.dialog.prototype.options, {
	modal: true,
	autoOpen: false,
	width: 400,
	height: 200,
	bgiframe: true,
	beforeclose: function(oEvent, oUi) {
		$(':input').val('');
	}
});

W tym przypadku oczekiwaliśmy, że dialogi na naszej stronie zawsze będą modalne i nie będą się nigdy otwierać same. Wymusiliśmy standardowy rozmiar 400 x 200 oraz włączyliśmy obsługę wtyczki bgiframe, dzięki czemu unikniemy dziwacznego zachowania IE6. Ponadto zdefiniowaliśmy funkcję beforeClose, która wyczyści zawartość pól formularza przed zamknięciem dialogu.

Oczywiście również w tym przypadku, określone wartości możemy nadpisać w poszczególnych instancjach. Przy dużej liczbie dialogów, możemy jednak osiągnąć dużo mniejszy kod wynikowy.

Tablice parametrów

Tworząc skrypty JavaScript, zdarza mi się pisać kod, którego zadaniem jest np. zmiana źródła obrazka dla elementu img. Jeśli zmienimy wartość atrybutu src, to automatycznie wypada również zmienić jego tytuł oraz tekst alternatywny. Standardowo robimy to wywołując trzy razy funkcję attr:

var oImg $('#mypicture');
oImg.attr('src', 'picture.jpg');
oImg.attr('title' 'To jest mój nowy piękny obrazek!');
oImg.attr('alt', 'Obrazek');

Nie wygląda to do końca zbyt fajnie. Trzy razy wywołujemy tą samą funkcję na jednym elemencie, zmieniając tylko jej parametry wywołania. Na szczęście można zrobić to inaczej:

$('#mypicture').attr({
	'src': 'picture.jpg',
	'title': 'To jest mój nowy piękny obrazek!',
	'alt': 'Obrazek'
});

W chwili obecnej taka konstrukcja nie daje nam żadnego większego przyspieszenia (wynik zależy od przeglądarki), ale wydaje mi się to być czytelniejszym i przystępniejszym rozwiązaniem - choćby ze względu na popularność rozwiązań opartych o JSONa w ostatnim czasie.

Tablicę parametrów (przez autorów jQuery nazywaną również mapą) można zastosować również w kilku innych funkcjach np. css, data czy prop. Zawsze idea jest taka sama. Przekazujemy tablicę par klucz - wartość.

Zapamiętywanie elementów w zmiennych

Częstym błędem webdeveloperów, jest kilkukrotne pobieranie tego samego elementu, bez zapamiętywania go w zmiennej. Wiąże się to prawdopodobnie z tym, że użycie selektorów jQuery jest niezwykle proste. Nie oznacza to jednak, że ich wykorzystanie nic nie kosztuje.

Każde kolejne pobranie elementu wymaga jego wyszukania w drzewie DOM. Im jest ono większe, tym większy jest narzut pamięci oraz mocy procesora potrzebnej do realizacji tego zadania. Dlatego też lepiej zapisać wybrany element do zmiennej, aniżeli wyszukiwać go kilkukrotnie w drzewie DOM.

Łańcuchowe wywołania

Pewną istotną cechą jQuery, jest możliwość łańcuchowego wywołania operacji. Terminem tym określamy użycie kilku funkcji na raz pobranym elemencie, dzięki czemu możemy np. uniknąć tworzenia nowej zmiennej dla niego. Poniższy kod jest jak najbardziej poprawny:

$('#mypicture')
	.attr({
		'src': 'picture.jpg',
		'title': 'To jest mój nowy piękny obrazek!',
		'alt': 'Obrazek'
	})
	.data('mydata', 'test')
	.css({
		'width': '32px',
		'height': '32px'
	})
	.parent()
		.css('display', 'block');

Dzięki takiej konstrukcji oszczędzamy po prostu miejsce oraz wywołania poszczególnych selektorów.

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

Send to Kindle

Komentarze

blog comments powered by Disqus