Introduzione a jQuery (parte 3): attesa del caricamento della pagina e funzioni anonime

Annuncio

jQuery è probabilmente un'abilità essenziale per il moderno sviluppatore web Quale linguaggio di programmazione imparare - Programmazione WebOggi daremo uno sguardo ai vari linguaggi di programmazione web che alimentano Internet. Questa è la quarta parte di una serie di programmazione per principianti. Nella prima parte, abbiamo appreso le basi di... Per saperne di più , e in questa breve miniserie spero di darti le conoscenze per iniziare a utilizzarlo nei tuoi progetti web. Nel prima parte del nostro tutorial jQuery Tutorial jQuery - Per iniziare: Nozioni di base e selettoriLa scorsa settimana, ho parlato di quanto sia importante jQuery per qualsiasi sviluppatore web moderno e perché è fantastico. Questa settimana credo sia ora che ci sporchiamo le mani con un po' di codice e impariamo come... Per saperne di più , abbiamo esaminato alcuni fondamenti del linguaggio e come utilizzare i selettori; nella parte 2, siamo passati a metodi di manipolazione del DOM Introduzione a jQuery (Parte 2): metodi e funzioni

Questo fa parte di un'introduzione per principianti alla serie di programmazione web jQuery. La parte 1 ha trattato le basi di jQuery su come includerlo nel progetto e i selettori. Nella seconda parte, continueremo con... Per saperne di più .

Nella parte 3, affronteremo il problema di come ritardare jQuery fino al caricamento della pagina, quindi cercherò di spiegare cosa sono le funzioni anonime e perché è necessario conoscerle.

Caricamento ritardato: come e perché?

Se hai provato parte del codice dalla parte 1 e 2, potresti aver riscontrato alcuni errori, comportamenti strani o cose semplicemente non funzionanti. L'errore più comune che ho riscontrato durante l'apprendimento di jQuery è stato quello di elementi DOM non trovati, anche anche se potevo vederli chiaramente nella fonte della pagina, jQuery continuava a dirmi che non riusciva a trovarli loro! Perché?

Bene, tutto ha a che fare con l'ordine in cui le cose vengono caricate dal browser. Nella maniera più semplice, se hai uno script jQuery in esecuzione nel browser prima l'elemento DOM che sta cercando è stato effettivamente creato, lo script verrà caricato per primo, ma non farà nulla perché non riesce a trovare l'elemento, quindi l'elemento DOM verrà caricato in seguito. Questo è meno problematico se metti tutti i tuoi script vicino al piè di pagina, ma può ancora succedere.

La soluzione è avvolgere i tuoi script in quello che viene chiamato a evento documento pronto. Questo fa sì che il codice allegato attenda fino a quando il DOM non è stato completamente caricato (fino a quando non è pronto). Usarlo è semplice:

$(documento).ready (funzione(){ //il tuo codice per ritardare va qui. });

C'è un modo ancora più breve per farlo descritto nel documentazione jQuery, ma ti consiglio caldamente di utilizzare questo metodo per la leggibilità del codice.

Questo evento di documento pronto è un altro buon esempio di an funzione anonima, quindi cerchiamo di capire cosa significa.

Funzioni anonime

Se come me hai un'esperienza di programmazione di livello principiante alle spalle, l'idea di funzioni anonime – che è fondamentale per jQuery e Javascript – potrebbe essere un po' sconcertante. Per uno, commette errori a causa di parentesi non corrispondenti abbastanza comuni, motivo per cui lo spiegherò ora. Se desideri una spiegazione approfondita del motivo per cui le funzioni anonime sono migliori dei normali nomi funzioni a un livello più tecnico, suggerirei di leggere questo post del blog abbastanza complesso [Non più A disposizione].

Fino ad ora, probabilmente ti sei imbattuto solo in funzioni denominate. Si tratta di funzioni che sono state dichiarate con un nome e possono quindi essere chiamate in qualsiasi altro luogo, quante volte si vuole. Considera questo banale esempio, che registrerà un messaggio nella console quando la pagina viene caricata.

funzione doStuffOnPageLoad(){ console.log("fare cose!"); } $(document).ready (doStuffOnPageLoad);

Questo è utile se la tua funzione è progettata per essere riutilizzata, ma in questo caso è un po' contorta poiché vogliamo che si attivi solo una volta quando la pagina viene caricata. Invece, non ci preoccupiamo di definire una funzione separata e la dichiariamo semplicemente in linea come parametro come e quando necessario. L'esempio precedente sarebbe quindi meglio riscriverlo come:

$(documento).ready (funzione(){ console.log("fare cose"); });

Potresti non vedere molti vantaggi di questo al momento - è solo marginalmente meno codice in questo caso - ma come i tuoi script progrediscono in complessità, apprezzerai di non dover saltare in giro cercando di trovare la funzione definizioni. Sfortunatamente, rende le cose un po' più difficili per i principianti - basta guardare tutte quelle parentesi graffe - quindi assicurati di controllare i seguenti punti se ricevi errori:

• Numero corretto di parentesi graffe corrispondenti: l'indentazione del codice aiuta.
• Bretelle tonde e ricce.
• Dichiarazione di chiusura con un punto e virgola, ma non necessaria dopo una parentesi graffa di chiusura.

Utilizzando un editor di codice come Testo sublime 2 Prova Sublime Text 2 per le tue esigenze di modifica del codice multipiattaformaSublime Text 2 è un editor di codice multipiattaforma di cui ho sentito parlare solo di recente e devo dire che sono davvero impressionato nonostante l'etichetta beta. Puoi scaricare l'app completa senza pagare un centesimo... Per saperne di più può davvero aiutare in quanto evidenzia le parentesi corrispondenti e fa rientrare automaticamente il codice per te. Un editor di codice dedicato è davvero essenziale.

Questo è tutto per questa lezione, ma dovresti prendere l'abitudine di includere alcune manipolazioni di base del DOM nell'evento documento pronto prima di andare avanti e iniziare a modificare i file in un editor di codice se non lo sei già. La prossima volta daremo un'occhiata agli eventi e al modo in cui vengono utilizzati per aggiungere interattività a una pagina, ad esempio fare in modo che jQuery esegua qualcosa quando si fa clic su un pulsante. Domande o commenti sono sempre ben accetti qui sotto.