Ievads jQuery (3. daļa): gaida lapas ielādi un anonīmās funkcijas

Reklāma

jQuery neapšaubāmi ir būtiska mūsdienu prasme web izstrādātājs Kuru programmēšanas valodu apgūt — tīmekļa programmēšanaŠodien mēs apskatīsim dažādas tīmekļa programmēšanas valodas, kas nodrošina interneta darbību. Šī ir ceturtā daļa iesācēju programmēšanas sērijā. 1. daļā mēs apguvām pamata... Lasīt vairāk , un šajā īsajā mini sērijā es ceru sniegt jums zināšanas, lai sāktu tās izmantot savos tīmekļa projektos. Iekš mūsu jQuery apmācības pirmā daļa jQuery apmācība — darba sākšana: pamati un atlasītājiPagājušajā nedēļā es runāju par to, cik jQuery ir svarīgs jebkuram mūsdienu tīmekļa izstrādātājam un kāpēc tas ir lieliski. Šonedēļ, manuprāt, ir pienācis laiks sasmērēt rokas ar kodu un uzzināt, kā... Lasīt vairāk , mēs apskatījām dažus valodas pamatus un to, kā izmantot atlasītājus; 2. daļā mēs pārgājām uz metodes, kā manipulēt ar DOM Ievads jQuery (2. daļa): metodes un funkcijasŠī ir daļa no iesācējiem notiekošā ievada jQuery tīmekļa programmēšanas sērijā. 1. daļā tika apskatīti jQuery pamati, kā to iekļaut savā projektā, un atlasītāji. Otrajā daļā mēs turpināsim ar...

Lasīt vairāk .

3. daļā mēs risināsim problēmu, kā aizkavēt jQuery, līdz lapa ir ielādēta, un tad es mēģināšu izskaidrot, kas ir anonīmas funkcijas un kāpēc jums par tām jāzina.

Aizkavēta ielāde: kā un kāpēc?

Ja esat izmēģinājis kādu kodu no 1. un 2. daļas, iespējams, esat saskāries ar kļūdām, dīvainu uzvedību vai lietām, kas vienkārši nedarbojas. Visizplatītākā kļūda, ko piedzīvoju, apgūstot jQuery, bija tā, ka DOM elementi netika atrasti — pat lai gan es tos varēju skaidri redzēt lapas avotā, jQuery man teica, ka vienkārši nevarēja atrast viņiem! Kāpēc ir tā, ka?

Tas viss ir saistīts ar secību, kādā pārlūkprogramma ielādē lietas. Vienkāršākais ir, ja pārlūkprogrammā darbojas jQuery skripts pirms tam meklētais DOM elements faktiski ir izveidots, skripts tiks ielādēts vispirms, bet neko nedarīs, jo nevar atrast elementu, tad DOM elements tiks ielādēts vēlāk. Šī problēma ir mazāka, ja visus skriptus ievietojat kājenes tuvumā, taču tā joprojām var notikt.

Risinājums ir ietīt savus skriptus tā sauktajā a dokuments gatavs notikums. Tas liek pievienotajam kodam gaidīt, līdz DOM ir pilnībā ielādēts (līdz tas ir gatavs). Tās lietošana ir vienkārša:

$(document).ready (function(){ //jūsu kods aizkavēšanai tiek parādīts šeit. });

Ir vēl īsāks veids, kā to izdarīt jQuery dokumentācija, taču es ļoti iesaku izmantot šo veidu koda lasāmībai.

Šis dokumenta sagatavošanas notikums ir vēl viens labs piemērs anonīma funkcija, tāpēc mēģināsim saprast, ko tas nozīmē.

Anonīmās funkcijas

Ja jums, tāpat kā man, ir kāda iesācēja līmeņa programmēšanas pieredze, doma par anonīmas funkcijas – kas ir jQuery un Javascript pamatā – varētu būt nedaudz satraucoši. Pirmkārt, tas diezgan bieži rada kļūdas neatbilstošu breketu dēļ, tāpēc es to tagad paskaidrošu. Ja vēlaties pamatīgu skaidrojumu par to, kāpēc anonīmas funkcijas ir labākas par parastajiem nosaukumiem funkcijas tehniskā līmenī, es ieteiktu izlasīt šo diezgan sarežģīto emuāra ierakstu [No Longer Pieejams].

Līdz šim jūs, iespējams, esat saskāries tikai ar nosauktās funkcijas. Tās ir funkcijas, kas ir deklarētas ar nosaukumu, un tāpēc tās var izsaukt jebkur citur, cik reižu vēlaties. Apsveriet šo triviālo piemēru, kas reģistrēs ziņojumu konsolei, kad lapa tiks ielādēta.

function doStuffOnPageLoad(){ console.log ("darīt lietas!"); } $(dokuments).ready (doStuffOnPageLoad);

Tas ir noderīgi, ja funkcija ir paredzēta atkārtotai izmantošanai, taču šajā gadījumā tā ir sarežģīta, jo mēs patiešām vēlamies, lai tā tiktu aktivizēta tikai vienreiz, kad lapa tiek ielādēta. Tā vietā mēs neuztraucamies definēt atsevišķu funkciju un vienkārši deklarējam to kā parametru pēc vajadzības. Tāpēc iepriekšējo piemēru labāk būtu pārrakstīt šādi:

$(document).ready (function(){ console.log("darīt lietas"); });

Iespējams, ka pašlaik jūs neredzat daudz priekšrocību — šajā gadījumā tas ir tikai nedaudz mazāk koda —, bet kā jūsu skripti kļūst arvien sarežģītāki, jūs novērtēsiet, ka jums nebūs jālēkā apkārt, mēģinot atrast funkciju definīcijas. Diemžēl tas nedaudz sarežģī iesācēju darbību — vienkārši apskatiet visas šīs breketes — tāpēc noteikti pārbaudiet tālāk norādītos punktus, ja tiek parādītas kļūdas.

• Pareizs atbilstošo iekavu skaits – koda atkāpe palīdz.
• Cirtaini pret apaļām lencēm.
• Paziņojums aizveras ar semikolu — bet nav nepieciešams pēc aizverošas cirtainas skavas.

Izmantojot koda redaktoru, piemēram Izcils teksts 2 Izmēģiniet Sublime Text 2 savām vairāku platformu koda rediģēšanas vajadzībāmSublime Text 2 ir vairāku platformu koda redaktors, par kuru es dzirdēju tikai nesen, un man jāsaka, ka esmu patiešām pārsteigts, neskatoties uz beta etiķeti. Jūs varat lejupielādēt pilnu lietotni, nemaksājot ne santīma... Lasīt vairāk var patiešām palīdzēt, jo tas izceļ atbilstošās figūriekavas un automātiski ievelk kodu jūsu vietā. Īpašs koda redaktors patiešām ir būtisks.

Tas ir viss šajā nodarbībā, taču jums vajadzētu iejusties ieradumā iekļaut dažas pamata DOM manipulācijas dokumenta gatavības pasākumā, pirms turpināt, un sāciet rediģēt failus koda redaktorā, ja neesat jau. Nākamajā reizē mēs apskatīsim notikumus un to, kā tie tiek izmantoti, lai lapai pievienotu interaktivitāti, piemēram, likt jQuery kaut ko darīt, kad tiek noklikšķināts uz pogas. Jautājumi vai komentāri vienmēr laipni gaidīti zemāk.