Share
Per gli sviluppatori JavaScript avanzati (e gli sviluppatori avanzati di jQuery) tra i nostri lettori, questo articolo non sarà di grande aiuto. Invece, ci concentreremo su coloro che stanno appena iniziando con jQuery.
Forse hai svolto diverse esercitazioni in JavaScript, hai realizzato diversi piccoli siti o progetti che incorporano JavaScript nella pagina (o nel sito) in una certa misura, e ora sei pronto per iniziare con un nuovo framework o libreria.
Se stai leggendo questo tutorial, presumo che tu sia interessato a iniziare con jQuery. O forse hai già iniziato con jQuery ma stai incontrando un paio di ostacoli che ostacolano il tuo apprendimento.
Per quanto frustrante possa essere imparare qualcosa di nuovo, colpire un posto di blocco e poi doverlo ripetere un po 'più in basso, il rivestimento argentato è che è probabile che i tuoi problemi siano stati risolti da qualcun altro.
Questo non è necessariamente vero per le applicazioni più complesse, ma quando stai imparando qualcosa di nuovo, non sei il primo a rimbalzare lungo la curva di apprendimento. A tal fine, è probabile che tu possa imparare qualcosa da qualcuno che è stato lì prima.
Ed è esattamente quello che tratteremo in questo tutorial. Nello specifico, parleremo del problema quando si riceve il messaggio di errore:
Uncaught ReferenceError: jQuery non è definito
Prima di arrivare alla soluzione, esaminiamo esattamente cosa sta succedendo. Cioè, per capire come arriviamo alla nostra soluzione, dobbiamo capire il problema. Solo allora possiamo sapere come risolvere ciò che viene visualizzato nella console.
Se hai familiarità con JavaScript, allora sai quanto sia confuso non definito può davvero essere - cioè, stiamo parlando dell'oggetto globale o di un valore primitivo? Questo va oltre lo scopo di questo post (non è un gioco di parole!), Ma anche se non hai familiarità con nessuna delle due definizioni, ciò non significa che non sei in grado di diagnosticare il problema.
Innanzitutto, andiamo avanti e impostiamo una pagina che include le basi di ciò di cui abbiamo bisogno per lavorare con la libreria jQuery per riprodurre l'errore che vediamo sopra.
Inizia creando il seguente file HTML e salvandolo da qualche parte sulla tua macchina locale dove sarai in grado di caricarlo facilmente in un browser web.
Questa è una sandbox HTML di base.
Prendi nota che stiamo includendo alcuni CSS in questo file. È completamente opzionale, anche se ti piacerebbe seguire passo passo questo tutorial, puoi scaricare un archivio di tutto questo dal lato destro di questo post.
Sebbene il CSS sia facoltativo, il JavaScript non lo è. Nota che stiamo includendo la libreria jQuery da una rete di consegna dei contenuti (o una CDN) in modo che non dobbiamo includerla nei file sorgente del nostro progetto.
Successivamente, creiamo un file sorgente JavaScript che possiamo usare per ricreare l'errore di cui sopra e scrivere del codice di test per risolvere il problema. Lo chiameremo main.js.
$ (function () );
Successivamente, includi il file sorgente nel documento HTML in modo che il file finale assomigli a questo:
Questa è una sandbox HTML di base.
Ora dovresti essere in grado di caricare la pagina nel tuo browser e vedere qualcosa di simile all'immagine della console condivisa sopra.
Prima di andare avanti, andiamo avanti e assicurati che il file JavaScript sia caricato correttamente. Per fare ciò, imposteremo un semplice avviso in modo che venga visualizzato un messaggio ogni volta che la pagina viene caricata nel browser.
Per vedere questa schermata, apporta la seguente modifica al tuo file sorgente JavaScript:
Accentsconagua
$ (function () alert ('JavaScript Loaded!'););Quindi, assicurati di riordinare i file JavaScript da:
A:
Ne parleremo di più in un po '.
A questo punto, aggiorna la pagina. Supponendo che tutto sia andato bene fino a questo punto, allora dovresti vedere il dialogo come mostrato nell'immagine sopra. Se ciò non funziona, controlla il codice sopra (o scarica i file allegati a questo tutorial) e assicurati di aver caricato tutto correttamente.
Ora che abbiamo configurato la sandbox in modo che possiamo iniziare a esplorare il problema in profondità, diamo un'occhiata ad alcuni potenziali problemi che potresti vedere quando lavori con jQuery.
Ogni volta che si sceglie di utilizzare jQuery in un progetto, ciò significa che jQuery diventa una dipendenza per il proprio lavoro. E ogni volta che lavori con le dipendenze, generalmente devi assicurarti che siano caricati prima il tuo codice in modo che il tuo codice possa trarne vantaggio.
Se noti il primo bit del codice sopra, viene caricato il nostro file JavaScript prima jQuery, quindi tutto ciò che vorremmo fare con jQuery non può essere fatto. La ragione per cui stai vedendo il non definito messaggio di errore che abbiamo discusso in precedenza è perché jQuery non è letteralmente definito nel contesto del tuo codice.
Cioè, il tuo codice non ha idea che jQuery esista anche perché jQuery è caricato dopo il tuo codice. Fortunatamente, questa è una soluzione semplice. Basta cambiare l'ordine in cui i file vengono caricati, ovvero posizionare jQuery sopra il file sorgente, quindi provare ad eseguire nuovamente il codice.
Dopo la modifica, l'intero codice HTML dovrebbe assomigliare a questo:
Questa è una sandbox HTML di base.
Il tuo codice dovrebbe funzionare e la console non dovrebbe mostrare errori. Questo è probabilmente il problema più facile da risolvere, ma è probabilmente uno degli errori meno comuni da vedere, poiché generalmente si presuppone che jQuery debba essere caricato prima.
Quando si lavora con jQuery, a volte gli sviluppatori amano modificare il $ funzione in modo che non sia in conflitto con qualcos'altro che il loro codice sorgente utilizza.
In particolare, jQuery è il nome della funzione all'interno del codice sorgente di jQuery. La biblioteca utilizza $ come sinonimo o scorciatoia poiché è probabile che venga usato così spesso. Rende il codice più facile da digitare e più facile da leggere.
Ma non è l'unico codice JavaScript che usa quella funzione e, a volte, gli sviluppatori dovranno usare una funzione diversa o abbandonare il $ ad un altro bit del codice sorgente. Per fare ciò, possono finire per usare jQuery.noConflict ().
Direttamente dall'API:
Molte librerie JavaScript utilizzano$come funzione o nome di variabile, proprio come fa jQuery. Nel caso di jQuery,$è solo un alias perjQuery, quindi tutte le funzionalità sono disponibili senza l'uso$.
Se è necessario utilizzare un'altra libreria JavaScript insieme a jQuery, restituire il controllo di$torna all'altra libreria con una chiamata a$ .NoConflict (). Vecchi riferimenti di$vengono salvati durante l'inizializzazione di jQuery;noConflict ()semplicemente li ripristina.
Così da qualche parte nel codice che hai incluso, c'è la possibilità che un altro sviluppatore abbia effettuato una chiamata a questa funzione. Quindi, il $ la funzione non sarà accessibile. Potrebbe potenzialmente chiamare una funzione diversa da jQuery stesso, o potrebbe chiamare una funzione che è non definito.
Nel nostro caso, siamo interessati a quest'ultimo. Per risolvere questo problema, possiamo provare un paio di soluzioni. In primo luogo, possiamo provare a reclamare l'accesso al $ funzione semplicemente chiamando jQuery.noConflict () di nuovo. Anche se questo potrebbe risolvere il problema, potrebbe anche verificarsi un altro problema che esiste se un altro framework, libreria o qualche altro modulo è incluso nel tuo codice.
A tal fine, ti consiglio di utilizzarlo solo quando sei assolutamente sicuro di sapere cosa stai facendo e che non avrà alcun effetto su altri framework.
$ Ma cosa succede se tu non sappi che non influenzerà altri quadri. Cosa poi? In questo caso, hai la possibilità di inizializzare il tuo codice in modo tale che inizi con la base jQuery funzione e quindi utilizzare il $ per adattare la funzione di scelta rapida al contesto del proprio codice.
Sembra complicato? Non ti preoccupare Non è male. Modifichiamo il nostro file sorgente JavaScript per contenere quanto segue:
(function ($) 'use strict'; $ (function () alert ('JavaScript Loaded!'););) (jQuery); Bene, ecco cosa sta succedendo:
jQuery).$ e verrà esaminato solo nel contesto della nostra funzione anonima.Ciò significa che siamo liberi di usare il $ funzione tuttavia lo riteniamo opportuno, senza interferire in realtà con altre implementazioni di quella particolare funzione. In effetti, per quello che vale, questo è in qualche modo il modo de facto per impostare il codice basato su jQuery.
Non tutti fa in questo modo, ma questo è un modo molto comune, molto sicuro per gestirlo in modo da poter evitare il tutto non definito messaggio di errore.
Assolutamente. Ma la sfida è capire come coprirli tutti. La verità è che non so se sia effettivamente possibile perché, ad un certo punto, la complessità dei progetti web diventa così grande che rintracciare dove il problema esiste può essere difficile.
Inoltre, cambiando jQuery per fare ciò che vuoi che faccia potrebbe finire per rompere qualcos'altro (che ovviamente non è mai una buona cosa).
Invece, è meglio attenersi a ciò che sappiamo essere sicuro, come l'approccio alla funzione anonima sopra menzionato, e non abusare di cose come la noConflict () metodo. Dopotutto, parte del buon sviluppo non è solo giocare bene con il codice di altre persone, ma anche scrivere codice con cui altri possono giocare bene,.
Come descritto sopra, ci sono un certo numero di cose diverse che potrebbero innescare il jQuery non è definito messaggio nella tua console. Abbiamo cercato di esaminare alcuni dei problemi più comuni negli esempi sopra.
Detto questo, è difficile essere esaurienti perché è quasi impossibile coprire tutte le combinazioni e le permutazioni che potresti aver impostato nel tuo progetto. Forse stai usando una libreria in conflitto, forse è un plugin scritto male, o forse ci sono solo dipendenze che non sono correttamente ordinate.
Qualunque sia il caso, questo spero aiuta a spiegare che cosa il problema è e alcuni modi per andare avanti con la diagnosi. Se la tua soluzione non è stata delineata qui, non esitare a lasciarla nei commenti.
.
