Na skróty w JavaScript

 

Skrócony zapis definicje tablic, obiektów w JavaScriptWydeptane ścieżki na trawniku, świadczą o złym rozplanowaniu sieci chodników. Ludzie używają drogi na skróty, by szybciej dotrzeć do celu. Nie musisz niszczyć trawnika, by szybciej stworzyć aplikację w JavaScript. Użyj skrótów do tworzenia tablic i obiektów.

Obiekty w JavaScript

Droga naokoło:


var obj = new Object();
obj.name = 'web design template';
obj.id = 1234;
(...)

Droga na skróty:


var obj = {
    name: 'web design template',
    id: 1234,
    (...)
};

Tablice w JavaScript

Oldschool:


var tab = new Array();
tab[0] = 'uno';
tab[1] = 'duo';
(...)

Skrócony zapis:


var tab = ['uno', 'duo', (...)];

Analogia z formatem JSON

Jeżeli jeszcze nie przekonałem Cię do stosowania skrótów, warto się ich nauczyć z jeszcze jednego powodu. Jedno słowo – JSON. JSON to format opisu danych, taki jak XML. Ciężko nie dostrzec analogii w zapisie formatu do skróconej składni w JavaScripcie. Przykład?


{
    name: 'KISS design',
    attributes: [{
        category: 'web design',
        length: 12
    }],
    shorthand: 'Kd',
    display: {
        width: 700,
        height: 300
    }
}

Jeżeli chodzi o zastosowanie, JSON wyśmienicie sprawdza się do komunikacji aplikacji klienckiej i serwera. Dla programistów PHP, szczególnie przydatne mogą okazać się funkcje json_encode i json_decode. JSON znają doskonale Ci, którym nie jest obce tworzenie aplikacji AJAX-owych. Więcej o sposobach użycia formatu JSON, wkrótce.

Znasz inne shorthand’y w JavaScript lub innych językach? Które uważasz za szczególnie przydatne? Wolisz korzystać z XML-a czy JSON-a? Napisz w komentarzu.

 
 

Akcje JavaScript w delegacji

 

Delegowanie akcji w JavaScriptDelegowanie akcji to wbudowana cecha języka JavaScript. Pozwala na błyskawiczne przypisanie akcji do całej grupy elementów. Jak to możliwe? Wykorzystujemy przodka, który oddelegowuje zadanie do elementów, znajdujących się niżej w hierarchii DOM.

Pora na przykład


<ul id="kiss-design-list>
	<li><a href="http://google.pl">Google</a></li>
	<li><a href="http://wikipedia.pl">Wiki</a></li>
	<li><a href="http://smashingmagazine.com">SM</a></li>
	<li><a href="http://kissdesign.pl">KISS design</a></li>
</ul>

Stara szkoła uczyła w ten sposób:


window.onload = function () {
    var list  = document.getElementById("kiss-design-list");
    var links = list.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function () {
		alert("Heey-ya!");
		return false;
        }
    }
};

Działa? Działa. Z tym, że rozwiązanie wymaga napisania sporo kodu. Przelatujemy pętlą po wszystkich odnośnikach na liście i dla każdego z nich przypisujemy akcję.

Zrób to lepiej, czyli delegacja eventów


window.onload = function () {
    var list = document.getElementById("kiss-design-list");
    list.onclick = function (e) {
        var event = e || window.event;
        var target = event.target || event.srcElement;
        if(target.nodeName.toLowerCase() === 'a') {
		alert("Heey-ya!");
		return false;
	}
    }
};

Volia! Wpierw przypisujesz akcję jednemu z przodków, elementów, których akcje chcesz obsłużyć. W tym przykładzie dodajemy akcję elementowi ul#kiss-design-list. Następnie sprawdzasz kto był rzeczywistym celem eventu. Jeżeli celem jest odnośnik (użycie pola nodeName), to obsługujesz akcję.

Można jeszcze krócej?

Zapis mógłby być jeszcze krótszy, ale przeglądarki w różny sposób dostarczają obiekty Event i informacje na temat celu. Stąd linie 4 i 5. Aby otrzymać rozwiązanie w pełni cross-browser, przeczytaj poprzedni wpis o akcjach w JavaScript. Oczywiście korzystając z gotowych frameworków w stylu jQuery, nie musisz się zupełnie o to martwić.

Return false. Or maybe true.

Pamiętaj, aby po obsłudze akcji zwracać false, jeżeli nie chcesz by przeglądarka wykonała domyślną akcję (w tym przypadku przekierowanie do odpowiedniej strony). Dzięki temu po kliknięciu na link, użytkownik zobaczy jedynie okno alertu.

Czy delegacja akcji faktycznie jest uproszczeniem? Może wolisz korzystać z frameworków, nawet jeżeli masz do napisania jedną funkcję w JS? Podziel się wrażeniami w komentarzu.

 
 

Programowanie akcji w JavaScript

 

Czyli jak to zrobić zgodnie z zaleceniami w3c albo jak to zrobić… tak, by działało ;] Problem dotyczy (tradycyjnie) IE, a także Safari, które stosują inne odwołania do obiektu Event i obiektu wywołującego zdarzenie.

Oto rozwiązanie podpatrzone na quirksmode.org (polecam!):
Plik XHTML z linkiem, do którego dodamy akcję po kliknięciu (onclick). Dobrą praktyką jest definiowanie akcji po załadowaniu strony za pomocą zdarzenia onload elementu body.


<body onload="addListeners();">
<a href="site.html" id="link">Kliknij na mnie!</a>
</body>

Plik JavaScript z oprogramowaną akcją:


function addListeners(){
document.getElementById("link").onclick=doSomething;
}

//domyślnie wg. w3c powinniśmy otrzymać obiekt klasy Event
function doSomething(e) {
	var targ;
	if (!e) var e = window.event; //naprawiamy bug IE
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	if (targ.nodeType == 3) //naprawiamy bug Safari
		targ = targ.parentNode;
}

W ten prosty sposób mamy rozwiązanie cross-browser. Funkcja doSomething dostarcza nam niezbędnych informacji w obiekcie klasy Event (zmienna e), a także referencję do obiektu, który jest źródłem akcji (zmienna targ).

Więcej na ten temat (m.in. szczegółowa obsługa myszy/klawiatury) w tym artykule o eventach.

Skuteczne? Proste? Podziel się wrażeniami w komentarzu!