Nowy Standard JavaScript
10 godz. 43 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperNa początku dowiesz się jakie nowości pojawiły się w języku, jeśli chodzi o tworzenie zmiennych i stałych. Poznasz dwa nowe słowa let i const, a także dokładnie omówimy ich różnice, względem znanego nam do tej pory słowa var. Następnie poruszymy temat obiektów. Zobaczysz jak nowy zapis pozwoli znaczenie ułatwić nam pracę i sprawić, by kod był bardziej czytelny. W kolejnym rozdziale porozmawiamy o zmianach w funkcjach. Poznasz tzw. arrow functions wraz z poradami, kiedy z nich korzystać, a także z konsekwencjami ich użycia. Zobaczysz również, jak korzystać z domyślnych parametrów. Następną nowością będą operatory rest i spread, które znacząco uproszczą pisanie kodu dla funkcji i tablic. Chwilę później rzucimy okiem na bardzo ciekawy temat, mianowicie na tzw. destructuring. To nowa funkcja języka, która pozwala w łatwy sposób wyciągnąć odpowiednie dane z tablic i obiektów, nawet jeżeli te posiadają kilkupoziomową, zagnieżdżoną strukturę. Zmian doczekały się również ciągi znaków. Poznasz nowy zapis, tzw. template string, a także możliwość wykorzystania funkcji tagujących.
ES6 wprowadza do języka JavaScript zapis klas. I choć na początku wydaje się, że to duży krok w stronę klasycznych obiektowych języków programowania, to jak się przekonasz, jest to w dużej mierze tzw. syntactic sugar, a więc zupełnie nowy, prostszy zapis, a prawie identyczne jak wcześniej działanie, oparte na dziedziczeniu prototypowym. W kursie poruszymy również temat Symboli oraz tego jak z nimi pracować, a chwilę później poznasz iteratory. To konstrukcje ułatwiające iterację, które znacząco upraszczają pracę z kolekcjami danych. Wraz z iteratorami poznasz również generatory, które ułatwiają z kolei tworzenie tych iteratorów. Istotną nowością w ES6 są również natywne Promise. To sposób na rozwiązanie problemu asynchroniczności, który znamy od bardzo dawna w postaci różnych bibliotek. Od teraz jednak Promisy znajdują się bezpośrednio w języku. Nowymi konstrukcjami, które pozwalają pracować z kolekcjami danych, są Map i Set. Dowiesz się jak z nich korzystać, a także do czego są przydatne. W jednym z rozdziałów rzucimy też okiem na tzw. Proxy API. To mechanizm języka, który pozwala na dość niskopoziomowy dostęp do różnych operacji. I choć być może nie jest to coś, z czego będziesz korzystał nad wyraz często, to warto wiedzieć, jakie są nowe możliwości tego API.
Jedną z najlepszych nowości, która zawitała do języka JavaScript wraz z ES6 są moduły. To możliwość dzielenia kodu na wiele plików, z których można pewne wartości wyeksportować, a następnie zaimportować je w innych modułach. Tutaj dowiesz się wszystkiego, co z modułami związane. Zobaczysz wiele sposobów na eksport i import, a także jak pracować z modułami w przeglądarkach internetowych. Kurs skupia się na omówieniu wszystkich najważniejszych nowości w ES6, dzieląc je na rozdziały. Jeden z nich natomiast, poświęcony został omówieniu mniejszych zmian, które znalazły się w specyfikacji. Poznasz w nim np. nowe metody tablic czy ulepszoną współpracę z Unicode.
Specyfikacja EcmaScript 2015 wprowadziła naprawdę bardzo wiele zmian, ale jej twórcy założyli, że od tego czasu każda kolejna wersja specyfikacji będzie pojawiać się co roku. Oznacza to przede wszystkim, że nie będziemy na raz bombardowani aż tak wieloma zmianami, jak w 2015 roku. W tym kursie nie zabrakło zatem omówienia nowości ze specyfikacji ES2016 oraz 2017, gdzie poznasz np. nowe metody dla stringów czy funkcje asynchroniczne.
Kiedy będziesz już uzbrojony w solidną wiedzę z zakresu nowości w ES6, dowiesz się jak w praktyce pracuje się dzisiaj z tym standardem. W jednym z rozdziałów omówimy nowoczesny workflow z użyciem npm i wykorzystamy popularne narzędzie webpack, do pracy z modułami, a także do transpilowania kodu ES6 do wersji ES5. Dzięki temu nowoczesny kod, który napiszemy, będzie mógł być uruchamiany również w starszych przeglądarkach, które nie wspierają najnowszego standardu. Dowiesz się na co zwrócić uwagę, by wszystko działało bez zarzutu.
Zwieńczeniem tego kursu będzie praktyczny projekt, w którym od podstaw wykonamy swoją własną bibliotekę do pracy z Obiektowym Modelem Dokumentu. Będzie ona w działaniu nieco podobna do znanej chyba wszystkim biblioteki jQuery. Na tym przykładzie postaramy się wykorzystać jak najwięcej wiedzy z zakresu ES6 zdobytej wcześniej. Stworzymy metody do pracy z drzewem dokumentu, a więc do wyszukiwania elementów, do tworzenia nowych, do przypisywania im klas, atrybutów czy styli CSS. Nie zabraknie również modułu odpowiedzialnego za współpracę z Ajax. Cały kod utworzymy oczywiście w sposób modułowy, aby bibliotekę można było łatwo rozwijać w przyszłości. Na koniec projekt ten przetranspilujemy do kodu ES5 z użyciem Babel i przetestujemy w starszej przeglądarce Internet Explorer 11, aby upewnić się, że nasza biblioteka działa poprawnie.
Kurs ten jest dla wszystkich osób, które znają już język JavaScript i czują się w pracy z nim swobodnie. Jeśli zatem chciałbyś pracować z nowoczesnym kodem JavaScript, to ten kurs jest zdecydowanie dla Ciebie. A może masz zamiar poznać framework Angular lub bibliotekę React? Tam również wykorzystywany jest najnowszy zapis ES6, więc wiedza ta będzie naprawdę pomocna. Z solidną wiedzą z zakresu EcmaScript 6, bez trudu pozostaniesz na bieżąco z każdą kolejną edycją tej specyfikacji.
w tej lekcji dodamy sobie do naszej biblioteki jeszcze ostatnio rzecz a będzie nią
możliwość pracy z ajax będziemy wykorzystywać promise który poznałeś już w tym kursie więc
nie powinno tutaj być zupełnie nic nowego i pokażę ci od razu co chciałbym zrobić
przejdziemy sobie do index html i zauważ że tutaj dodałem do naszej strony
element pre z id pre 75 oraz przycisk wyślij
zapytanie i teraz będę chciał zrobić tak żeby po kliknięciu w przycisk wysłać
sobie ajaxa który musimy na razie dopiero utworzyć na naszej klasie ale
zauważ że od razu w test za pomocą naszej biblioteki wyszukuje
sobie przycisku button 75 i utworzony już przez
nas metodą plik przypisuje mu funkcje i chciałbym zrobić tak że po kliknięciu
na equery będzie mieli metodę get która pozwoli nam wysłać zapytanie
i teraz żeby się tutaj nie pomylił bo dodawaliśmy sobie do naszej klasy tutaj
metodę get ale jest to metoda dostępna na prototypie czyli konkretnie na
elementach natomiast tutaj chciałbym mieć metoda get dostępną bezpośrednio
na klasie czyli coś w rodzaju statycznej metody ona ma zwrócić promise
i za pomocą then będziemy chcieli na stronie w tym pre wyświetlić dane a jeżeli
wystąpił błąd to będziemy chcieli wyświetlić komunikat o tym błędzie czyli sam ten zapis kojarzysz
bo pracowaliśmy już z promisami natomiast musimy sobie utworzyć w ogóle taką
metodę get żeby utworzyć metody do pracy z ajax to będę chciał je dodać
tutaj do library ajax js dlatego utwórzmy sobie nowy plik 75
start js library i będzie to ajax js
w ten sposób i tutaj będziemy robić export default dokładnie
tak samo jak robiliśmy wcześniej i tutaj będziemy mieli pewne metody skoro
one będą tutaj to będziemy je mogli zaimportować innym miejscu ale
co ciekawe one nie będą dodane do prototypu więc nie będę ich importował w tym miejscu
i dodawał tutaj mixinę mam nadzieję że rozumiesz o co chodzi otóż nie chcę
na takim przycisku jeśli bym go znalazł mieć metody ajaxowej bo
wtedy musiałbym ją dodać do prototypu chcę mieć bezpośrednio na equery natomiast
warto się skupić na sekundę na tym czym jest dla nas equery można się tutaj
pomylić dlatego że equery mamy tutaj jako klasę i wydawałoby
się że jeśli dodam metodę statyczną to wtedy będziemy mieli do niej dostęp ale
zauważ że w tym przypadku equery ta klasa w tym module jest prywatna a my
w main tak naprawdę equery ustawiamy na funkcje init czyli
dlatego że ja sobie tak to zrobiłem to w momencie kiedy będę tutaj pisał equery
get to tak naprawdę muszę mieć get dodane na funkcji init która
jest w tym miejscu dlatego musiałbym sobie tutaj napisać init get i to będzie
jakaś funkcja ajaxowa dokładnie to będziemy chcieli zrobić teraz za
pomocą nowej mixiny którą utworzymy i przejdziemy sobie do pliku mixin który
mieliśmy już wcześniej i utworze sobie mixinę statyczną wkleję teraz tutaj
jej gotowy kod zobacz nazwałem ją static mixin
i ona będzie tutaj przyjmować jakiś obiekt może to być funkcja to
nie ma znaczenia i następnie tak jak wcześniej mixiny i do tego obiektu będę chciał
to dodać oraz chcę ten obiekt zwrócić zapiszę sobie zatem ten plik
jest to mixin i przejdziemy do pliku main i na samej górze gdzieś
tutaj na przykład będziemy chcieli tą mixinę zaimportować a więc import i napiszmy
sobie tutaj static mixin from
zobaczmy jaka tutaj będzie ścieżka żeby to było poprawne
mamy tutaj static mixin jesteśmy w katalogu main więc
musimy wejść do utils mixins w ten
oto sposób będzie mieli static mixin i na przykład w tym miejscu będę chciał ją wywołać
static mixin i teraz chcę do funkcji init
dodać to co przekażemy w tym miejscu czyli mam nadzieję że teraz ma
to sens skoro chciałbym właśnie mieć na tej funkcji init która jest pod equery
tak naprawdę metodę get to muszę ją sobie dodać za pomocą tej static mixin
stąd czyli jeżeli tutaj będzie metoda get zaraz ją uzupełnimy
to musimy sobie ten ajax zaimportować tutaj w main więc
napiszmy sobie może gdzieś tutaj wyżej import
ajax czyli ten defaultowy from
i tutaj znowu będziemy musieli się odwołać do katalogu library ajax
js będę zatem pod ajax miał dokładnie ten obiekt i
jego będę mógł przekazać tutaj na dole do static
mixin czyli napiszę po prostu ajax mógłbym tutaj podać jeszcze więcej innych modułów każdy
z nich zostałby przypisany bezpośrednio do init dzięki czemu moglibyśmy potem tutaj na
equery kropka korzystać z jego metod pozostaje zatem ostatnia
kwestia czyli uzupełnienie sobie tych metod tutaj w ajax natomiast upewnijmy się że
w ogóle to działa czyli tutaj gdzie mamy get napiszmy po prostu console
log get odświeżmy i wyślijmy zapytanie
widzimy że get się pojawiło a potem mamy błąd bo nie zwróciliśmy promise niemniej
jednak w ten sposób mam nadzieję że jasny sposób to wyjaśniłem przypisaliśmy sobie
metody statyczne nie bezpośrednio do klasy ale do tej funkcji init którą
tak naprawdę eksportujemy no i tutaj być może można byłoby to rozwiązać inaczej ja
zrobiłem to w ten sposób dlatego pokazuje ci mój tok myślenia każdą metodę
statyczną którą będę chciał dodać będę tu mu podawać w formie modułu który sobie tutaj
za importuje uzupełnimy sobie zatem teraz tego ajaxa ja
już wkleję tutaj gotowy kod który też możesz wkleić z plików źródłowych lub po prostu sobie
go przepisać zaczniemy od funkcji get xhr która nam się przyda
i co ciekawe zrobimy tak że ona tutaj będzie lokalna dlatego modułu nie eksportujemy
jej i zobacz że w niej robię coś takiego że kiedy ją wywołam i podam typ na przykład get lub
post url utworzę nowy obiekt xml http request i
tworzę nową promise robiliśmy to już tym kursie więc nie ma nic nowego i kiedy
uda nam się wczytać taki takie zapytanie robię resolve przekazując wynik
zapytania jeżeli się nie uda to przekazuję błąd w ten sposób i jeżeli
będzie on error na przykład połączenie sieciowe się nie nawiąże to również będę chciał
przekazać błąd do reject zauważ że później otwieram
sobie takie pytanie poprzez xhr open i z tej funkcji get xhr zwracam
obiekt xhr i p korzystam tutaj z tego zapisu w es6 żeby nie musieć
pisać że xhr ma być pod kluczem xhr i p pod p to można zrobić
ten skrócony zapis czyli to jest o tyle istotne że mam taką funkcję i teraz
gdziekolwiek wywołam sobie funkcję get xhr to ona mi wszystko poustawia
I zwróci mi gotowy obiekt do którego mogę jeszcze coś dodać i później na przykład zrobić
na nim send dlatego tutaj będziemy chcieli sobie dodać te wspomniane wcześniej metody
jak na przykład get która będzie przyjmować url i będzie
mogła sobie zrobić tutaj coś w rodzaju var na przykład xhr
równa się get xhr mówiąc że ma tu być zapytanie
typu get i przekazując ten adres url i tutaj mogę sobie z tym zrobić już dowolne rzeczy
więc ta funkcja nam się przyda po prostu w kilku innych funkcjach dlatego dałem ją sobie osobno
i ona jest lokalna nie eksportujemy jej żaden sposób więc będę
chciał teraz tutaj już sobie wkleić gotowy kod dla get będzie
to prosta metoda wyglądająca następująco chcę sobie zrobić destructuring zauważ że
tutaj zwracaliśmy sobie xhr i p więc mogę utworzyć dwie stałe
xhr i p które zostaną zwrócone właśnie z get xhr o takich
parametrach czyli to mi zwróci obiekt i tutaj sobie utworze dwie stałe które lokalnie
już mam więc destructuring nam się tutaj przydał no i teraz po prostu chciałbym wysłać
to za pytanie za pomocą xhr send a stąd zwrócić p a pamiętaj że
pod p mamy po prostu promise skoro nasze get zwraca promise to
tutaj po wykonaniu się get będę miał dostęp do promise poprzez then
i catch zauważ że zrobiłem get przekazując url czyli
on dokładnie wpadł w to miejsce i wszystko nam to powinno w ten sposób fajnie działać
więc po prostu sprawdźmy czy ma to sens wysyłam zapytanie czekamy
chwilę i jak widzisz wszystko się udało więc w ten sposób stworzyliśmy sobie moduł ajaxa
który ma metodę get natomiast chciałbym stworzyć jeszcze metodę post która
pozwoli wysyłać dane do serwera i tutaj wkleję gotowy kod na
którym będziemy chcieli to dane wysłać więc ja sobie to wykomentuje i pod
spodem wkleję zapytanie post chciałbym żeby
to wyglądało w ten sposób że mamy znowu metodę statyczną post której przekazujemy adres
ale jako drugi parametr możemy przekazać obiekt który zostanie odpowiednio zserializowany i
wysłany do serwera przygotowałem pod tym adresem taki prosty skrypt który
będzie nam odsyłał to co mu przyślemy więc będziemy mogli sprawdzić czy poprawnie odczytuje przesyłane
przez nas dane więc będziemy chcieli je później móc wyświetlić jest to zatem metoda
post i tę metodę sobie teraz dodamy w tym miejscu dzięki temu że utworzyłem
get xhr osobno to będę mógł sobie tutaj pracować w dużo
czystrzy sposób bo tylko taki get xhr z parametrem posts będę
tutaj przekazywał więc znowu sobie będę chciał wkleić taką metodę ok
url i data zauważ że dokładnie to zrobiliśmy przekazaliśmy url a
jako drugi parametr data i to nam wpada tutaj znowu sobie pobieram xhr
i robię destructuring tym razem jest to post i to co jest ważne mogę teraz
na tym obiekcie ustawić sobie request header content type na application
tutaj x www form url encoded to jest potrzebne żeby serwer
na przykład php wiedział w jakim formacie przesyłamy do niego dane i teraz
chcę do niego przesłać dane za pomocą send tutaj robiliśmy send pusty bo
przy gecie nie przesyłamy danych ale przy post możemy podać dane w tym przypadku
w formie stringu bo tutaj powiedziałem że ma to być właśnie taki url encoded
dlatego muszę te dane przekazane mi jako obiekt jest to javascriptowy
obiekt zamienić na taki zserializowany string dlatego będę chciał sobie utworzyć
metodę serialize i teraz gdybym chciał żeby ona była dostępna dla wszystkich jako
statyczna metoda też mógłbym ją dodać do naszej funkcji natomiast ja
chcę żeby ona była tylko dla mnie dostępna dlatego utworze ją sobie w katalogu
utils i tutaj może utworzymy sobie katalog ajax zróbmy
to sobie zatem examples 75 start js
utils i napiszmy ajax tutaj mogły być różne funkcje
pomocnicze dla ajaxa więc będę chciał tutaj zrobić export i może
po prostu wkleję gotową funkcję ona
tutaj jeszcze będzie sobie importować is object z naszego check będzie mi to zaraz potrzebne
zauważ jak to wszystko ładnie składa się w całość w check mamy coś takiego co sprawdza nam czy parametr
jest obiektem to mi się tutaj przyda natomiast sama funkcja serialize otrzyma data
w naszym przypadku na przykład taki obiekt i chciałbym przeiterować i dla
każdego klucza zrobić klucz równa się wartość później taki and klucz
równa się wartość ale żeby to było poprawne to trzeba to jeszcze przepuszczać
przez funkcję wbudowaną w javascripcie która nazywa się encode uri component
i skoro tutaj zauważ kilka razy z niej korzystam to zapisałem sobie ją w pomocniczej
stałej e czyli tutaj najważniejsze jest to że sprawdzam
czy to co ktoś przekazał jest obiektem w tym przypadku jest to obiekt gdyby
to nie był obiekt to od razu chcę zwrócić pusty string czyli w output mam string i chcę go zwrócić
natomiast jeżeli jest to obiekt iteruje po wszystkich jego elementach za
pomocą key object keys jeżeli zrobisz object keys na
dowolnym obiekcie to zostanie ci zwrócona tablica z kluczami czyli
w tym przypadku mielibyśmy tablice gdzie by było first name i last name i ja sobie metodą
czy pętlą for of iteruje po tej tablicy wiemy że na tablicach
taka pętla for of działa a to mi zwraca tablicę i następnie do output
chciałbym dodać właśnie klucz czyli na przykład chciałbym w tym output mieć coś
takiego first name następnie równa
się tylko zauważ że to first name czyli key przepuszczam przez encode uri component bo
tak powinniśmy to robić żeby były to poprawne adresy żeby specjalne znaki zostały zamienione
równa się i tutaj chciał mieć wartość taką jak na przykład mieliśmy tutaj
czyli Jan więc chciałbym tutaj mieć Jan następnie
mielibyśmy na przykład and last name równa się kowalski
generalnie to zrobi ta funkcja ale te wartości first name czy Jan przepuści przez
encode uri component zauważ że na końcu
zawsze dodaje and więc nasz string w tym miejscu będzie
już poprawny gdybyśmy zrobili console log możesz to sobie zrobić ale będzie miał jeszcze and
na końcu jedno niepotrzebne więc skoro ono nie jest mi potrzebne to metodą slice
0 minus 1 go wytnę bo jest to metoda na stringach gdybym napisał piotr
and i następnie slice 0 minus 1
to wytniemy sobie ostatni znak więc mam nadzieję że ta funkcja pomocnicza serialize
też ma sens i teraz musimy sobie ją zaimportować z ajax js
właśnie tutaj więc zróbmy sobie to na samej górze import serialize
from znowu zerkamy sobie jaka jest
ścieżka w tym przypadku jesteśmy tutaj więc 1 katalog do góry i do utils a więc
1 katalog do góry utils ajax js jak widzisz bardzo
fajnie nam się to wszystko układa dzięki temu ta metoda powinna działać poprawnie i teraz
po kliknięciu w ten przycisk wyślemy zserializowane dane do serwera zaraz
pokażę ci jak one wyglądają zobaczmy wyślij zapytanie udało
się i serwer odesłał nam taką oto odpowiedź otrzymałem następujące dane i tutaj
jest taka oto tablica czyli te dane poprawnie w php na po stronie serwera udało
się odebrać natomiast gdybyśmy tutaj chcieli zobaczyć jak to zapytanie
wygląda mogę na nie kliknąć przejść tutaj i zobaczymy
co my wysłaliśmy mamy formdata jako Jan Kowalski ale jeżeli kliknę view-source
to to jest dokładnie ten strój Przesłaliśmy na serwerach które udało
nam się za pomocą metody Siri alise utworzyć Jak
zatem widzisz dodanie statycznych me to też nie jest takie trudne to daliśmy sobie dwie
statyczne metody do pracy z ajaksem Moglibyśmy pogadać kolejne metody takie
jak na przykład get Jason i tak dalej Natomiast ja już nie będę tego robił ale
widzisz w jaki sposób moglibyśmy to rozwijać dokładnie w tym pliku poza
tym wszystko Jeżeli chodzi o naszą bibliotekę i w lekcji kolejnej będę chciał ci pokazać jak ją przetranspilować
do es5 a także sprawić żeby ona pracowała z modułami
umd a co to jest zobaczysz w lekcji kolejnej