Share
For de avanserte JavaScript-utviklerne (og de avanserte jQuery-utviklerne) blant våre lesere, vil denne artikkelen ikke være til stor hjelp. I stedet skal vi fokusere på de som nettopp har startet med jQuery.
Kanskje du har gått gjennom flere JavaScript-opplæringsprogrammer, bygget flere små nettsteder eller prosjekter som inneholder JavaScript til siden (eller nettstedet) til en viss grad, og nå er du klar til å komme i gang med et nytt rammeverk eller bibliotek.
Hvis du leser denne opplæringen, antar jeg at du er interessert i å komme i gang med jQuery. Eller kanskje du allerede har startet med jQuery, men du støter på et par forhindringer som hindrer din læring.
Så frustrerende som det kan være å lære noe nytt, slå en veikryss og da må du gjenta det litt lenger nedover linjen, sølvfôr er at sjansene er at dine problemer har blitt løst av noen andre.
Dette er ikke nødvendigvis sant for mer komplekse applikasjoner, men når du lærer noe nytt, er du ikke den første personen å sprette langs læringskurven. Til det formål kan du sannsynligvis lære noe fra noen som har vært der før.
Og det er akkurat det vi skal dekke i denne opplæringen. Spesielt skal vi snakke om problemet når du mottar feilmeldingen:
Uncaught ReferenceError: jQuery er udefinert
Før vi kommer til løsningen, la oss se nøyaktig hva som skjer. Det vil si for å forstå hvordan vi kommer til løsningen, må vi forstå problemet. Først da kan vi vite hvordan å løse det som vises i konsollen.
Hvis du er kjent med JavaScript, så vet du hvor forvirrende udefinert kan egentlig være-det vil si, snakker vi om det globale objektet eller en primitiv verdi? Det er utenfor omfanget av dette innlegget (ingen ordspill ment!), Men selv om du ikke er kjent med en hvilken som helst definisjon, betyr det ikke at du ikke er i stand til å diagnostisere problemet.
Først, la oss gå videre og sette opp en side som inneholder grunnleggende om hva vi trenger for å kunne jobbe med jQuery-biblioteket for å gjenskape feilen vi ser over.
Start med å lage følgende HTML-fil og lagre den et sted på din lokale maskin, hvor du enkelt kan laste den opp i en nettleser.
Dette er en grunnleggende HTML sandkasse.
Vær oppmerksom på at vi inkluderer noe CSS i denne filen. Det er helt valgfritt, men hvis du vil følge med denne veiledningen trinn for trinn, kan du laste ned et arkiv av alt dette fra høyre side av dette innlegget..
Selv om CSS er valgfritt, er JavaScript ikke. Vær oppmerksom på at vi inkluderer jQuery-biblioteket fra et innholdsleveringsnettverk (eller en CDN) slik at vi ikke trenger å inkludere det i prosjektets kildefiler.
Deretter la vi lage en JavaScript kildefil som vi kan bruke for å gjenopprette feilen ovenfor og å skrive noen testkode for å løse problemet. Vi ringer det main.js.
$ (funksjon () );
Deretter inkluderer du kildefilen i HTML-dokumentet ditt slik at den endelige filen ser slik ut:
Dette er en grunnleggende HTML sandkasse.
Nå bør du kunne laste opp siden i nettleseren din og se noe nesten som konsollbildet som er delt ovenfor.
Før vi går videre, la oss gå videre og sørg for at JavaScript-filen er lastet riktig. For å gjøre dette, vil vi sette opp et enkelt varsel slik at en melding vises når siden lastes inn i nettleseren.
For å se denne skjermen, gjør følgende endring til JavaScript kildefilen din:
Accentsconagua
$ (funksjon () alert ('JavaScript Loaded!'););Deretter må du kontrollere at du bestiller JavaScript-filene fra:
Til:
Vi snakker litt om dette i litt.
Oppdater nå siden på dette tidspunktet. Forutsatt at alt gikk bra opp til dette punktet, bør du se dialogboksen som vist på bildet ovenfor. Hvis det ikke virker, se over koden som er over (eller last ned filene som er vedlagt denne opplæringen) og sørg for at du har lastet alt riktig.
Nå som vi har satt opp sandkassen slik at vi kan begynne å utforske problemet i dybden, la oss se på noen potensielle problemer som du kanskje ser når du jobber med jQuery.
Når du velger å bruke jQuery i et prosjekt, betyr dette at jQuery blir en avhengighet av arbeidet ditt. Og når du jobber med avhengigheter, må du generelt sørge for at de er lastet før koden din slik at koden din kan dra nytte av den.
Hvis du merker i den første delen av koden ovenfor, lastes JavaScript-filen før jQuery, slik at alt vi ønsker å gjøre med jQuery, egentlig ikke kan gjøres. Grunnen til at du ser på udefinert Feilmeldingen som vi diskuterte tidligere, er fordi jQuery er bokstavelig talt ikke definert i sammenheng med koden din.
Det vil si at koden din ikke har noen anelse om at jQuery eksisterer selv fordi jQuery er lastet inn etter koden din. Heldigvis er dette en enkel løsning. Bare endre rekkefølgen der filene er lastet, det vil si, plasser jQuery over kildefilen din, og prøv å utføre koden en gang til.
Etter endringen bør hele HTML se slik ut:
Dette er en grunnleggende HTML sandkasse.
Koden din skal fungere, og konsollen skal ikke vise noen feil. Dette er sannsynligvis det enkleste problemet å løse, men det er sannsynligvis en av de minst vanlige feilene å se, da det vanligvis antas at jQuery må lastes først.
Når du jobber med jQuery, utvikler noen ganger utviklere som å endre $ fungere slik at det ikke er i konflikt med noe annet som kildekoden bruker.
nærmere bestemt, jQuery er navnet på funksjonen i jQuery-kildekoden. Biblioteket bruker $ som et synonym eller en snarvei siden det sannsynligvis vil bli brukt så ofte. Det gjør koden lettere å skrive og enklere å lese.
Men det er ikke den eneste JavaScript-koden som bruker den funksjonen, og noen ganger vil utviklere måtte bruke en annen funksjon eller avstå $ til en annen kildekode. For å gjøre det, kan de ende opp med å bruke jQuery.noConflict ().
Rett fra API:
Mange JavaScript-biblioteker bruker$som en funksjon eller et variabelt navn, akkurat som jQuery gjør. I jQuery saken,$er bare et alias forjQuery, så all funksjonalitet er tilgjengelig uten å bruke$.
Hvis du trenger å bruke et annet JavaScript-bibliotek ved siden av jQuery, returner du kontrollen over$tilbake til det andre biblioteket med en samtale til$ .NoConflict (). Gamle referanser til$lagres under jQuery-initialisering;noConflict ()bare gjenoppretter dem.
Så et sted I koden du har tatt med, er det en sjanse for at en annen utvikler har ringt til denne funksjonen. Dermed er $ funksjonen vil ikke være tilgjengelig. Det kan muligens kalle en annen funksjon enn jQuery selv, eller det kan kalle en funksjon som er udefinert.
I vårt tilfelle er vi interessert i sistnevnte. For å løse dette, kan vi prøve et par løsninger. For det første kan vi prøve å gjenvinne tilgangen til $ funksjon ved å bare ringe jQuery.noConflict () igjen. Selv om dette kan løse problemet, kan det også resultere i en annen Problem som eksisterer hvis en annen ramme, et bibliotek eller en annen modul er inkludert i koden din.
Til det formål anbefaler jeg bare å bruke dette når du er helt sikker på at du vet hva du gjør, og at det ikke vil påvirke andre rammer.
$ Men hva om du ikke vet at det ikke vil påvirke andre rammer. Hva da? I dette tilfellet har du muligheten til å initialisere koden slik at den starter med grunnleggende jQuery funksjon og bruk deretter $ å bruke snarveien i konteksten til din egen kode.
Lyd komplisert? Ikke bekymre deg. Det er ikke dårlig. La oss redigere JavaScript-kildefilen vår for å inneholde følgende:
(funksjon ($) 'bruk streng'; $ (funksjon () alarm ('JavaScript Loaded!'););) (jQuery); Ok, her er hva som skjer:
jQuery).$ og vil bli scoped bare innenfor sammenheng med vår anonyme funksjon.Dette betyr at vi er fri til å bruke $ fungere imidlertid vi ser hensiktsmessig, uten å faktisk forstyrre andre implementeringer av den aktuelle funksjonen. Faktisk, for hva det er verdt, er dette noe de facto-måten å sette opp din jQuery-baserte kode på.
Ikke alle gjør det på denne måten, men dette er en veldig vanlig, veldig trygg måte å håndtere det slik at du kan unngå det hele udefinert feilmelding.
Absolutt. Men utfordringen er å finne ut hvordan de skal dekke dem alle. Sannheten er, jeg vet ikke om det faktisk er mulig fordi det på et tidspunkt blir kompleksiteten til webprosjektene så bra at sporing av hvor problemet eksisterer, kan være tøft.
Videre kan endring av jQuery å gjøre det du vil at den skal gjøre, ende opp med å bryte noe annet (noe som tydeligvis aldri er bra).
I stedet er det best å holde fast i det vi vet er trygt, som den anonyme funksjonstilnærmingen som er nevnt ovenfor, og ikke å misbruke ting som noConflict () metode. Tross alt er en del av god utvikling ikke bare bra med andre menneskers kode, men skriver kode som andre kan spille fint også.
Som beskrevet ovenfor er det en rekke forskjellige ting som kan utløse jQuery er udefinert melding i konsollen. Vi har forsøkt å se på flere av de vanligste problemene i eksemplene ovenfor.
Når det er sagt, er det vanskelig å være uttømmende fordi det er nesten umulig å dekke alle kombinasjonene og permutasjonene du måtte ha satt opp i prosjektet. Kanskje du bruker et motstridende bibliotek, kanskje det er et dårlig skrevet plugin, eller kanskje er det bare avhengigheter som ikke er ordentlig bestilt.
Uansett hva som helst, hjelper dette forhåpentligvis med å forklare hva Problemet er og noen måter du kan gå videre med å diagnostisere det. Hvis løsningen ikke ble beskrevet her, så vær så snill å la den stå i kommentarene.
.
