Introduktion till jQuery (del 3): väntar på att sidan ska laddas och anonyma funktioner

Annons

jQuery är utan tvekan en viktig färdighet för modern webbutvecklare Vilket programmeringsspråk att lära sig - WebbprogrammeringIdag ska vi ta en titt på de olika webbprogrammeringsspråken som driver Internet. Detta är den fjärde delen i en programmeringsserie för nybörjare. I del 1 lärde vi oss grunderna i... Läs mer , och i denna korta miniserie hoppas jag kunna ge dig kunskapen att börja använda den i dina egna webbprojekt. I den första delen av vår jQuery-handledning jQuery Tutorial - Komma igång: Grunder och väljareFörra veckan pratade jag om hur viktigt jQuery är för alla moderna webbutvecklare och varför det är fantastiskt. Den här veckan tycker jag att det är dags att vi smutsar ner händerna med lite kod och lär oss hur... Läs mer , vi tittade på några grundläggande språk och hur man använder väljare; i del 2 gick vi vidare till metoder för att manipulera DOM Introduktion till jQuery (del 2): ​​Metoder och funktionerDetta är en del av en pågående nybörjarintroduktion till jQuery-webbprogrammeringsserien. Del 1 behandlade grunderna i jQuery om hur man inkluderar det i ditt projekt och väljare. I del 2 fortsätter vi med...

Läs mer .

I del 3 kommer vi att ta itu med problemet med hur man fördröjer jQuery tills sidan har laddats, sedan ska jag försöka förklara vad anonyma funktioner är och varför du behöver veta om dem.

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

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

Tja, allt har att göra med i vilken ordning saker laddas av webbläsaren. Som enklast är det om du har ett jQuery-skript som körs i webbläsaren innan DOM-elementet det letar efter faktiskt har skapats, skriptet laddas först, men gör ingenting eftersom det inte kan hitta elementet, sedan laddas DOM-elementet senare. Detta är mindre problem om du placerar alla dina skript nära sidfoten, men det kan fortfarande hända.

Lösningen är att linda in dina skript i vad som kallas en 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:

$(document).ready (function(){ //din kod för att fördröja går hit. });

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

Den här dokumentklara händelsen är ett annat bra exempel på en anonym funktion, så låt oss försöka förstå vad detta betyder.

Anonyma funktioner

Om du som jag har lite programmeringserfarenhet på nybörjarnivå bakom bältet, är idén om anonyma funktioner – som är kärnan i jQuery och Javascript – kan vara lite oroande. För det första gör det fel på grund av felaktiga hängslen ganska vanligt, 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 namn fungerar på en mer teknisk nivå, skulle jag föreslå att du läser detta ganska komplexa blogginlägg [Inte längre Tillgängliga].

Fram till nu har du förmodligen bara stött på namngivna funktioner. Det här är funktioner som har deklarerats med ett namn och kan därför anropas var som helst, hur många gånger du vill. Tänk på detta triviala exempel, som kommer att logga ett meddelande till konsolen när sidan laddas.

function doStuffOnPageLoad(){ console.log("gör saker!"); } $(document).ready (doStuffOnPageLoad);

Det här är användbart om din funktion är designad för att kunna återanvändas, men i det här fallet är den lite komplicerad eftersom vi egentligen bara vill att den ska aktiveras en gång när sidan laddas. Istället bryr vi oss inte om att definiera en separat funktion, utan deklarerar bara den inline som en parameter när och när det behövs. Det tidigare exemplet skulle därför vara bättre att skriva om som:

$(document).ready (function(){ console.log("gör grejer"); });

Du kanske inte ser många fördelar med detta för tillfället – det är bara marginellt mindre kod i det här fallet – men som dina skript utvecklas i komplexitet du kommer att uppskatta att inte behöva hoppa runt och försöka hitta funktion definitioner. Tyvärr gör det saker lite svårare för nybörjare – titta bara på alla dessa hängslen – så se till att kontrollera följande punkter om du får fel:

• Korrekt antal motsvarande hängslen – det hjälper att dra in din kod.
• Lockiga vs runda hängslen.
• Uttalandet avslutas med semikolon – men behövs inte efter ett avslutande lockigt hängslen.

Använda en kodredigerare som Sublim text 2 Prova Sublime Text 2 för dina plattformsövergripande kodredigeringsbehovSublime Text 2 är en plattformsoberoende kodredigerare som jag nyss hört talas om, och jag måste säga att jag är riktigt imponerad trots betaetiketten. Du kan ladda ner hela appen utan att betala ett öre... Läs mer kan verkligen hjälpa eftersom det markerar motsvarande hängslen och automatiskt drar in kod åt dig. En dedikerad kodredigerare är verkligen viktigt.

Det var allt för den här lektionen, men du bör ta för vana att bifoga några grundläggande DOM-manipulationer in document ready-händelse innan du går vidare, och börja redigera filer i en kodredigerare om du inte är det redan. Nästa gång ska vi ta en titt på händelser och hur de används för att lägga till interaktivitet på en sida – som att få jQuery att göra något när en knapp klickas. Frågor eller kommentarer är alltid välkomna nedan.