Istnieją takie aspekty języka, których w wielu przypadkach wpływ na działanie kodu jest wręcz niezauważalny, a przez to ich znajomość nie jest niezbędna do napisania nawet bardziej złożonych aplikacji. Zdarzają się jednak takie sytuacje, kiedy, widząc błąd, robimy okrągłe oczy, a z naszych gardeł wydobywa się głuche WTF
i, jeśli nie jesteśmy świadomi ogromu swej niewiedzy, pada po chwili: Znalazłem błąd w silniku przeglądarki!
. Co gorsza, najczęściej na rozwiązanie takiego problemu potrzeba sporo czasu i nerwów.
Spośród listy tematów do opracowania wybrałem pierwsze 3, które moim zdaniem zgrabnie się łączą. Są to zasięg (scope), hoisting (widziałem tłumaczenie do wyniesienie
, ale brzmi strasznie) oraz deklaracje funkcji (function declaration – dalej: FD) i wyrażenia funkcyjne (function expression – dalej: FE). Mam nadzieję, że rozjaśnienie tych tematów pozwoli zaoszczędzić komuś trochę czasu :).
Artykuł będzie składał się z dwóch części. Tę część poświęciłem typom zasięgu oraz domknięciom. Następna będzie dotyczyła (edit: już jest dostępna) hoistingu i funkcji.
Sprawdź się!
Na początek niekrótki zestaw krótkich testów. Spróbuj rozpoznać co wydrukuje każdy console.log. Skrypt z wszystkimi pytaniami, wraz z odpowiedziami wrzuciłem na Gista.
Cz.1.
var a = 1; for (var a = 0; a < 10; ++a) {} console.log('1.1:', a); { var b = 1; } console.log('1.2:', b); var c_fn = function () { var c = 1; }; c_fn(); console.log('1.3:', c);
JavaScript po polsku
Przypadkiem zacząłem na forumweb.pl zbierać zagadnienia związane z JavaScriptem, o których nic jeszcze po polsku nie napisano, bądź napisano niewystarczająco dużo. Na razie mam 8:
- hoisting i function declaration vs definition,
- function and block scope + closures,
- dziedziczenie – zaległa część serii o obiektowym JavaScriptcie (cz.1., cz.2.),
- setTimeout vs setInterval – najpewniej pokusiłbym się o tłumaczenie artykułu Johna Resiga z dodatkowymi wstawkami np. o
requestAnimationFrame, - CORS lekarstwem na SOP (artykuł Kamila Brenka) – z uwydatnieniem tego który serwer musi odpowiednio odpowiadać oraz opisem preflighted requests,
- EcmaScript Harmony i JavaScript 1.8,
- obsługa klawiatury – ze zwróceniem na przytrzymywanie i powtarzanie,
- typ
Number– dlaczegoMath.pow(2, 53) == Math.pow(2, 53) + 1? :)
Mam wielką ochotę napisać na każdy z tych tematów. Boję się może jedynie dziedziczenia, którego sprawa jest na tyle kompleksowa, że praca nad artykułem mogłaby mnie wessać na wieki :). Cierpię jednak na chroniczny brak czasu, więc zachęcam również innych do podejmowania powyższych tematów. Do każdego mam już w głowie przygotowany krótszy, bądź dłuższy konspekt, którym mogę się podzielić.
Interesuje mnie również, czy macie pomysł na inne tematy, których opracowań brakuje w polskim internecie. Gdyby też jakieś z powyższych zagadnień było już w stopniu wystarczającym opisane po polsku proszę o komentarze. Nie ma się co powtarzać.
DevCamp
Chciałbym zacząć od tego, że pojawiły się już pierwsze podsumowania researchów, jakie wykonaliśmy na DevCampie o ServerSide JavaScript (Node, v8cgi, RhinoJS). W tej chwili dostępnych jest 5 (z 22) tematów:
- Testy wydajności środowisk (CPU oraz I/O)
- Testy systemów generowania szablonów
- Protokoły
- Pisanie bezpiecznego kodu
- Zabezpieczanie kodu źródłowego
Czym w ogóle był DevCamp?
20 doświadczonych developerów spotkało się, by przebadać kwestie związane z praktycznym zastosowaniem JavaScriptu. Opracowaliśmy 18 tematów, zaimplementowaliśmy 4 różne wersje Twittera oparte o różne technologie ServerSide JavaScript. Prawie 40 godzin kodowania, kilka tysięcy commitów do repozytorium
Od siebie mogę dodać, że to były bardzo pobudzające 3 dni, podczas których wiele się nauczyłem. Rzadko ma się okazję spotkać tylu świetnych programistów JavaScript (i developerów w ogóle) i posłuchać co mają do powiedzenia.
Mając do dyspozycji całe 3 dni pierwsze dwa poświęciliśmy na typowy research, a trzeci na podsumowujące implementacje twitterów (miało nie być czata, a wyszedł norealtime’owy czat ;). Research podzielony był na 5 tematów: wydajność, bezpieczeństwo, bazy danych, integracja (middleware, middle-end, obsługa protokołów itp.) i projekty (organizacja kodu, hosting, testowanie itp.). Pierwszy jest oczywiście chwytliwy i nie brakowało na niego chętnych, następne dwa mnie mniej interesowały, a skupić postanowiłem się na dwóch ostatnich. Prace nad nimi natchnęły mnie do napisania artykułu i oto właśnie on.
Middle-end
Aby się nie powtarzać, pozwolę sobie zacytować siebie samego z nieopublikowanego jeszcze (już opublikowanego) podsumowania jednego z DevCampowych tematów:
Rozwiązałem dzisiaj zupełnym przypadkiem dwa problemy związane z niedorozwinięciem CSS-a na jakie trafiam co jakiś czas. Istnieje pewne prawdopodobieństwo, że komuś przyda się moje rozwiązanie, więc o to i ono.
Miałem dzisiaj za zadanie stworzyć typowe drop-down menu rozwijające się po najechaniu. Typowa sytuacja. Ze względów estetycznych otwieranie pozycji powinno się animować, a ze względów UX nie powinno zwijać się od razu po zjechaniu myszką, bo przecież nikt tego nie lubi. Z lenistwa też, niechęci do scriptaculousa i możliwości wymuszenia przeglądarki postanowiłem wszystko zrobić za pomocą CSS transitions. Załóżmy, że stworzyłem sobie taki kod HTML:
<ul id="menu"> <li> <span>Kaczka</span> <ul> <li>dzióbek</li> (...) </ul> </li> <li> <span>Donald</span> <ul> (...) </ul> </li> (...) </ul>
Kto nie był w zeszłym roku na konferencji Front Trends ten, czytając świetne recenzje jakie dostała, na pewno tego żałował. Sam byłem w Warszawie i wiem, że dobrze zainwestowałem swój czas i pieniądze, bo to jedyne tego typu wydarzenie w Polsce, jakie pamiętam. Wystarczy spojrzeć na listę prelegentów, którzy wzięli udział w konferencji. Douglas Crockford, Tantek Çelik, Peter-Paul Koch to bez wątpienia gwiazdy, których przedstawiać nie trzeba. Jednak bardzo dobre wrażenie zrobili na mnie również mniej znani prelegenci, jak Christian Johansen, Zbigniew Braniecki (jako moderator panelu dyskusyjnego), czy Andrea Giammarchi.
Jedyny zarzut (poza drobnymi problemami organizacyjnymi i kilkoma odstającymi poziomem prelegentami), jaki słyszałem w stosunku do zeszłorocznej konferencji to zbyt małe nastawienie na JavaScript. W tym roku Damian Wielgosik i Paweł Czerski, twórcy Front Trends, postanowili wyjść na przeciw krytykom i już za 2 tygodnie, w dniach 18-20 maja w Warszawie odbędzie się konferencja i 2 dni warsztatów pod nazwą Falsy Values. Tym razem, z pewnością, będzie to „True JavaScript Event”. W dodatku obsada zapowiada się jeszcze ciekawiej i równiej. Nie dość, że gościć będą wszyscy wielcy z Front Trends (poza PPK-em), to spotkać będzie można również kilku nowych, dobrze znanych, developerów, m.in. Dmitry’a Soshnikova, Juriy’a „kangax” Zaytseva oraz Kornela „porneL” Lesińskiego.