Úvod do jQuery (časť 3): Čakanie na načítanie stránky a anonymné funkcie

Reklama

jQuery je pravdepodobne nevyhnutná zručnosť moderného človeka web Developer Ktorý programovací jazyk sa učiť - Webové programovanieDnes sa pozrieme na rôzne webové programovacie jazyky, ktoré poháňajú internet. Toto je štvrtý diel zo série programovania pre začiatočníkov. V prvej časti sme sa naučili základy... Čítaj viac , a dúfam, že v tomto krátkom miniseriáli vám poskytnem vedomosti, aby ste ich mohli začať využívať vo svojich vlastných webových projektoch. V prvá časť nášho tutoriálu jQuery jQuery Tutorial – Začíname: Základy a selektoryMinulý týždeň som hovoril o tom, aké dôležité je jQuery pre každého moderného webového vývojára a prečo je úžasné. Tento týždeň si myslím, že je čas, aby sme si zašpinili ruky nejakým kódom a naučili sa, ako... Čítaj viac , pozreli sme sa na niektoré základy jazyka a ako používať selektory; v časti 2 sme prešli na metódy manipulácie s DOM Úvod do jQuery (2. časť): Metódy a funkcieToto je súčasť prebiehajúceho úvodu do série programovania webu jQuery pre začiatočníkov. Časť 1 sa týkala základov jQuery, ako ho zahrnúť do projektu, a selektorov. V druhej časti budeme pokračovať v...

Čítaj viac .

V časti 3 sa budeme zaoberať problémom, ako oddialiť jQuery, kým sa stránka nenačíta, potom sa pokúsim vysvetliť, čo sú anonymné funkcie a prečo o nich potrebujete vedieť.

Oneskorené načítanie: Ako a prečo?

Ak ste skúšali niektorý z kódov z časti 1 a 2, možno ste narazili na nejaké chyby, zvláštne správanie alebo veci, ktoré jednoducho nefungujú. Najčastejšou chybou, ktorú som zažil pri učení sa jQuery, bola chyba, že sa nenašli prvky DOM – dokonca aj keď som ich jasne videl v zdroji stránky, jQuery mi stále hovoril, že jednoducho nemôže nájsť ich! prečo je to tak?

Všetko to súvisí s poradím, v ktorom sú veci načítané prehliadačom. Najjednoduchšie je to, ak máte v prehliadači spustený skript jQuery predtým prvok DOM, ktorý hľadá, bol skutočne vytvorený, skript sa načíta ako prvý, ale neurobí nič, pretože nemôže nájsť prvok, prvok DOM sa načíta neskôr. Toto je menší problém, ak umiestnite všetky svoje skripty blízko päty, ale stále sa to môže stať.

Riešením je zabaliť vaše skripty do toho, čo sa nazýva a udalosť pripravená na dokument. To spôsobí, že priložený kód bude čakať, kým sa DOM úplne nenačíta (kým nebude pripravený). Použitie je jednoduché:

$(document).ready (function(){ //tu sa nachádza váš kód na oneskorenie. });

Existuje ešte kratší spôsob, ako to urobiť, opísaný v dokumentácia jQuery, ale dôrazne vám odporúčam použiť tento spôsob na čitateľnosť kódu.

Táto udalosť pripravená na dokumenty je ďalším dobrým príkladom anonymná funkcia, tak sa pokúsme pochopiť, čo to znamená.

Anonymné funkcie

Ak máte ako ja skúsenosti s programovaním na úrovni začiatočníkov, nápad anonymné funkcie – čo je jadrom jQuery a Javascriptu – môže byť trochu znepokojujúce. Po prvé, robí chyby v dôsledku nesúladu zložených zátvoriek pomerne často, a preto to teraz vysvetlím. Ak chcete podrobné vysvetlenie, prečo sú anonymné funkcie lepšie ako bežné pomenované funguje na technickejšej úrovni, odporúčam vám prečítať si tento pomerne zložitý blogový príspevok [Už nie Dostupné].

Doteraz ste sa pravdepodobne len stretli pomenované funkcie. Sú to funkcie, ktoré boli deklarované s názvom, a preto ich možno volať kdekoľvek inde, koľkokrát chcete. Zvážte tento triviálny príklad, ktorý pri načítaní stránky zaznamená správu do konzoly.

function doStuffOnPageLoad(){ console.log("robiť veci!"); } $(document).ready (doStuffOnPageLoad);

Je to užitočné, ak je vaša funkcia navrhnutá na opätovné použitie, ale v tomto prípade je to trochu spletité, pretože skutočne chceme, aby sa spustila iba raz, keď sa stránka načíta. Namiesto toho sa neobťažujeme definovať samostatnú funkciu a jednoducho ju deklarujeme ako parameter podľa potreby. Predchádzajúci príklad by preto bolo lepšie prepísať takto:

$(document).ready (function(){ console.log("robiť veci"); });

Možno v tejto chvíli nevidíte veľa výhod – v tomto prípade je to len o niečo menej kódu – ale ako vaše skripty napredujú v zložitosti, oceníte, že nebudete musieť preskakovať a hľadať funkciu definície. Žiaľ, pre začiatočníkov to robí veci trochu zložitejšími – stačí sa pozrieť na všetky tie zátvorky – takže ak sa vám vyskytnú chyby, nezabudnite skontrolovať nasledujúce body:

• Správny počet zodpovedajúcich zložených zátvoriek – pomáha odsadenie kódu.
• Kučeravé vs okrúhle traky.
• Príkaz uzatvárajúci sa bodkočiarkou – nie je však potrebný po uzatváracej zloženej zátvorke.

Použitie editora kódu ako napr Vznešený text 2 Vyskúšajte vznešený text 2 pre potreby úpravy kódu naprieč platformamiSublime Text 2 je multiplatformový editor kódu, o ktorom som len nedávno počul, a musím povedať, že som naozaj ohromený napriek označeniu beta. Môžete si stiahnuť plnú aplikáciu bez platenia centu... Čítaj viac môže skutočne pomôcť, pretože zvýrazní zodpovedajúce zložené zátvorky a automaticky odsadí kód za vás. Špeciálny editor kódu je skutočne nevyhnutný.

To je pre túto lekciu všetko, ale mali by ste si zvyknúť priložiť niektoré základné manipulácie DOM v udalosti pripravenosti dokumentu predtým, ako budete pokračovať, a začnite upravovať súbory v editore kódu, ak nie už Nabudúce sa pozrieme na udalosti a na to, ako sa používajú na pridanie interaktivity na stránku – napríklad prinútiť jQuery urobiť niečo, keď sa klikne na tlačidlo. Otázky alebo komentáre sú vždy vítané nižšie.