Introduktion till jQuery (Del 3) Väntar på sidan för att ladda och anonyma funktioner

jQuery är utan tvekan en viktig färdighet för den moderna webbutvecklaren Vilket programmeringsspråk som ska läras - Webbprogrammering Vilket programmeringsspråk som ska läras - Webbprogrammering Idag ska vi titta på de olika webbprogrammeringsspråken som driver Internet. Detta är den fjärde delen i en nybörjare programmeringsserie. I del 1 lärde vi oss grunden till ... Läs mer, och i den här korta mini-serien hoppas jag ge dig kunskapen för att börja använda den i dina egna webbprojekt. I den första delen av vår jQuery-handledning jQuery-handledning - Komma igång: Grunder och väljare jQuery Handledning - Komma igång: Grunder och väljare I förra veckan pratade jag om hur viktigt jQuery är för alla moderna webbutvecklare och varför det är fantastiskt. Den här veckan tror jag att det är dags att vi fick våra händer smutsiga med någon kod och lärde oss hur ... Läs mer, vi tittade på några språkgrunder och hur man använder väljare; I del 2 fortsatte vi med metoder för att manipulera DOM Introduktion till jQuery (del 2): ​​Metoder och funktioner Introduktion till jQuery (del 2): ​​Metoder och funktioner Detta är en del av en pågående nybörjare introduktion till jQuery webbprogrammeringsserier . Del 1 omfattade jQuery-grunderna om hur man ska inkludera det i ditt projekt och väljare. I del 2 fortsätter vi med ... Läs mer .

I del 3 behandlar vi problemet med hur du fördröjer jQuery tills sidan har laddats och jag försöker förklara vilka anonyma funktioner som är och varför du behöver veta om dem.

Fördröjd laddning: Hur & varför?

Om du har provat någon av koden från del 1 och 2 kan du ha stött på några fel, udda beteenden eller saker som bara fungerar inte. Det vanligaste felet jag upplevde när jag lärde mig jQuery var det för DOM-element som inte hittades - även om jag tydligt kunde se dem i källan till sidan, fortsatte jQuery att jag bara kunde inte hitta dem! Varför är det så?

Tja, det handlar bara om den ordning i vilken saker laddas av webbläsaren. Vid det enklaste, om du har ett jQuery-skript som körs i webbläsaren innan DOM-elementet letar efter har faktiskt skapats, skriptet laddas först men gör inte något för att det inte kan hitta elementet, då laddas DOM-elementet senare. Detta är mindre av ett problem om du placerar alla dina skript nära sidfoten, men det kan fortfarande hända.

Lösningen är att paketera dina skript i vad som heter a dokument redo händelse. Detta gör att den bifogade koden väntar tills DOM har laddats helt (tills den är redo). Att använda det är enkelt:

$ (dokument) .ready (funktion () // din kod för att försena går här);

Det finns ett ännu kortare sätt att göra det som beskrivs i jQuery-dokumentationen, men jag rekommenderar starkt att du använder det här sättet för kodläsbarhet.

Detta dokument redo händelse är ett annat bra exempel på en anonym funktion, så låt oss försöka förstå vad det betyder.

Anonyma funktioner

Om jag tycker om dig har du lite nybörjarnivå programmeringserfarenhet under ditt bälte, tanken på anonyma funktioner - vilket är kärnan till jQuery och Javascript - kan vara lite oroväckande. För det gör det fel på grund av felaktiga hängslen ganska vanliga, vilket är anledningen till att jag ska förklara det nu. Om du vill ha en grundlig förklaring till varför anonyma funktioner är bättre än vanliga funktioner på en mer teknisk nivå, skulle jag rekommendera att läsa det här ganska komplexa blogginlägget [Ej längre tillgänglig].

Hittills har du förmodligen bara stött på namngivna funktioner. Dessa är funktioner som har deklarerats med ett namn och kan därför kallas någon annanstans, så många gånger du vill. Tänk på detta triviala exempel, som loggar ett meddelande till konsolen när sidan laddas.

funktion doStuffOnPageLoad () console.log ("gör saker!");  $ (dokument) .ready (doStuffOnPageLoad);

Det här är användbart om din funktion är konstruerad för att återanvändas, men i det här fallet är det snällt då vi bara vill att den ska skjuta en gång när sidan laddas. Istället stör vi inte att definiera en separat funktion, och bara förklara det inline som en parameter vid behov. Det föregående exemplet skulle därför bli bättre omskrivet som:

$ (dokument) .ready (funktion () console.log ("gör saker"););

Du kanske inte ser många fördelar med det här just nu - det är bara marginellt mindre kod i det här fallet - men när dina skript utvecklas i komplexitet kommer du uppskatta att du inte behöver hoppa runt och försöka hitta funktionsdefinitioner. Tyvärr gör det saker lite svårare för nybörjare - titta bara på alla dessa hängslen - så var noga med att kolla följande punkter om du får fel:

• Korrekt antal motsvarande hängslen - indragning av din kod hjälper.
• Curly vs round braces.
• Uttalande avslutande med en semikolon - men inte nödvändigt efter stängning.

Använda en kodredigerare som Sublime Text 2 Prova ut Sublime Text 2 för din Cross-Platform Kod Redigering behöver prova Sublime Text 2 för dina Cross-Platform Kod Redigering behöver Sublime Text 2 är en cross-platform kodredigerare Jag har bara nyligen hört talas om, och jag måste säga att jag är riktigt imponerad trots beta-etiketten. Du kan ladda ner hela appen utan att betala ett öre ... Läs mer kan verkligen hjälpa till med att belysa motsvarande braces och automatiskt indrag kod för dig. En dedikerad kodredigerare är väldigt viktigt.

Det är det för den här lektionen, men du borde vana sig med att omsluta några grundläggande DOM-manipuleringar i dokument redo händelse innan du går vidare och börja redigera filer i en kodredigerare om du inte redan är. Nästa gång tittar vi på händelser och hur de används för att lägga till interaktivitet på en sida - till exempel gör jQuery gör något när en knapp klickas. Frågor eller kommentarer är alltid välkomna nedan.

Utforska mer om: JavaScript, jQuery, Programmering, Webbutveckling.