Varför är jQuery odefinierad?

För de avancerade JavaScript-utvecklarna (och de avancerade jQuery-utvecklarna) bland våra läsare kommer denna artikel inte att vara till stor hjälp. Istället kommer vi att fokusera på dem som bara har börjat med jQuery.

Kanske har du gått igenom flera JavaScript-handledning, byggt flera små webbplatser eller projekt som innehåller JavaScript till sidan (eller webbplatsen) till viss del, och nu är du redo att komma igång med en ny ram eller ett bibliotek.

Om du läser den här handledningen antar du att du är intresserad av att komma igång med jQuery. Eller kanske har du redan börjat med jQuery men du stöter på ett par hinder som hindrar ditt lärande.

Så frustrerande som det kan vara att lära sig något nytt, slå ett vägspärr och sedan repetera det lite längre nerför linjen, silverfodret är att chansen är att dina problem har lösts av någon annan.

Detta är inte nödvändigtvis sant för mer komplexa applikationer, men när du lär dig något nytt är du inte den första personen att studsa längs inlärningskurvan. För det ändamålet kan du troligen lära dig något från någon som har varit där tidigare. 

Och det är precis vad vi ska täcka i den här handledningen. Närmare bestämt kommer vi att prata om problemet när du får felmeddelandet:

Uncaught ReferenceError: jQuery är odefinierad

Förstå problemet

Innan vi kommer till lösningen, låt oss se exakt vad som händer. Det vill säga för att förstå hur vi kommer fram till vår lösning, måste vi förstå problemet. Först då kan vi veta hur man löser det som visas i konsolen.

Om du är bekant med JavaScript, så vet du hur förvirrande odefinierad kan verkligen vara, det vill säga, talar vi om det globala objektet eller ett primitivt värde? Det ligger utanför omfånget för detta inlägg (ingen ordsprog är avsedd!), Men även om du inte är bekant med någon definition betyder det inte att du inte kan diagnostisera problemet.

Ställ in en sandlåda

Låt oss först gå och skapa en sida som innehåller grunderna för vad vi behöver för att kunna arbeta med jQuery-biblioteket för att reproducera det fel som vi ser ovan.

Börja med att skapa följande HTML-fil och spara den någonstans på din lokala maskin där du enkelt kan ladda upp den i en webbläsare.

             
Det här är en grundläggande HTML-sandlåda.
   

Tänk på att vi inkluderar några CSS i den här filen. Det är helt frivilligt, men om du vill följa med den här handledningen steg för steg kan du hämta ett arkiv av allt detta från höger sida av det här inlägget.

Även om CSS är valfri, är JavaScript inte. Observera att vi inkluderar jQuery-biblioteket från ett innehållsleveransnätverk (eller en CDN) så att vi inte behöver inkludera det i våra projektets källfiler.

Låt oss sedan skapa en JavaScript-källfil som vi kan använda för att återskapa felet ovan och skriva en testkod för att lösa problemet. Vi ringer det main.js.

$ (funktion () );

Därefter inkludera källfilen i ditt HTML-dokument så att den sista filen ser ut så här:

              
Det här är en grundläggande HTML-sandlåda.
   

Nu borde du kunna ladda upp sidan i din webbläsare och se något nästan som konsolbilden som delas ovan.

Verifiera att JavaScript är laddat

Innan vi går vidare, låt oss gå vidare och se till att JavaScript-filen är laddad korrekt. För att göra detta ska vi skapa en enkel varning så att ett meddelande visas när sidan laddas i webbläsaren.

För att se den här skärmen gör du följande ändring i JavaScript-källfilen:

$ (funktion () alert ('JavaScript Loaded!'););

Kontrollera sedan att du ombeställer JavaScript-filer från:

Till:

Vi pratar mer om detta i en liten bit.

Uppdatera sidan här. Antag att allt gick bra fram till den här punkten, så ska du se dialogrutan som visas på bilden ovan. Om det inte fungerar kan du titta över koden ovan (eller ladda ner filerna som bifogas denna handledning) och se till att du har laddat allt.

Reproducera problemet

Nu när vi har satt upp sandlåten så att vi kan börja utforska problemet i djupet, låt oss ta en titt på några potentiella problem som du kan se när du arbetar med jQuery.

1. jQuery är laddad efter din kod

När du väljer att använda jQuery i ett projekt betyder det att jQuery blir ett beroende för ditt arbete. Och när du arbetar med beroenden måste du i allmänhet se till att de är laddade innan din kod så att din kod kan dra nytta av den.

Om du märker i den första delen av koden ovan laddas vår JavaScript-fil innan jQuery, så kan vi inte göra någonting vi vill göra med jQuery. Anledningen till att du ser odefinierad felmeddelande som vi diskuterade tidigare beror på att jQuery bokstavligen inte definieras inom ramen för din kod.

Dvs. din kod har ingen aning om att jQuery ens existerar eftersom jQuery är laddad efter din kod. Lyckligtvis är det här en enkel fix. Ändra helt enkelt den ordning som filerna laddas i, det vill säga placera jQuery ovanför din källfil och försök sedan köra koden en gång till.

