Wprowadzenie do jQuery (część 3) Oczekiwanie na załadowanie strony i anonimowe funkcje

jQuery jest niewątpliwie niezbędną umiejętnością dla współczesnego programisty WWW, którego języka programowania należy się uczyć - programowania internetowego, którego języka programowania się uczyć - programowania internetowego Dzisiaj przyjrzymy się różnym językom programowania internetowego, które napędzają Internet. To czwarta część serii programowania dla początkujących. W części 1 nauczyliśmy się podstaw… i w tej krótkiej mini-serii mam nadzieję, że dam wam wiedzę, aby zacząć z niej korzystać we własnych projektach internetowych. W pierwszej części naszego samouczka jQuery Samouczek jQuery - Pierwsze kroki: podstawy i selektory Samouczek jQuery - Pierwsze kroki: podstawy i selektory W zeszłym tygodniu mówiłem o tym, jak ważna jest jQuery dla każdego współczesnego programisty i dlaczego jest niesamowita. W tym tygodniu myślę, że nadszedł czas, aby zabrudzić sobie ręce jakimś kodem i dowiedzieć się, jak… przyjrzeliśmy się podstawom języka i jak używać selektorów; w części 2 przeszliśmy do metod manipulowania DOM Wprowadzenie do jQuery (Część 2): Metody i funkcje Wprowadzenie do jQuery (Część 2): Metody i funkcje Jest to część ciągłego wprowadzenia do serii programów internetowych jQuery dla początkujących . Część 1 obejmowała podstawy jQuery dotyczące tego, jak włączyć go do projektu oraz selektorów. W części 2 będziemy kontynuować… .

W części 3 zajmiemy się problemem opóźnienia jQuery do czasu załadowania strony, a następnie postaram się wyjaśnić, jakie są anonimowe funkcje i dlaczego musisz o nich wiedzieć.

Opóźnione ładowanie: jak i dlaczego?

Jeśli wypróbowałeś część kodu z części 1 i 2, być może spotkałeś się z błędami, dziwnym zachowaniem lub po prostu niedziałaniem. Najczęstszym błędem, jaki napotkałem podczas nauki jQuery, było to, że nie znaleziono elementów DOM - mimo że wyraźnie widziałem je w źródle strony, jQuery ciągle mi powtarzało, że po prostu nie może ich znaleźć! Dlaczego?

Wszystko zależy od kolejności, w jakiej przeglądarka ładuje rzeczy. W najprostszym przypadku, jeśli masz skrypt jQuery uruchomiony w przeglądarce przed element DOM, którego szuka, został faktycznie utworzony, skrypt najpierw się załaduje, ale nic nie zrobi, ponieważ nie może znaleźć elementu, a następnie element DOM załaduje się później. Jest to mniejszy problem, jeśli umieścisz wszystkie skrypty w pobliżu stopki, ale nadal może się zdarzyć.

Rozwiązaniem jest zawinięcie skryptów w tzw wydarzenie gotowe do dokumentu. To powoduje, że załączony kod czeka, aż DOM zostanie w pełni załadowany (aż do momentu gotowy). Korzystanie z niego jest proste:

$ (document) .ready (function () // Twój kod do opóźnienia idzie tutaj);

Jest jeszcze krótszy sposób na zrobienie tego opisany w dokumentacji jQuery, ale zdecydowanie sugeruję, abyś użył tego w celu odczytu kodu.

To wydarzenie gotowe do dokumentu jest kolejnym dobrym przykładem funkcja anonimowa, spróbujmy zrozumieć, co to znaczy.

Funkcje anonimowe

Jeśli tak jak ja masz za sobą doświadczenie w programowaniu na poziomie początkującym, pomysł anonimowe funkcje - który jest rdzeniem jQuery i Javascript - może być trochę niepokojący. Po pierwsze, robi błędy z powodu niedopasowanych nawiasów klamrowych dość często, dlatego wyjaśnię to teraz. Jeśli potrzebujesz dokładnego wyjaśnienia, dlaczego anonimowe funkcje są lepsze od zwykłych nazwanych funkcji na bardziej technicznym poziomie, sugeruję przeczytanie tego dość złożonego postu na blogu [No Longer Available].

Do tej pory prawdopodobnie tylko się zetknąłeś nazwane funkcje. Są to funkcje, które zostały zadeklarowane za pomocą nazwy i dlatego mogą być wywoływane gdziekolwiek indziej, dowolną liczbę razy. Rozważ ten trywialny przykład, który rejestruje komunikat w konsoli po załadowaniu strony.

funkcja doStuffOnPageLoad () console.log („robiąc rzeczy!”);  $ (dokument) .ready (doStuffOnPageLoad);

Jest to przydatne, jeśli twoja funkcja jest przeznaczona do ponownego użycia, ale w tym przypadku jest to trochę skomplikowane, ponieważ naprawdę chcemy, aby uruchomiła się tylko raz, gdy strona zostanie załadowana. Zamiast tego nie zawracamy sobie głowy definiowaniem oddzielnej funkcji i po prostu deklarujemy ją jako parametr w razie potrzeby. Wcześniejszy przykład byłby zatem lepiej przepisany jako:

$ (document) .ready (function () console.log („robi rzeczy”););

W tej chwili możesz nie zauważyć wielu zalet - w tym przypadku jest to tylko nieznacznie mniej kodu - ale wraz ze wzrostem złożoności skryptów zrozumiesz, że nie musisz przeskakiwać, szukając definicji funkcji. Niestety, utrudnia to nieco początkującym - wystarczy spojrzeć na wszystkie nawiasy klamrowe - w razie wystąpienia błędów sprawdź następujące punkty:

• Prawidłowa liczba odpowiednich nawiasów klamrowych - pomaga wcięcie kodu.
• Nawiasy klamrowe kontra okrągłe.
• Zamykanie instrukcji średnikiem - ale niepotrzebne po zamykającym nawiasie klamrowym.

Korzystanie z edytora kodu, takiego jak Sublime Text 2 Wypróbuj Sublime Text 2 do wieloplatformowych potrzeb w zakresie edycji kodu Wypróbuj Sublime Text 2 do swoich wieloplatformowych potrzeb do edycji kodu Sublime Text 2 to wieloplatformowy edytor kodów, o którym niedawno słyszałem, i muszę przyznać, że jestem pod wrażeniem pomimo wersji beta. Możesz pobrać pełną aplikację bez płacenia ani grosza… może naprawdę pomóc, ponieważ wyróżnia odpowiednie nawiasy klamrowe i automatycznie wcina kod dla Ciebie. Dedykowany edytor kodu jest naprawdę niezbędny.

To jest koniec tej lekcji, ale powinieneś przyzwyczaić się do zamykania niektórych podstawowych manipulacji DOM w zdarzeniu gotowości do dokumentu przed przejściem i rozpocząć edycję plików w edytorze kodu, jeśli jeszcze tego nie zrobiłeś. Następnym razem przyjrzymy się zdarzeniom i sposobom, w jaki służą one do dodawania interaktywności do strony - na przykład sprawiają, że jQuery robi coś po kliknięciu przycisku. Pytania lub komentarze są zawsze mile widziane poniżej.