Już kilkukrotnie poruszałem temat tworzenia modułów (czasem nawet “klas”) w JavaScripcie. Tym razem coś nowego – asynchroniczne definiowanie modułów. W skrócie AMD (ang. asynchronous module definition). Coraz więcej znanych frameworków i bibliotek wykorzystuje właśnie to podejście (choćby Dojo i jQuery).

W tym wpisie spróbuję pokazać dlaczego powstało takie rozwiązanie oraz przedstawić kilka prostych zastosowań.

Na początek warto:

W Dojo Toolkit jest cały zestaw widgetów pozwalających budować bardzo nowoczesne aplikacje webowe. W ty wpisie zajmę się dwoma (spokrewnionymi) kontrolkami:

  • dijit.form.FilteringSelect
  • dijit.form.ComboBox

autouzupełnianie dijit.form.FilteringSelect

Co one robią?

Co z nimi nie tak, skoro mam zamiar im poświęcić cały wpis? Kolejno – są to komponenty zastępujące zwykły HTML-owy znacznik <select />. Są bardzo przyjazne dla oka, pozwalają nie tylko na wybór pozycji z listy dostępnych, ale także na wpisywanie własnych (mechanizm podpowiedzi), dodatkowo bardzo dobrze współdziałają z data store. Słowem – używać, nie umierać ;).

Jednak posiadają jedną dużą wadę funkcjonalną – aby rozwinąć listę trzeba kliknąć dokładnie,tylko i wyłącznie w strzałeczkę sugerującą rozwijanie.

demo online

Continue reading

Obsługa zdarzeń to jeden z częściej wykorzystywanych mechanizmów na nowoczesnych stronach WWW. Czasem jednak chcielibyśmy nie tyle przypisać pewne zdarzenie, co z poziomu JavaScript je wywołać. W tym wpisie pokażę jak to zrobić wykorzystując stare i nowe sposoby, zarówno w przeglądarkach, jak i w IE (nie wszystkie przykłady będą działać w IE. Opis, co zrobić, aby załatać tę niespójność znajdziesz na końcu wpisu).

Continue reading

Niedawno pokazałem, jak z wykorzystaniem JSMina sprawić, aby pobierane pliki JS były mniejsze. W tym wpisie pokażę, co zrobić, aby ograniczyć liczbę requestów HTTP przy ładowaniu plików JS.

Powolne ładowanie strony

Aby strona ładowała się szybciej, można zrobić dwie rzeczy:

  1. Zmniejszyć jej rozmiar – im mniej KB do pobrania, tym szybciej się to stanie.
  2. Zmniejszyć liczbę odwołań do serwera. Jedno odwołanie żądające 100KB będzie działać szybciej niż 10 żądań po pliki 10KB każdy.

W przypadku JS punkt pierwszy można rozwiązać albo pisząc krótsze skrypty (lub rezygnując z nich), albo zmniejszając rozmiar kodu wynikowego.

Continue reading

Szukając pomysłu na odpowiednie rozwiązanie zdarza się zajrzeć do cudzego kodu – na co z resztą przeważnie pozwala licencja.

Niestety, dla developera, kod JS często poddawany jest zabiegowi kompresji, przez co staje się bardzo nieczytelny. Z kolei odkodowywanie pliku zawierającego kilka tysięcy linii kodu nie jest niczym najprzyjemniejszym.

Skoro jednak automat umiał skompresować kod, to i automat powinien umieć sformatować kod ponownie do czytelnej dla człowieka wersji.

Oto ciekawe narzędzie online potrafiące szybko “uczytelnić” skompresowany kod:

Continue reading

Co zrobić, aby strona ładowała się szybciej? Sprawić, aby zajmowała mniej miejsca. Wydaje się oczywiste, a jednak bardzo wielu webdeveloperów [w tym często ja sam] ładuje internaucie pliki JS zawierające tonę komentarzy, spacji, enterów i innych białych znaków.

Dodatkowym problem jest nie tyle rozmiar strony, co mnogość requestów do serwera. 30 requestów, a każdy plik ma po 1kB danych. Jak to zmienić? W tym artykule zajmę się zmniejszeniem rozmiaru plików JS.

Continue reading

jQuery jest jedną z najpopularniejszych (i moim skromnym zdaniem) najlepszych bibliotek JS. Jej dodatkową zaletą jest to, że jest darmowa. Chciałbym dzisiaj pokazać jak banalnie łatwo jest zacząć jej używać. Zapraszam do lektury.

Załączenie biblioteki:

Istnieje kilka sposobów:

  1. Pobranie kodu ze strony projektu jQuery a następnie załączenie go jako osobnego pliku.
  2. Załączenie kodu bezpośrednio ze strony autorów.

ad 1: jeśli padnie serwer, nadal masz działającą bibliotekę, ale zajmuje ona miejsce u Ciebie na serwerze,, musisz ją pobrać itp. itd.

ad 2: dla przykładu szybkiego zastosowania będę używał tej metody – nie musisz się przejmować żadnymi ścieżkami. jednak we własnych projektach prawie zawsze używam metody 1.Continue reading