Efter ändringen bör hela HTML se ut så här:

              
Det här är en grundläggande HTML-sandlåda.
   

Din kod ska fungera och konsolen ska inte visa några fel. Detta är troligtvis det enklaste problemet att lösa, men det är förmodligen en av de minst vanliga fel att se, eftersom det vanligtvis antas att jQuery måste laddas först.

2. Ett motstridigt plugin eller en fil

När du arbetar med jQuery, gillar utvecklare ibland att modifiera $ funktion så att den inte stämmer överens med något annat som källkoden använder.

Specifikt, jQuery är namnet på funktionen i jQuery-källkoden. Biblioteket använder $ som en synonym eller en genväg eftersom det sannolikt kommer att användas så ofta. Det gör koden enklare att skriva och lättare att läsa.

Inga konflikter

Men det är inte den enda JavaScript-koden som använder den funktionen och ibland måste utvecklare behöva använda en annan funktion eller avstå från $ till en annan bit av källkoden. För att göra det kan de sluta använda jQuery.noConflict (). 

Direkt från API:

Många JavaScript-bibliotek använder $ som en funktion eller ett variabelt namn, precis som jQuery gör. I jQuery s fall, $ är bara ett alias för jQuery, så all funktionalitet är tillgänglig utan att använda $. 

Om du behöver använda ett annat JavaScript-bibliotek vid sidan av jQuery, returnera kontrollen av $ tillbaka till det andra biblioteket med ett samtal till $ .NoConflict (). Gamla referenser till $ sparas under jQuery-initialisering noConflict () helt enkelt återställer dem.

Så någonstans I koden som du har inkluderat finns det en chans att en annan utvecklare har ringt till den här funktionen. Således $ funktionen kommer inte att vara tillgänglig. Det kan eventuellt ringa en annan funktion än jQuery själv, eller det skulle kunna ringa en funktion som är odefinierad. 

I vårt fall är vi intresserade av det senare. För att lösa detta kan vi prova ett par lösningar. Först kan vi försöka återställa tillgången till $ funktion genom att helt enkelt ringa jQuery.noConflict () igen. Även om detta kan lösa problemet kan det också leda till annan Problem som finns om en annan ram, ett bibliotek eller någon annan modul ingår i din kod.

För det ändamålet rekommenderar jag bara att du använder det när du är helt säker på att du vet vad du gör och att det inte kommer att påverka andra ramar.

Korrekt omfattning $

Men vad händer om du inte vet att det inte kommer att påverka andra ramar. Vad händer då? I det här fallet har du möjlighet att initiera din kod så att den börjar med det grundläggande jQuery funktionen och använd sedan $ att tillämpa genvägsfunktionen i sammanhanget med din egen kod.

Ljud komplicerat? Oroa dig inte. Inte illa. Låt oss redigera vår JavaScript-källfil för att innehålla följande:

(funktion ($) 'använd sträng'; $ (funktion () alert ('JavaScript Loaded!'););) (jQuery); 

Okej, här är vad som händer:

1. Vi förklarar en anonym funktion som accepterar ett enda argument (i vårt fall, jQuery).
2. Funktionen kommer att skickas och refereras av $ och kommer att scoped endast inom ramen för vår anonyma funktion.

Det betyder att vi är fria att använda $ funktion men vi ser passande, utan att verkligen störa någon annan implementering av den specifika funktionen. Faktum är att det för det är värt, det här är något av de faktiska sätten att ställa in din jQuery-baserade kod. 

Inte alla gör det så här, men det här är en mycket vanlig, väldigt säker sätt att hantera det så att du kan undvika hela odefinierad felmeddelande.

3. Finns det mer?

Absolut. Men utmaningen är att räkna ut hur man täcker dem alla. Sanningen är att jag inte vet om det faktiskt är möjligt för att på något sätt blir webprojektens komplexitet så stor att spårning där problemet finns kan vara svårt.

Dessutom kan ändra jQuery för att göra vad du vill att den ska göra, kanske sluta bryta något annat (vilket givetvis aldrig är en bra sak).

Istället är det bäst att hålla fast vid det som vi vet är säkert - som den anonyma funktionen som nämns ovan - och inte att missbruka saker som noConflict () metod. En del av bra utveckling trivs inte bara bra med andras kod, utan skriver också kod som andra kan spela bra också.

Slutsats

Som beskrivits ovan finns det ett antal olika saker som kan utlösa jQuery är odefinierad meddelande i konsolen. Vi har försökt se på flera av de vanligaste problemen i exemplen ovan.

Det sagt är det svårt att vara uttömmande eftersom det är nästan omöjligt att täcka alla de kombinationer och permutationer som du kanske har satt upp i ditt projekt. Kanske använder du ett motstridigt bibliotek, kanske det är ett dåligt skrivet plugin, eller kanske finns det bara beroenden som inte ordentligt beställs.

Vad som än är fallet, hjälper det här förhoppningsvis att förklara Vad problemet är och några sätt att du kan gå vidare med att diagnostisera det. Om din lösning inte beskrivs här, var god vänligen lämna den i kommentarerna.

.