Share
Pentru dezvoltatorii avansați de JavaScript (și dezvoltatorii jQuery avansați) printre cititorii noștri, acest articol nu va fi de mare ajutor. În schimb, vom fi axați pe cei care încep cu jQuery.
Poate că ați parcurs mai multe tutoriale JavaScript, ați construit mai multe site-uri sau proiecte mici care încorporează JavaScript într-o anumită măsură în pagină (sau site-ul) și acum sunteți gata să începeți cu un nou cadru sau o bibliotecă.
Dacă citiți acest tutorial, atunci presupun că sunteți interesat să începeți cu jQuery. Sau poate că ați început deja cu jQuery, dar întâmpinați câteva obstacole care vă împiedică învățarea.
Așa cum este frustrant cum poate fi să înveți ceva nou, să lovești un blocaj rutier și apoi să-l repet puțin mai departe, linia de argint este că șansele sunt că problemele tale au fost rezolvate de altcineva.
Acest lucru nu este neapărat adevărat pentru aplicații mai complexe, dar când învățați ceva nou, nu sunteți prima persoană care săriți de-a lungul curbei de învățare. În acest scop, probabil că veți putea afla ceva de la cineva care a fost acolo înainte.
Și exact asta vom acoperi în acest tutorial. Mai precis, vom vorbi despre problema când primiți mesajul de eroare:
Uncaught ReferenceError: jQuery este nedefinit
Înainte de a ajunge la soluție, să examinăm exact ce se întâmplă. Adică, pentru a înțelege cum ajungem la soluția noastră, trebuie să înțelegem problema. Doar atunci putem să știm cum să rezolvăm ceea ce este afișat în consolă.
Dacă sunteți familiarizat cu JavaScript, atunci știți cât de confuz nedefinit poate fi într-adevăr - adică, vorbim despre obiect global sau o valoare primitivă? Acest lucru este dincolo de scopul acestui post (nici un cuvânt nu intenționează!), Dar chiar dacă nu sunteți familiarizați cu nici o definiție, asta nu înseamnă că nu sunteți capabil de a diagnostica problema.
Mai întâi, să mergem mai departe și să creăm o pagină care să conțină elementele de bază ale ceea ce avem nevoie pentru a lucra cu biblioteca jQuery pentru a reproduce eroarea pe care o vedem mai sus.
Începeți prin a crea următorul fișier HTML și salvați-l undeva pe mașina dvs. locală, unde veți putea încărca cu ușurință într-un browser web.
Acesta este un nisip de bază HTML.
Luați notă că includem unele CSS în acest fișier. Este complet opțional, deși dacă doriți să urmați împreună cu acest tutorial pas cu pas, puteți descărca o arhivă cu toate acestea din partea dreaptă a acestui post.
Deși CSS este opțional, JavaScript nu este. Rețineți că includem biblioteca jQuery dintr-o rețea de distribuire a conținutului (sau un CDN), astfel încât să nu trebuiască să o includem în fișierele sursă ale proiectului.
Apoi, creați un fișier sursă JavaScript pe care îl putem folosi pentru a recrea eroarea de mai sus și pentru a scrie un cod de test pentru a rezolva problema. O să-l sunăm main.js.
$ (funcția () );
După aceasta, includeți fișierul sursă în documentul dvs. HTML astfel încât fișierul final să arate astfel:
Acesta este un nisip de bază HTML.
Acum ar trebui să puteți încărca pagina în browser și să vedeți ceva aproape exact cum ar fi imaginea consolei partajată mai sus.
Înainte de a merge mai departe, hai să mergem mai departe și asigurați-vă că fișierul JavaScript este încărcat corect. Pentru a face acest lucru, vom seta o alertă simplă, astfel încât să fie afișat un mesaj ori de câte ori pagina este încărcată în browser.
Pentru a vedea acest ecran, efectuați următoarea modificare a fișierului sursă JavaScript:
Accentsconagua
$ (funcția () alert ('JavaScript încărcat!'););Apoi, asigurați-vă că re-comandați fișierele JavaScript din:
La:
Vom vorbi mai mult despre asta în câteva momente.
În acest moment, actualizați pagina. Presupunând că toate au mers până la acest punct, atunci ar trebui să vedeți dialogul așa cum este demonstrat în imaginea de mai sus. Dacă aceasta nu funcționează, căutați codul de mai sus (sau descărcați fișierele atașate la acest tutorial) și asigurați-vă că ați încărcat corect totul.
Acum, când am instalat sandbox-ul pentru a putea începe să explorăm problema în profunzime, să aruncăm o privire la unele probleme potențiale pe care le-ați putea vedea când lucrați cu jQuery.
Ori de câte ori alegeți să utilizați jQuery într-un proiect, aceasta înseamnă că jQuery devine o dependență pentru munca dvs. Și ori de câte ori lucrați cu dependențe, în general trebuie să vă asigurați că sunt încărcate inainte de codul dvs. astfel încât codul să poată profita de el.
Dacă observați în primul bit al codului de mai sus, fișierul nostru JavaScript este încărcat inainte de jQuery, deci orice ne-ar plăcea să facem cu jQuery nu se poate face. Motivul pentru care vedeți nedefinit mesajul de eroare pe care l-am discutat mai devreme se datorează faptului că jQuery nu este definit literal în contextul codului dvs..
Adică codul dvs. nu are nicio idee că jQuery există chiar pentru că jQuery este încărcat după Codul tau. Din fericire, acesta este un remediu simplu. Pur și simplu modificați ordinea în care sunt încărcate fișierele - adică plasați jQuery deasupra fișierului sursă și apoi încercați să executați din nou codul.
După modificare, HTML-ul complet ar trebui să arate astfel:
Acesta este un nisip de bază HTML.
Codul dvs. ar trebui să funcționeze și consola nu ar trebui să afișeze erori. Aceasta este probabil cea mai ușoară problemă de rezolvat, dar este probabil una dintre cele mai puțin frecvente erori de văzut, deoarece se presupune, în general, că jQuery va trebui să fie încărcată mai întâi.
Când lucrați cu jQuery, uneori dezvoltatorii preferă să modifice $ astfel incat sa nu intre in conflict cu altceva folosit de codul sursa.
Specific, jQuery este numele funcției din cadrul codului sursă jQuery. Biblioteca folosește $ ca sinonim sau o comandă rapidă, deoarece este probabil să fie folosit atât de des. Aceasta face codul mai ușor de scris și mai ușor de citit.
Dar nu este singurul cod JavaScript care utilizează această funcție și uneori dezvoltatorii vor trebui să utilizeze o funcție diferită sau să renunțe la aceasta $ la un alt bit de cod sursă. Pentru a face acest lucru, ei pot ajunge la destinație jQuery.noConflict ().
Direct de la API:
Multe biblioteci JavaScript folosesc$ca nume de funcție sau de variabilă, la fel cum face jQuery. În cazul jQuery,$este doar un alias pentrujQuery, astfel încât toate funcționalitățile sunt disponibile fără utilizare$.
Dacă aveți nevoie să utilizați o altă bibliotecă JavaScript alături de jQuery, reveniți la controlul$înapoi la cealaltă bibliotecă cu un apel către$ .NoConflict (). Referințe vechi ale$sunt salvate în timpul inițializării jQuery;noConflict ()le restabilește pur și simplu.
Asa de undeva în codul pe care l-ați inclus, este posibil ca un alt dezvoltator să fi sunat la această funcție. Astfel, $ funcția nu va fi accesibilă. S-ar putea să se numească o funcție diferită de jQuery ea însăși sau ar putea numi o funcție care este nedefinit.
În cazul nostru, suntem interesați de acesta din urmă. Pentru a aborda acest lucru, putem încerca câteva soluții. În primul rând, putem încerca să recuperăm accesul la $ funcția prin simpla chemare jQuery.noConflict () din nou. Deși acest lucru ar putea rezolva problema, poate avea ca rezultat o alta problema care există dacă un alt cadru, o bibliotecă sau un alt modul este inclus împreună cu codul.
În acest scop, recomand doar să folosiți acest lucru ori de câte ori sunteți absolut sigur că știți ce faceți și că nu va afecta alte cadre.
$ Dar dacă tu nu face știu că nu va afecta alte cadre. Ce atunci? În acest caz, aveți posibilitatea de a inițializa codul astfel încât să pornească de la elementul de bază jQuery funcția și apoi utilizați $ pentru a extinde funcția de comenzi rapide în contextul propriului cod.
Sunet complicat? Nu-ți face griji. Nu este rău. Să editați fișierul sursă JavaScript care să conțină următoarele:
(functie ($) 'use strict'; $ (function () alert ('JavaScript Loaded!'););) (jQuery); Bine, iată ce se întâmplă:
jQuery).$ și va fi cuprins doar în contextul funcției noastre anonime.Aceasta înseamnă că suntem liberi să folosim $ funcția pe care o considerăm potrivită, fără a interfera cu alte implementări ale respectivei funcții. De fapt, pentru ceea ce merită, aceasta este oarecum modalitatea de facto de a configura codul bazat pe jQuery.
Nu toata lumea face acest lucru, dar aceasta este o modalitate foarte comună și foarte sigură de ao trata, astfel încât să puteți evita întregul nedefinit mesaj de eroare.
Absolut. Dar provocarea este de a afla cum să le acopere pe toate. Adevărul este că nu știu dacă este posibil, deoarece, la un moment dat, complexitatea proiectelor web devine atât de mare încât urmărirea unde există problema poate fi dificilă.
Mai mult, schimbarea jQuery pentru a face ceea ce vrei să faci poate duce la ruperea altceva (ceea ce, evident, nu este niciodată un lucru bun).
În schimb, este mai bine să rămânem cu ceea ce știm că este sigur - ca în abordarea funcției anonime menționată mai sus - și să nu abuzeze de lucruri precum noConflict () metodă. La urma urmei, o parte a dezvoltării bune nu numai că se joacă frumos cu codul altor oameni, ci scrie cod cu care alții pot juca frumos.
Așa cum am subliniat mai sus, există o serie de lucruri diferite care ar putea declanșa jQuery este nedefinit mesaj în consola dvs. Am încercat să analizăm câteva dintre cele mai frecvente probleme din exemplele de mai sus.
Acestea fiind spuse, este greu să fii exhaustiv, pentru că este aproape imposibil să acoperi toate combinațiile și permutările pe care le-ai stabilit în proiectul tău. Poate că utilizați o bibliotecă aflată în conflict, poate că este un plugin prost scris sau poate că există doar dependențe care nu sunt ordonate corect.
Indiferent de situație, acest lucru ne ajută să explicăm ce problema este și unele modalități pe care le puteți trece înainte cu diagnosticarea acesteia. Dacă soluția dvs. nu a fost prezentată aici, vă rugăm să nu ezitați să o lăsați în comentariu.
.
