Introduksjon til jQuery (del 3) Venter på siden for å laste inn og anonyme funksjoner

jQuery er uten tvil en vesentlig ferdighet for den moderne webutvikleren. Hvilket programmeringsspråt lærer - Webprogrammering Hvilket programmeringspråk som skal læres - Webprogrammering I dag skal vi se på de forskjellige webprogrammeringsspråkene som driver Internett. Dette er den fjerde delen i en nybegynnere programmeringsserie. I del 1 lærte vi grunnlaget for ... Les mer, og i denne korte miniserien håper jeg å gi deg kunnskapen om å begynne å bruke det i dine egne webprosjekter. I den første delen av vår jQuery-veiledning jQuery-veiledning - Komme i gang: Grunnleggende og valgmuligheter jQuery-veiledning - Komme i gang: Grunnleggende og velgører I forrige uke snakket jeg om hvor viktig jQuery er for enhver moderne webutvikler og hvorfor det er kjempebra. Denne uken, jeg tror det er på tide at vi fikk våre hender skitne med noe kode og lærte hvordan ... Les mer, vi så på noen grunnleggende språk, og hvordan du bruker selektorer; I del 2 flyttet vi videre til metoder for manipulering av DOM Introduksjon til jQuery (del 2): ​​Metoder og funksjoner Introduksjon til jQuery (del 2): ​​Metoder og funksjoner Dette er en del av en igangværende introduksjon til jQuery webprogrammeringsserier . Del 1 dekket grunnleggende om jQuery om hvordan å inkludere det i prosjektet og selektorer. I del 2 fortsetter vi med ... Les mer .

I del 3 skal vi takle problemet med hvordan du forsinker jQuery til siden har lastet inn, så prøver jeg å forklare hvilke anonyme funksjoner som er og hvorfor du trenger å vite om dem.

Forsinket innlasting: Hvordan og hvorfor?

Hvis du har prøvd noe av koden fra del 1 og 2, kan det hende du har kommet over noen feil, ulik oppførsel eller ting som bare ikke virker. Den vanligste feilen jeg opplevde da jeg lærte jQuery, var at DOM-elementene ikke ble funnet - selv om jeg ganske enkelt kunne se dem i kilden til siden, holdt jQuery meg og jeg kunne ikke finne dem! Hvorfor det?

Vel, det har alt å gjøre med den rekkefølgen der ting lastes av nettleseren. På det enkleste, hvis du har et jQuery-skript som kjører i nettleseren før DOM-elementet det leter etter, er faktisk opprettet, skriptet lastes først, men ikke gjør noe fordi det ikke finner elementet, da vil DOM-elementet lastes senere. Dette er mindre et problem hvis du plasserer alle skriptene nær bunnteksten, men det kan fortsatt skje.

Løsningen er å pakke inn skriptene dine i hva som heter a dokument klar hendelse. Dette gjør at vedlagte kode venter til DOM har blitt fullt lastet (til den er klar). Å bruke det er enkelt:

$ (dokument) .ready (funksjon () // din kode for å forsinke går her);

Det er en enda kortere måte å gjøre dette beskrevet i jQuery-dokumentasjonen, men jeg anbefaler sterkt at du bruker denne måten for kodelesbarhet.

Denne klare hendelsen er et annet godt eksempel på en anonym funksjon, så la oss prøve å forstå hva dette betyr.

Anonyme funksjoner

Hvis jeg liker deg, har du litt begynnelsesnivå programmeringserfaring under beltet ditt, ideen om anonyme funksjoner - som er kjernen til jQuery og Javascript - kan være litt forvirrende. For det gjør det feil på grunn av feilaktige braces ganske vanlig, det er derfor jeg skal forklare det nå. Hvis du vil ha en grundig forklaring på hvorfor anonyme funksjoner er bedre enn vanlige navngitte funksjoner på et mer teknisk nivå, vil jeg foreslå å lese dette ganske komplekse blogginnlegget [Ikke lenger tilgjengelig].

Inntil nå har du sannsynligvis bare kommet over navngitte funksjoner. Dette er funksjoner som er deklarert med et navn og kan derfor bli kalt andre steder, så mange ganger du vil. Tenk på dette trivielle eksempelet, som logger en melding til konsollen når siden lastes inn.

funksjon doStuffOnPageLoad () console.log ("gjør ting!");  $ (dokument) .ready (doStuffOnPageLoad);

Dette er nyttig hvis funksjonen din er utformet for å bli brukt på nytt, men i dette tilfellet er det litt innviklet siden vi bare vil at den skal brenne en gang når siden er lastet. I stedet forstyrer vi ikke definere en egen funksjon, og bare erklære det inline som en parameter som og når det trengs. Det forrige eksempelet ville derfor bli bedre omskrivet som:

$ (dokument) .ready (funksjon () console.log ("gjør ting"););

Du kan ikke se mange fordeler av dette for øyeblikket - det er bare marginalt mindre kode i dette tilfellet - men etterhånden som skriptene dine går i kompleksitet, vil du sette pris på at du ikke trenger å hoppe rundt og prøver å finne funndefinisjoner. Dessverre gjør det ting litt vanskeligere for nybegynnere - bare se på alle disse braces - så sørg for å sjekke følgende punkter hvis du får feil:

• Korrekt antall korresponderende bøyler - innrykk koden hjelper deg.
• Krøllete vs runde bøyler.
• Erklæring lukkes med en semikolon - men ikke nødvendig etter en lukkende krølling.

Bruke en kode editor som Sublime Text 2 Prøv ut Sublime Text 2 For Kors-Platform Kode Redigering Trenger Prøv Sublime Tekst 2 For Kors-Platform Kode Redigeringsbehov Sublime Text 2 er en kors-plattform koden redaktør jeg bare nylig hørt om, og jeg må si at jeg er veldig imponert til tross for beta-etiketten. Du kan laste ned hele appen uten å betale en penny ... Les mer kan virkelig hjelpe som det fremhever tilsvarende braces og automatisk indents kode for deg. En dedikert kode redaktør er viktig, virkelig.

Det er det for denne leksjonen, men du bør bli vant til å omslutte noen grunnleggende DOM-manipulasjoner i dokumentklar hendelse før du fortsetter, og begynne å redigere filer i en kodeditor hvis du ikke allerede er. Neste gang vil vi se på hendelser og hvordan de brukes til å legge til interaktivitet på en side - for eksempel gjør jQuery noe når en knapp klikkes. Spørsmål eller kommentarer alltid velkommen nedenfor.

Utforsk mer om: JavaScript, jQuery, Programmering, Webutvikling.