Share
Voor de gevorderde JavaScript-ontwikkelaars (en de gevorderde ontwikkelaars van jQuery) onder ons lezerspubliek, zal dit artikel niet veel van nut zijn. In plaats daarvan zullen we ons concentreren op diegenen die net begonnen zijn met jQuery.
Misschien heb je verschillende JavaScript-tutorials doorgenomen, een aantal kleine sites of projecten gebouwd die JavaScript in de pagina (of de site) integreren, en nu ben je klaar om aan de slag te gaan met een nieuw framework of een nieuwe bibliotheek.
Als je deze tutorial aan het lezen bent, neem ik aan dat je geïnteresseerd bent om aan de slag te gaan met jQuery. Of misschien ben je al begonnen met jQuery, maar je ondervindt een aantal hindernissen die je leren belemmeren.
Hoe frustrerend het kan zijn om iets nieuws te leren, een wegversperring te raken en het dan een beetje verder te herhalen, de zilveren rand is dat de kans groot is dat je problemen zijn opgelost door iemand anders.
Dit is niet noodzakelijkerwijs het geval voor complexere applicaties, maar als je iets nieuws leert, ben je niet de eerste die op de leercurve stuitert. Daartoe kun je waarschijnlijk iets leren van iemand die er eerder is geweest.
En dat is precies wat we in deze tutorial zullen behandelen. In het bijzonder gaan we het hebben over het probleem wanneer u het foutbericht ontvangt:
Uncaught ReferenceError: jQuery is undefined
Voordat we tot de oplossing komen, bekijken we eerst wat er precies gebeurt. Dat wil zeggen, om te begrijpen hoe we tot onze oplossing komen, moeten we het probleem begrijpen. Alleen dan kunnen we weten hoe we moeten oplossen wat in de console wordt weergegeven.
Als je bekend bent met JavaScript, dan weet je hoe verwarrend onbepaald kan echt zijn - dat wil zeggen, hebben we het over het globale object of een primitieve waarde? Dat valt buiten het bestek van deze post (geen woordspeling!), Maar zelfs als u niet bekend bent met een van beide definities, betekent dat niet dat u niet in staat bent het probleem te diagnosticeren.
Laten we eerst een pagina instellen die de basis bevat van wat we nodig hebben om met de jQuery-bibliotheek te werken om de fout te reproduceren die we hierboven zien.
Begin met het maken van het volgende HTML-bestand en sla het ergens op uw lokale computer op waar u het eenvoudig in een webbrowser kunt laden.
Dit is een eenvoudige HTML-sandbox.
Houd er rekening mee dat we sommige CSS in dit bestand opnemen. Het is volledig optioneel, maar als je deze tutorial stap voor stap wilt volgen, kun je een archief downloaden van dit alles aan de rechterkant van dit bericht..
Hoewel de CSS optioneel is, is JavaScript dat niet. Merk op dat we de jQuery-bibliotheek opnemen van een content delivery-netwerk (of een CDN), zodat we deze niet hoeven opnemen in de bronbestanden van ons project.
Laten we vervolgens een JavaScript-bronbestand maken dat we kunnen gebruiken om de bovenstaande fout opnieuw te maken en om een aantal testcodes te schrijven om het probleem op te lossen. We zullen het noemen main.js.
$ (function () );
Neem daarna het bronbestand in uw HTML-document op, zodat het uiteindelijke bestand er als volgt uitziet:
Dit is een eenvoudige HTML-sandbox.
Nu zou je de pagina in je browser moeten kunnen laden en iets kunnen zien dat bijna precies hetzelfde is als de hierboven gedeelde console-afbeelding.
Voordat we verder gaan, laten we ervoor zorgen dat het JavaScript-bestand correct is geladen. Om dit te doen, stellen we een eenvoudige waarschuwing in zodat een bericht wordt weergegeven wanneer de pagina in de browser is geladen.
Om dit scherm te bekijken, wijzig de volgende wijzigingen in uw JavaScript-bronbestand:
Accentsconagua
$ (function () alert ('JavaScript Loaded!'););Zorg er vervolgens voor dat u de JavaScript-bestanden opnieuw sorteert van:
Naar:
We zullen er in een klein beetje meer over praten.
Vernieuw de pagina op dit punt. Ervan uitgaande dat alles goed is gegaan tot op dit punt, zou je de dialoog moeten zien zoals aangetoond in de bovenstaande afbeelding. Als dat niet werkt, kijk dan eens naar de bovenstaande code (of download de bestanden die bij deze tutorial zijn gevoegd) en zorg ervoor dat alles correct is geladen.
Nu we de sandbox zo hebben ingesteld dat we het probleem diepgaand kunnen onderzoeken, laten we eens kijken naar enkele potentiële problemen die kunnen optreden bij het werken met jQuery.
Wanneer u ervoor kiest om jQuery in een project te gebruiken, betekent dit dat jQuery afhankelijk wordt van uw werk. En telkens wanneer u met afhankelijkheden werkt, moet u over het algemeen controleren of ze zijn geladen voor uw code zodat uw code er gebruik van kan maken.
Als u in het eerste stukje code hierboven opmerkt, wordt ons JavaScript-bestand geladen voor jQuery, dus alles wat we met jQuery willen doen, kan niet echt worden gedaan. De reden dat je de onbepaald foutbericht dat we eerder hebben besproken, is omdat jQuery letterlijk niet is gedefinieerd in de context van uw code.
Dat wil zeggen, uw code heeft geen idee dat jQuery bestaat, omdat jQuery is geladen na jouw code. Gelukkig is dit een eenvoudige oplossing. Verander eenvoudig de volgorde waarin de bestanden worden geladen, dat wil zeggen, plaats jQuery boven uw bronbestand en probeer de code nogmaals uit te voeren.
Na de wijziging zou de volledige HTML er als volgt uit moeten zien:
Dit is een eenvoudige HTML-sandbox.
Uw code zou moeten werken en de console zou geen fouten moeten weergeven. Dit is waarschijnlijk het gemakkelijkste probleem om op te lossen, maar het is waarschijnlijk een van de minst voorkomende fouten om te zien, omdat algemeen wordt aangenomen dat jQuery eerst moet worden geladen.
Bij het werken met jQuery willen ontwikkelaars soms het $ functie zodat het niet conflicteert met iets anders dat hun broncode gebruikt.
specifiek, jQuery is de naam van de functie binnen de jQuery-broncode. De bibliotheek gebruikt $ als een synoniem of een snelkoppeling omdat het waarschijnlijk zo vaak zal worden gebruikt. Het maakt de code gemakkelijker te typen en gemakkelijker te lezen.
Maar het is niet de enige JavaScript-code die die functie gebruikt en soms moeten ontwikkelaars een andere functie gebruiken of de $ naar een ander stukje broncode. Om dit te doen, kunnen ze uiteindelijk gebruiken jQuery.noConflict ().
Rechtstreeks vanuit de API:
Veel JavaScript-bibliotheken gebruiken$als een functie of variabele naam, precies zoals jQuery dat doet. In het geval van jQuery,$is gewoon een alias voorjQuery, dus alle functionaliteit is beschikbaar zonder te gebruiken$.
Als u naast jQuery een andere JavaScript-bibliotheek wilt gebruiken, stuurt u de controle terug van$terug naar de andere bibliotheek met een oproep naar$ .NoConflict (). Oude referenties van$worden opgeslagen tijdens de initialisatie van jQuery;geen conflict()herstelt ze gewoon.
Zo ergens in de code die u heeft opgenomen, bestaat de kans dat een andere ontwikkelaar een oproep heeft gedaan naar deze functie. Dus, de $ functie zal niet toegankelijk zijn. Het kan mogelijk een andere functie dan jQuery zelf, of het zou een functie kunnen noemen die dat wel is onbepaald.
In ons geval zijn we geïnteresseerd in het laatste. Om dit aan te pakken, kunnen we een aantal oplossingen proberen. Ten eerste kunnen we proberen de toegang tot het $ functie door gewoon te bellen jQuery.noConflict () nogmaals. Hoewel dit het probleem kan oplossen, kan dit ook leiden tot een ander probleem dat zich voordoet als een ander kader, bibliotheek of een andere module bij uw code wordt gevoegd.
Daarom raad ik aan dit alleen te gebruiken wanneer je absoluut zeker weet dat je weet wat je doet en dat het geen invloed heeft op andere frameworks.
$ Maar wat als jij niet doen weet dat het andere kaders niet zal beïnvloeden. Wat dan? In dit geval hebt u de mogelijkheid om uw code zodanig te initialiseren dat deze met de basis begint jQuery functie en gebruik vervolgens de $ om de snelkoppelingsfunctie uit te breiden naar de context van uw eigen code.
Klinkt dit ingewikkeld? Maak je geen zorgen. Het is niet slecht. Laten we ons JavaScript-bronbestand bewerken om het volgende te bevatten:
(functie ($) 'gebruik strict'; $ (function () alert ('JavaScript Loaded!'););) (jQuery); Oké, hier is wat er gebeurt:
jQuery).$ en zal alleen worden toegepast binnen de context van onze anonieme functie.Dit betekent dat we vrij zijn om de. Te gebruiken $ functioneert echter naar eigen goeddunken, zonder dat het daadwerkelijk interfereert met andere implementaties van die specifieke functie. In feite, voor wat het waard is, is dit enigszins de de-facto manier om je jQuery-gebaseerde code in te stellen.
Niet iedereen doet het op deze manier, maar dit is een heel gebruikelijke, zeer veilige manier om ermee om te gaan, zodat je het geheel kunt vermijden onbepaald foutmelding.
Absoluut. Maar de uitdaging is om erachter te komen hoe ze allemaal moeten worden afgedekt. De waarheid is, ik weet niet of het echt mogelijk is, want op een gegeven moment wordt de complexiteit van webprojecten zo groot dat het opsporen van het probleem moeilijk kan zijn.
Verder kan het veranderen van jQuery om te doen wat je wilt dat het uiteindelijk iets anders zal breken (wat natuurlijk nooit een goede zaak is).
In plaats daarvan is het het beste om vast te houden aan wat we weten dat veilig is - net als de anonieme functiebenadering die hierboven is genoemd - en geen dingen te misbruiken zoals de geen conflict() methode. Een deel van de goede ontwikkeling is immers niet alleen leuk spelen met de code van anderen, maar ook het schrijven van code waarmee anderen leuk kunnen spelen..
Zoals hierboven beschreven, zijn er een aantal verschillende dingen die de jQuery is undefined bericht in uw console. We hebben geprobeerd een aantal van de meest voorkomende problemen in de bovenstaande voorbeelden te bekijken.
Dat gezegd hebbende, is het moeilijk om uitputtend te zijn, omdat het bijna onmogelijk is om alle combinaties en permutaties te dekken die je mogelijk hebt ingesteld in je project. Misschien gebruikt u een conflicterende bibliotheek, misschien is het een slecht geschreven plug-in, of misschien zijn er gewoon afhankelijkheden die niet goed zijn geordend.
Hoe het ook zij, dit helpt hopelijk om het uit te leggen wat het probleem is en sommige manieren waarop u verder kunt gaan met het stellen van een diagnose. Als uw oplossing hier niet is beschreven, kunt u deze in de opmerkingen achterlaten.
.
