Peter Holmes
0 
727
104
jQuery er uden tvivl en væsentlig færdighed for den moderne webudvikler Hvilket programmeringssprog at lære - Webprogrammering Hvilket programmeringssprog at lære - Webprogrammering I dag skal vi se på de forskellige webprogrammeringssprog, der driver internettet. Dette er den fjerde del i en begynderprogrammeringsserie. I del 1 lærte vi det grundlæggende i…, og i denne korte miniserie håber jeg at give dig viden til at begynde at gøre brug af den i dine egne webprojekter. I den første del af vores jQuery-tutorial jQuery-tutorial - Kom godt i gang: Basics & Selectors jQuery Tutorial - Kom godt i gang: Basics & Selectors Sidste uge talte jeg om, hvor vigtig jQuery er for enhver moderne webudvikler, og hvorfor det er fantastisk. Denne uge tror jeg, det er på tide, at vi får vores hænder beskidte med noget kode og lærte hvordan ..., vi kiggede på nogle sproglige grundlæggende forhold, og hvordan man bruger vælgere i del 2 gik vi videre til metoder til manipulering af DOM Introduction to jQuery (Del 2): Methods & Functions Introduction to jQuery (Part 2): Methods & Functions Dette er en del af en igangværende introduktion til jQuery webprogrammeringsserie . Del 1 dækkede grundlæggende oplysninger om jQuery om, hvordan man inkluderer det i dit projekt og vælgere. I del 2 fortsætter vi med ... .
I del 3 skal vi tackle problemet med, hvordan man udsætter jQuery, indtil siden er indlæst, så prøver jeg at forklare, hvad anonyme funktioner er, og hvorfor du har brug for at vide om dem.
Forsinket indlæser: Hvordan & hvorfor?
Hvis du har prøvet noget af koden fra del 1 og 2, har du måske stødt på nogle fejl, underlig opførsel eller ting, der bare ikke fungerer. Den mest almindelige fejl, jeg oplevede, da jeg lærte jQuery, var, at DOM-elementer, der ikke blev fundet - selvom jeg tydeligt kunne se dem i kilden til siden, fortsatte jQuery med at fortælle mig, at det bare ikke kunne finde dem! Hvorfor det?
Det har alt sammen at gøre med den rækkefølge, som tingene indlæses af browseren. Det er på det enkleste, hvis du har et jQuery-script, der kører i browseren Før det DOM-element, det leder efter, er faktisk oprettet, scriptet indlæses først, men gør ikke noget, fordi det ikke kan finde elementet, så indlæses DOM-elementet senere. Dette er mindre et problem, hvis du placerer alle dine scripts i nærheden af sidefoden, men det kan stadig ske.
Løsningen er at pakke dine scripts i det, der kaldes a dokument klar begivenhed. Dette får den vedlagte kode til at vente, indtil DOM'en er fuldt indlæst (indtil den er) parat). Det er enkelt at bruge det:
$ (dokument). allerede (funktion () // din kode til forsinkelse går her);Der er en endnu kortere måde at gøre dette på i jQuery-dokumentationen, men jeg vil kraftigt foreslå, at du bruger denne måde til kodelæsbarhed.
Dette dokument klar begivenhed er et andet godt eksempel på en anonym funktion, så lad os prøve at forstå, hvad det betyder.
Anonyme funktioner
Hvis du ligesom mig har nogle programmeringsoplevelser på begynderniveau under dit bælte, ideen om anonyme funktioner - som er kernen i jQuery og Javascript - kan være lidt foruroligende. For det første gør det fejl på grund af uoverensstemmende seler ganske almindelige, hvorfor jeg vil forklare det nu. Hvis du gerne vil have en grundig forklaring på, hvorfor anonyme funktioner er bedre end almindelige navngivne funktioner på et mere teknisk niveau, vil jeg foreslå, at du læser dette temmelig komplekse blogindlæg [No Longer Available].
Indtil nu er du sandsynligvis kun stødt på navngivne funktioner. Dette er funktioner, der er erklæret med et navn og derfor kan kaldes andre steder, så mange gange du vil. Overvej dette trivielle eksempel, der logger en meddelelse til konsollen, når siden indlæses.
funktion doStuffOnPageLoad () console.log ("gør ting!"); $ (dokument). allerede (doStuffOnPageLoad);Dette er nyttigt, hvis din funktion er designet til at blive brugt igen, men i dette tilfælde er den slags indviklet, da vi kun virkelig ønsker, at den skal skyde én gang, når siden indlæses. I stedet gider vi ikke at definere en separat funktion, og erklærer den bare inline som en parameter, når det er nødvendigt. Det foregående eksempel ville derfor blive bedre skrevet om som:
$ (dokument). allerede (funktion () console.log ("gør ting"););Du ser måske ikke mange fordele ved dette i øjeblikket - det er kun marginalt mindre kode i dette tilfælde - men når dine scripts skrider frem i kompleksitet, vil du sætte pris på at du ikke behøver at hoppe rundt og prøver at finde funktionsdefinitioner. Desværre gør det tingene lidt vanskeligere for begyndere - se bare på alle disse seler - så sørg for at kontrollere følgende punkter, hvis du får fejl:
- Rigtigt antal tilsvarende seler - indrykk i din kode hjælper.
- Krøllede vs runde seler.
- Udsagnsafslutning med semikolon - men ikke nødvendigt efter en afsluttet krøllestag.
Brug af en kodeditor som Sublime Text 2 Prøv Sublime Text 2 til din tværplatformkode Redigeringsbehov Prøv Sublime Text 2 til din tværplatformkode Redigeringsbehov Sublime Text 2 er en kodeditor på tværs af platforme, som jeg kun for nylig har hørt om, og jeg må sige, at jeg er virkelig imponeret trods beta-mærket. Du kan downloade den fulde app uden at betale en krone ... kan virkelig hjælpe, da den fremhæver tilsvarende seler og automatisk indrykkskode for dig. En dedikeret kodeditor er virkelig vigtig.
Det er det for denne lektion, men du skal komme ind i vanen med at omslutte nogle grundlæggende DOM-manipulationer i dokument klar begivenhed, før du går videre, og begynde at redigere filer i en kodeditor, hvis du ikke allerede er det. Næste gang tager vi et kig på begivenheder, og hvordan de bruges til at tilføje interaktivitet til en side - f.eks. Få jQuery til at gøre noget, når der klikkes på en knap. Spørgsmål eller kommentarer er altid velkomne nedenfor.