foreach. Wsparcie dla starszych wersji.

Question

Jak narazie moje API ma wsparcie do rok wstecz (tyle przetestowałem) , jednakże jedna rzecz mnie zastanawia jak kiedyś taki problem rozwiązywano.

this.createEvents = function (){
                console.log("Why u dont do this? :(")
                var nodes = this.domImageSliderGroup;
              console.log(this.domSlider);
              var nodes =this.domImageSliderGroup;
              nodes.forEach(
                  node => {
                            node.addEventListener(
                              'click',
                              () => {
                                if (this.StartAPP){
                                  return;
                                }

                                this.node = node.firstChild;
                                this.nodeID = node.firstChild.id;
                                this.startAPP = true;
                                this.showImg();
                                this.whichWay(node);
                                this.run();

                              }
                            )

                        }
              );

            };

Przed wersją 50.0 dla FF, choćbym się uparł bądż zaprzęgł butami dla nodeList foreach jest nieznane. Ciekawostka druga jest, gdy wpakujemy to -->var nodes = this.domImageSliderGroup; w tablicę, to już foreach jest good, ale za to addEventLister już nie, choć to węzeł (sic). Arrow function według MDN już od dawna ma wsparcie , foreach bodajże 33 wersji. Znalazłem sposób zbudowaniem klucza , mapowaniem na nim, ale musi być inny sposób. Testowałem na: 49,48,46.

Heh a jeszcze czeka mnie chrome (dla reszty załatwię tyle by, chociaż działało na najnowszej wersji, bądz jedna wstecz. IE odrzucam bo tu szkoda gadac...)

Comments

Dlaczego nie zastosujesz Event Delegation i nie podepniesz EventListener'a do rodzica któregoś z elementów kolekcji nodes?

var nodes = this.domImageSliderGroup;
nodes[ 0 ].parentNode.addEventListener( ... );

Skoro już ES6, to dlaczego this.createEvents nie jest napisane jako arrow function? I dalej, skoro jest to metoda jakiegoś obiektu/klasy, to dlaczego nie stworzysz class i nie zapiszesz w ten sposób:

createEvents () { ... }

http://es6-features.org/#BaseClassAccess

W ES6 jeszcze nie pływam, ale skoro budujesz jakieś API i przemycasz ES6, to może tak "po całości"? :) No chyba, że wsparcie wszystkiego nie obejmuje.

Chociaż subclassing (bo tak to się chyba nazywa?) jest zaimplementowany nawet w Microsoft Edge'u: https://kangax.github.io/compat-table/es6/

---

Dlaczego nie zastosujesz Event Delegation i nie podepniesz EventListener'a do rodzica któregoś z elementów kolekcji nodes?

1. Faktycznie to ma sens, podpiąć do rodzica. Ale, czy eventTarget mi wyrzuci to co mnie interesuje ;d/

createEvents () { ... }

Wiem o tym xD, ale zauważ, że dla starszych wersji class jest słowem zarezerwowanym xd. Tak w FF wyrzuca słowo zarezerwowane (pewnie jest i na to patent). Po drugie jest to rozwiązanie graniczne.

 this.createEvents

W sumie to szczegół w tym przypadku.

 

---

1. Faktycznie to ma sens, podpiąć do rodzica. Ale, czy eventTarget mi wyrzuci to co mnie interesuje ;d/

Zależy co Ciebie interesuje. Ustawiasz listenera na rodzica i gdy event zostanie wywołany przez któregoś jego potomka, to poprzez event bubbling otrzymasz zdarzenie, w którym pole target wskaże na element, który to zdarzenie wywołał (czyli któryś potomek). Chyba, że oczekujesz innego zachowania?

this wskazuje na obiekt, na rzecz którego wywołujesz daną funkcję/metodę - czyli gdy podpinasz listener, do jakiegoś elementu, to this wskaże na niego. Event target wskazuje natomiast na element, który wywołał zdarzenie - niekoniecznie musi to być element, do którego podpiąłeś listener. Chyba, że zbindujesz "ręcznie" this na inny obiekt.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

When attaching a handler function to an element using addEventListener(), the value of this inside the handler is a reference to the element. It is the same as the value of the currentTarget property of the event argument that is passed to the handler. 

---

Event.target wyrzuca element (tak właściwie to EventTarget), który został kliknięty, a Event.currentTarget wyrzuca element, do którego został przypięty nasłuchiwacz (dat polskie nazwy).

Jak w targecie masz jakiegoś span-a, a chciałeś aby kliknąć np. na diva  to możesz użyć Element.closest()

Powtórzę: jak już ES6 to po całości.

Answer 1

Nie dziwne, że dla NodeList metoda forEach nie jest wspierana w FF < 50, bo to właśnie od tej wersji wprowadzono forEach dla niej. [NodeList.forEach ComMDN] NodeList nie dziedziczy Array, dlatego na tablicy działa, a na NodeList już nie.

