Introduzione a jQuery (parte 3) In attesa della pagina per caricare e funzioni anonime

jQuery è probabilmente una competenza essenziale per lo sviluppatore web moderno Che linguaggio di programmazione da apprendere - Programmazione Web Quale linguaggio di programmazione da apprendere - Programmazione Web Oggi daremo un'occhiata ai vari linguaggi di programmazione Web che alimentano Internet. Questa è la quarta parte in una serie di programmazione per principianti. Nella parte 1, abbiamo imparato le basi di ... Leggi di più, e in questa breve miniserie spero di darti le conoscenze per iniziare a farne uso nei tuoi progetti web. Nella prima parte del nostro tutorial su jQuery jQuery Tutorial - Per iniziare: Nozioni di base e selettori jQuery Tutorial - Per iniziare: Nozioni di base e selettori La settimana scorsa, ho parlato di quanto sia importante jQuery per qualsiasi sviluppatore web moderno e perché è fantastico. Questa settimana, penso che sia ora che ci sporchiamo le mani con un po 'di codice e abbiamo imparato come ... Per saperne di più, abbiamo esaminato alcuni concetti fondamentali del linguaggio e come utilizzare i selettori; nella parte 2, passiamo ai metodi di manipolazione del DOM Introduzione a jQuery (Parte 2): Metodi e funzioni Introduzione a jQuery (Parte 2): Metodi e funzioni Questo fa parte di un'introduzione ai principianti in corso alla serie di programmazione web jQuery . La prima parte riguardava le nozioni di base di jQuery su come includerla nel tuo progetto e selettori. Nella parte 2, continueremo con ... Per saperne di più .

Nella parte 3, affronteremo il problema di come ritardare jQuery fino a quando la pagina non è stata caricata, quindi proverò a spiegare quali 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 errori, comportamenti strani o cose semplicemente non funzionanti. L'errore più comune che ho riscontrato durante l'apprendimento di jQuery era che gli elementi DOM non venivano trovati - anche se potevo vederli chiaramente nell'origine della pagina, jQuery continuava a dirmi che non riuscivo a trovarli! Perché?

Bene, tutto ha a che fare con l'ordine in cui le cose vengono caricate dal browser. È più semplice, se nel browser è in esecuzione uno script jQuery prima l'elemento DOM che sta cercando è stato effettivamente creato, lo script verrà caricato prima, ma non farà nulla perché non può trovare l'elemento, quindi l'elemento DOM verrà caricato in seguito. Questo è meno di un problema se si posizionano tutti gli script vicino al piè di pagina, ma può comunque succedere.

La soluzione è avvolgere i tuoi script in cosa è chiamato a evento pronto per il documento. Questo fa in modo che il codice incluso attenda fino a quando il DOM non è stato completamente caricato (finché non lo è pronto). Usarlo è semplice:

$ (document) .ready (function () // il tuo codice per il ritardo va qui);

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

Questo evento pronto per il documento è un altro buon esempio di un funzione anonima, quindi proviamo a capire cosa significa.

Funzioni anonime

Se come me hai qualche esperienza di programmazione per principianti sotto la cintura, l'idea di funzioni anonime - che è fondamentale per jQuery e Javascript - potrebbe essere un po 'sconcertante. Per uno, rende gli errori dovuti a parentesi non corrispondenti abbastanza comuni, motivo per cui ho intenzione di spiegarlo ora. Se desideri una spiegazione approfondita del motivo per cui le funzioni anonime sono migliori delle normali funzioni con nome su un livello più tecnico, ti suggerisco di leggere questo post del blog abbastanza complesso [Non più disponibile].

Fino ad ora, probabilmente vi siete solo imbattuti funzioni nominate. Queste sono funzioni che sono state dichiarate con un nome e possono quindi essere chiamate da qualsiasi altra parte, tutte le volte che vuoi. Considera questo semplice esempio, che registrerà un messaggio alla console quando viene caricata la pagina.

function doStuffOnPageLoad () console.log ("doing stuff!");  $ (document) .ready (doStuffOnPageLoad);

Questo è utile se la tua funzione è progettata per essere riutilizzata, ma in questo caso è un po 'complicata dal momento che vogliamo davvero che si attivi una volta quando la pagina viene caricata. Invece, non ci preoccupiamo di definire una funzione separata, e basta dichiararla in linea come parametro come e quando necessario. L'esempio precedente sarebbe quindi meglio riscritto come:

$ (document) .ready (function () console.log ("doing stuff"););

Potresti non vedere molti vantaggi al momento - in questo caso è solo marginalmente meno codice - ma con l'avanzare della complessità dei tuoi script apprezzerai non dover saltare in giro cercando di trovare le definizioni delle funzioni. Sfortunatamente, rende le cose un po 'più difficili per i principianti - guarda solo quelle parentesi graffe - quindi assicurati di controllare i seguenti punti se ricevi errori:

• Corretto numero di parentesi graffe corrispondenti: il rientro del codice aiuta.
• Bretelle ricurve e rotonde.
• Dichiarazione di chiusura con un punto e virgola - ma non necessaria dopo una parentesi graffa di chiusura.

Utilizzo di un editor di codice come Sublime Text 2 Prova Sublime Text 2 Per il tuo codice multipiattaforma Modifica dei bisogni Prova Sublime Text 2 Per il tuo codice cross-platform Editing Needs Sublime Text 2 è un editor di codice multipiattaforma che ho sentito solo di recente, e devo dire che sono davvero impressionato nonostante l'etichetta beta. È possibile scaricare l'app completa senza pagare un centesimo ... Leggi di più può davvero aiutare in quanto mette in evidenza le parentesi graffe corrispondenti e il codice di indentazione automatica per voi. Un editor di codice dedicato è essenziale, davvero.

È tutto per questa lezione, ma dovresti prendere l'abitudine di racchiudere alcune manipolazioni del DOM di base in un evento pronto per il documento prima di proseguire 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, come fare fare qualcosa a jQuery quando si fa clic su un pulsante. Domande o commenti sempre benvenuti qui sotto.

Scopri di più su: JavaScript, jQuery, programmazione, sviluppo Web.