Prośba o wyjaśnienie kodu w JavaScript

Question

Witajcie,

nie rozumiem kilku linijek kodu. Co dokładnie one znaczą?

function handleClick (e) {

    var  target = e.target;   //co dokładnie oznacza `e.target`

    var evt  = e || window.event;   // co się tu dzieje

     .....
  
}

 

 

Answer 1

Funkcja handleClick najpewniej jest handlerem dla zdarzenia click. Jako parametr przyjmuje obiekt zdarzenia, tzw. event. Ten z kolei zawiera różne pola i metody. Jednym z pól jest target - czyli referencja do elementu DOM, na którym zdarzenie zostało uchwycone.

Zapis:

var evt  = e || window.event;

, to technika (często stosowana zwłaszcza przed wprowadzeniem default parameters w ES6), która pozwala w skróconej formie wybrać wartość tzw. truthy (lub tą, która zwraca wartość true - w zależności od zapisu warunku logicznego). W tym przypadku, jeśli do funkcji nie został przekazany parametr e (ma wtedy domyślnie wartość undefined), to do zmiennej evt zostanie przekazane pole event z obiektu window.

Comments

Super, dziękuję. Mam jeszcze jedną prośbę. Czy mógłbyś przedstawić realną sytuację, w której taki kod byłby użyty?

---

Żeby daleko nie szukać.

Fragment kodu, który na naszym forum odpowiada za dodawanie adnotacji użytkownika, do którego odnosimy się w odpowiedzi/komentarzu: https://github.com/CodersCommunity/forum.pasja-informatyki.local/blob/master/forum/qa-content/qa-page.js#L975

Zmienna eTarget jest użyta kilkukrotnie, więc nie trzeba za każdym razem pisać ev.target, żeby odnieść się do pola target (im większe zagnieżdżenie tym bardziej skrócisz kod korzystając z takiej zmiennej). To oczywiście nie dotyczy tylko obsługi zdarzeń. Jeśli tworzysz zmienną o nazwie takiej jak pole/metoda z jakiegoś obiektu, to możesz zastąpić taki zapis tzw. destrukturyzacją.

Co do drugiego zapisu, przydaje on żeby np. do zmiennej przypisać pierwszą dostępną wartość (a.k.a truthy lub spełniającą warunek). Fragment kodu do obsługi podglądu posta: https://github.com/CodersCommunity/forum.pasja-informatyki.local/blob/master/forum/qa-content/qa-page.js#L600

Jeśli przycisk zawierający tekst "Zadaj pytanie" nie zostanie odnaleziony w DOM, to szukamy takiego, który posiada "Zapisz", jeśli i takiego nie będzie to bierzemy ten z tekstem "Odpowiedz".

Inny przykład:

function saySomething(text) {
	text = text || 'World!';

	console.log('Hello ' + text);
}

saySomething('programmer'); // Hello programmer
saySomething(); // Hello World!

Funkcja pokaże w konsoli tekst zawierający słowo "Hello " oraz to, co przekażesz w parametrze lub (domyślnie) słowo "World!". Przykłady można mnożyć i nie trzeba ograniczać się tylko do wartości prymitywnych.

P.S. Fragmenty kodu forum służą jako przykład - kod ma już kilka lat i zapewne da się lepiej go zapisać.

P.S.2. W zasadzie, to zapis:

var evt  = e || window.event;

jest bez sensu, skoro w linijce wyżej już korzystasz z parametru e żeby odnieść się do pola target - jeśli parametr e nie został przekazany, pojawi się błąd. Bardziej logiczne by było zamienienie tych linijek (najpierw próbujemy uzyskać obiekt zdarzenia, a potem szukamy w nim pola).

---

Pomału to przerobie bo dość dużo różności :) Dziękuję.