Problem można naprawić na dwa (+ jakiś milion) sposoby.

• Polyfill dla NodeList, aby obsługiwała forEach
• Zamienić NodeList na Array (Polecam). W ES6 jest takie cudo jak Array.from()

Nie rozumiem o co chodzi Ci z addEventListener :)

to już foreach jest good, ale za to addEventLister już nie, choć to węzeł (sic)

Arrow function kompatybilny jest od od dawna, ale to na Chrome i FF. Dwie najlepsze przeglądarki nadal go nie obsługują ;). Oczywiście mowa o IE oraz Opera Mini.

Najprostszy sposób na naprawę Arrow function to chyba zmiana na "normalną" (Co w JS-ie jest normalne? :)) funkcję. Jak jesteś leniwy to może to zrobić za Ciebie Babel. Nawet jak nie jesteś leniwy to Babel może Ci ułatwić życie.

Comments

Ah, faktycznie mój błąd, sprawdzałem dla tablicy. A już myślałem ,że odkryłem jakegoś buga :D

Zamienić NodeList na Array (Polecam). W ES6 jest takie cudo jak Array.from()

Przetestuje to póżniej. Faktycznie to może być rozwiązanie.

Jak zrobiłem z tego tablicę, to już nie chciał działać addEventListener, twierdził wprost, że funkcja to nie funkcja (Przypominam, że użyłem arrow function, teoretycznie nie powinno być problemu).

IE nie spodziewam, że to kiedykolwiek coś będzie obsługiwało.

Najprostszy sposób na naprawę Arrow function to function.

Kombinowałem z tym również, bind coś nie chce współpracować (w tym przypadku) albo żle określam obszary.

PS: Używam babela. Ale nie w tym projekcie ;).

 

---

Kombinowałem z tym również, bind coś nie chce współpracować (w tym przypadku) albo żle określam obszary.

Pokaż kod. 

---

To było coś takiego:

this.createEvents = function (){
                console.log("Why u dont do this? :(")
                var nodes = this.domImageSliderGroup;
              console.log(this.domSlider);
              var nodes =this.domImageSliderGroup;
              nodes.forEach(
                  function(e) {
                            node.addEventListener(
                              'click',
                              () => {
                                if (this.StartAPP){
                                  return;
                                }
 
                                this.node = e.target;
                                this.nodeID = e.target.id;
                                this.startAPP = true;
                                this.showImg.bind(this);
                                this.whichWay(node).bind(this);
                                this.run().bind(this);
 
                              }
                            )
 
                        }
              );
 
            };

 

---

Wziąłeś pod uwagę, że arrow function nie zmienia kontekstu, a zwykła funkcja tak?

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_binding_of_this

Sprawdź najpierw, czym wewnątrz function(e){ ... } jest this, a potem czym jest wewnątrz arrow.

Chociaż, w jakim celu robisz coś takiego:

this.showImg.bind(this);

Po co bindować this do czegoś, co jest polem this?

---

Bo twierdzi, że to nie funkcja. (Nie jest w tym zasięgu, sprawdza z poziomu window. Czy coś takiego). Mój błąd tam też był function(), bez żadnego arrow.

Jak skończę kolejne rzeczy. Wrócę i z ciekawości sprawdzę.

---

Na którą konkretnie funkcję wskazywał błąd "is not a function"? Zrób sobie jakąś zmienną self na początku this.createEvents, zapisz do niej this i wtedy się odnoś do self. Albo, jak wspomniałem, zmień this.createEvents na arrow to wtedy this będzie nieruszone.

Poza tym, dlaczego var a nie let/const skoro ES6 :)? Słówka deklaracji zmiennych już raczej wszędzie są wspierane (Firefox miał jakiś czas temu problem z const, więc jeśli chcesz "starsze" FFy wspierać to może stosuj wszędzie let).

---

this.show, which itd... Pokombinuje z tym coś póżniej. Czemu let/const? Po prostu one mnie nie przekonują, bądż nie znalazłem dla nich jeszcze zastosowania. A nie widzę argumentu za tym by je stosować. Const tym bardziej, wiele rzeczy tu się zmienia, zależności od kontekstu wywołania zdarzenia.

Z ciekawości dokonałem testów na IE11. Po wykonaniu 60 320 operacji xD (poważnie), w końcu ie11 ruszyła. Wygląd ok , ale API nie ruszyło co ciekawe nie jest błąd javaScript, ale błąd systemowy xD. Szkoda gadać.

O dziwo opera odrobiła zadanie domowe, działa bez zastrzeżenia. Na safarii słabiutko, ale wersja na windows jest przestarzała czyli zakładam z góry, że jest OK.

Została jeszcze androidowa przeglądarka. Na macach sprawdzę jak jakiegoś dorwę i wrzucę na hosting.