EcmaScript 6: Łączenie łańcuchowe

0:00w tej lekcji do naszej biblioteki chciałbym dodać coś co nazywa się możliwością

0:04łączenia łańcuchowego już ci pokażę o co chodzi w 74 jesteśmy

0:08i tutaj mamy elementy li chciałbym mieć taką możliwość że mogę napisać na

0:12przykład li i tutaj powiedzmy at class red ale

0:16potem po kropce chciałbym móc napisać na przykład css i tutaj font powiedzmy

0:21size ustawić na 20 pikseli czyli chciałbym po kropce móc się odwołać

0:25i to się nazywa łączeniem łańcuchowym często również można to złamać w ten sposób bo w javascripcie

0:29nie ma to znaczenia i w jquery działa to podobnie więc teraz w jaki

0:34sposób możemy to zaimplementować aby to mogło działać na przykład z metody

0:38add class która będzie operować na this musimy zwrócić to this jeżeli zwrócimy

0:43this to następnie kropka css operuje na tym naszym obiekcie this i

0:47wszystko działa poprawnie więc jak teraz takiego at class zwrócić this

0:51przejdźmy sobie tam gdzie mieliśmy at class było to w attributes i tutaj jak

0:55widzisz mamy this each czyli wykonywaliśmy pętlę na wszystkich

1:00elementach gdybym na końcu zwrócił this to to by działało poprawnie ale

1:04równie dobrze mógłby napisać tutaj return this each wtedy

1:08wykona się cały ten zapis i jeżeli metoda each coś zwraca zostanie

1:13tutaj podstawiony i to dopiero zwrócimy dalej dlatego skoro tak często korzystaliśmy

1:17z metody each zauważ że wcześniej kiedy wkleiłem kod to od razu było to

1:21już z returnami to możemy dodać to do metody each ta metoda pojawia

1:25się w iteration tutaj zauważ że ona nam wykonywała for each

1:29z naszą funkcją i na końcu wystarczy że zwrócimy this czyli jeżeli z each zwrócimy this

1:35to teraz każda metoda która korzystała z each doda

1:39sobie tylko return żeby zwracać to co zwróciło each zobaczmy jak

1:45widzisz tutaj na przykład tego nie zwracaliśmy nie będę tego robił

1:49w tym miejscu tylko konkretnie w metodzie css zrobię to na końcu return this

1:54i to co jest jeszcze ciekawe to zauważ że jeżeli na przykład będziemy pobierać właściwość css

1:59tylko jedną to wtedy nie zwrócimy this i ma to sens również przypadku jquery czyli

2:03gdybym napisał lis css i chcę tylko sobie pobrać wartość

2:07red no to tutaj nie mogę potem napisać at class bo to mijałoby się z

2:11celem dlatego że ta metoda kiedy podamy jej jeden parametr podobnie zresztą attr

2:16którą tworzyliśmy ona ma nam zwrócić jakiś string więc na stringu

2:20nie będzie metody at class i to jest jak najbardziej zrozumiałe dlatego w tym miejscu gdzie

2:24musimy zwrócić na przykład jakiś string to go po prostu zwracamy ale

2:28jeżeli operujemy na jakiejś kolekcji gdzie nic nie zwracaliśmy to

2:32na końcu najlepiej zwrócić this czyli jeżeli ten return zakończy funkcję ten się nigdy

2:37nie wykona ale jeżeli dojdziemy tutaj to zwrócimy po prostu całą tą kolekcję

2:41tak naprawdę pod this nawet nie będzie kolekcja tylko będzie po prostu nasz obiekt który

2:45na prototypie ma metody get at class i tak dalej dlatego powinno to wtedy działać

2:49poprawnie zobaczmy czy wszędzie sobie to dodaliśmy przejdźmy również do innych funkcji zauważ

2:55że tutaj też już zwracam bo wcześniej to wkleiłem return this each i tutaj przy

2:59html również już to wcześniej miałem zrobione natomiast jeżeli zwracamy wewnętrzny kod

3:04html to wtedy nie będzie tego łączenia łańcuchowego okej zobaczmy

3:08jeszcze w events tutaj też zwracałem this each więc jeżeli zastanawiałeś

3:12się wcześniej po co jest to return no to właśnie dokładnie w tym celu i teraz

3:17powinno nam to działać jeżeli wykonamy at class zobaczmy raz jeszcze at  class doda

3:21klasy dla wszystkich elementów i zwróci to co zwraca each a each zwraca nam

3:26na końcu this czyli nasz obiekt dzięki temu po użyciu at class na css możemy

3:30pracować dalej no i widzimy że faktycznie to działa po pierwsze klasa red została

3:35dodana a po drugie również style dzięki takiemu prostemu zabiegowi możemy

3:39później dużo łatwiej pracować z naszą biblioteką łącząc sobie te wywołania w takim

3:43łańcuchowy sposób