Bevezetés a jQuery-be (3. rész): Várakozás az oldal betöltésére és névtelen funkciók

Hirdetés

A jQuery vitathatatlanul alapvető készség a modern emberek számára webfejlesztő Mely programozási nyelvet kell megtanulni - Webes programozásMa áttekintjük a különféle internetes programozási nyelveket, amelyek táplálják az internetet. Ez a kezdő programozási sorozat negyedik része. Az 1. részben megtanultuk a ... Olvass tovább , és ebben a rövid mini-sorozatban remélem, hogy tudást fog adni neked, hogy elkezdje felhasználni azt saját webprojekteiben. Ban,-ben a jQuery bemutatónk első része jQuery bemutató - Az első lépések: Alapok és választókA múlt héten arról beszélt, hogy mennyire fontos a jQuery minden modern webes fejlesztő számára, és miért fantasztikus. Ezen a héten azt hiszem, itt az ideje, hogy megtisztítsuk kezünket valamilyen kóddal, és megtanuljuk, hogyan ... Olvass tovább , megvizsgáltunk néhány nyelvi alapot és a szelektorok használatát; a 2. részben továbbmentünk a DOM manipulálásának módszerei Bevezetés a jQuery-be (2. rész): Módszerek és funkciókEz része a jQuery web programozási sorozat kezdő bevezetésének. Az 1. rész ismerteti a jQuery alapjait annak bevonásával a projektbe, és a választókat. A 2. részben folytatjuk ...

Olvass tovább .

A 3. részben foglalkozunk azzal a problémával, hogy miként lehet késleltetni a jQuery alkalmazást, amíg az oldal betöltődik, majd megpróbálom elmagyarázni, hogy mi az anonim funkció és miért kell tudni róluk.

Késleltetett betöltése: Hogyan és miért?

Ha kipróbálta az 1. és 2. rész valamelyik kódját, akkor valószínűleg találkozott hibákkal, furcsa viselkedéssel vagy egyszerűen nem működő dolgokkal. A jQuery tanulása során a leggyakoribb hiba az volt, hogy a DOM elemek még nem is megtalálhatók bár nyilvánvalóan láttam őket az oldal forrásában, a jQuery folyamatosan azt mondta nekem, hogy csak nem találja őket! Miért van az, hogy?

Nos, mindaz annak a sorrendnek a köze, amelyben a böngésző betölti a dolgokat. A legegyszerűbb, ha a jQuery szkript fut a böngészőben előtt a keresett DOM elem valóban létrejött, a szkript először betöltődik, de nem tesz semmit, mert nem találja az elemet, akkor a DOM elem később betölti. Ez kevésbé jelent problémát, ha az összes szkriptet a lábléc közelébe helyezi, de ez mégis megtörténhet.

A megoldás az, ha a szkripteket az úgynevezett a-ba csomagolják dokumentum kész esemény. Ez a mellékelt kódot várja meg, amíg a DOM teljesen betöltődik (amíg meg nem jelenik kész). Használata egyszerű:

$ (dokumentum) .ready (function () { // a késleltetett kódod itt megy. });

Ennek egy még rövidebb módja van a jQuery dokumentáció, de határozottan azt javaslom, hogy ezt használja a kód olvashatóságához.

Ez a dokumentumra kész esemény egy jó példa egy névtelen funkció, próbáljuk megérteni, hogy ez mit jelent.

Névtelen funkciók

Ha én, mint én, van néhány kezdő szintű programozási tapasztalata az öved alatt, az ötlet névtelen funkciók - ami alapvető a jQuery és a Javascript számára - kissé zavaró lehet. Egyrészt a nem megfelelő illeszkedő kapcsok miatt hibákat okoz, ezért ezt magyarázom el most. Ha átfogó magyarázatot szeretne kapni arról, hogy miért jobbak az anonim funkciók, mint a rendes elnevezés technikai szinten működik, azt javasolnám, hogy olvassa el ezt a meglehetősen összetett blogbejegyzést Elérhető].

Eddig valószínűleg csak találkozott megnevezett függvények. Ezek olyan funkciók, amelyeket névvel deklaráltak, és így bárhol máshol meghívhatók, ahányszor csak akarod. Fontolja meg ezt a triviális példát, amely üzenetet jelent a konzolba az oldal betöltésekor.

doStuffOnPageLoad () függvény { console.log ("dolgokat csinálni!"); } $ (dokumentum) .ready (doStuffOnPageLoad);

Ez akkor hasznos, ha a funkciót újbóli felhasználásra tervezték, de ebben az esetben ez olyan jellegű, mint a vívmány, mivel csak igazán szeretnénk, ha az oldal betöltése után egyszer bekapcsol. Ehelyett nem zavarjuk a külön függvény meghatározását, hanem csak paraméterként deklaráljuk azt, amikor és amikor szükséges. Az előző példát ezért jobban kellene átírni, mint:

$ (dokumentum) .ready (function () { console.log ("dolgokat csinálni"); });

Lehet, hogy ennek nem sok előnye van ebben a pillanatban - ebben az esetben csak kissé kevesebb a kódja -, de az ha a szkriptek összetetten haladnak, akkor értékelni fogod, hogy nem kell körüljárnod a funkciót definíciók. Sajnos ez egy kicsit nehezebbé teszi a kezdőket - nézzük csak meg ezeket a fogszabályokat - tehát ellenőrizze a következő pontokat, ha hibákat tapasztal:

• A megfelelő zárójelek helyes száma - a kód behúzása segít.
• Göndör vs kerek nadrágtartó.
• Nyilatkozat pontosvesszővel bezárva - de a záró göndör tartó után nincs szükség.

Kódszerkesztő, például Fenséges szöveg 2 Próbálja ki a 2. szublimált szöveget a platformok közötti kódszerkesztési igényekhezA Sublime Text 2 egy platformközi kódszerkesztő, amiről csak nemrég hallottam, és azt kell mondanom, hogy igazán lenyűgözött vagyok a bétacímke ellenére. Töltse le a teljes alkalmazást penny fizetése nélkül ... Olvass tovább valóban segíthet, mivel kiemeli a megfelelő fogszabályozókat és automatikusan behúzza a kódot az Ön számára. A dedikált kódszerkesztő valóban nélkülözhetetlen.

Erre az erre a leckére vonatkozik, de be kell szoknia néhány alapvető DOM-manipulációt a dokumentum készenléti eseményben, mielőtt továbbmenne, és kezdje el a fájlok szerkesztését egy kódszerkesztőben, ha még nem már. Legközelebb megvizsgáljuk az eseményeket és azt, hogy miként használják az interaktivitást egy oldalhoz - például hogy a jQuery csináljon valamit egy gomb kattintásakor. Az alábbiakban mindig várjuk a kérdéseket vagy észrevételeket.