Introducere în jQuery (Partea 3) Așteptând pagina pentru încărcare și funcții anonime

jQuery este, fără îndoială, o abilitate esențială pentru dezvoltatorul web modern Ce limbaj de programare să învățați - Programare web Ce limba de programare să învățați - Programare web Astăzi vom examina diferitele limbi de programare web care alimentează Internetul. Aceasta este a patra parte dintr-o serie de programare pentru incepatori. În partea a 1-a am învățat de bază ... Read More, și în această scurtă mini-serie sper să vă dau cunoștințele pentru a începe să o utilizați în propriile proiecte web. În prima parte a tutorialului nostru jQuery jQuery Tutorial - Noțiuni de bază: Elementele de bază și selectorii jQuery Tutorial - Noțiuni de bază: Elementele de bază și selectorii Săptămâna trecută, am vorbit despre cât de important este jQuery pentru orice dezvoltator web modern și de ce este minunat. În această săptămână, cred că este timpul ca mâinile noastre să fie murdare de cod și au învățat cum ... Citiți mai multe, ne-am uitat la unele fundamente de limbă și cum să folosiți selectorii; în partea 2, ne-am mutat pe metodele de manipulare a DOM Introducere în jQuery (Partea 2): Metode și funcții Introducere În jQuery (Partea 2): Metode și funcții Aceasta este o parte a unei introduceri incipiente a serverelor de programare web jQuery . Partea 1 a acoperit elementele de bază ale jQuery cu privire la modul de includere a acestora în proiect și selectori. În partea a doua, vom continua cu ... Citește mai mult .

În partea a 3-a, vom aborda problema modului de a întârzia jQuery până când pagina este încărcată, atunci voi încerca să explic ce sunt funcțiile anonime și de ce trebuie să știți despre ele.

Întârziere de încărcare: Cum și de ce?

Dacă ați încercat o parte din codul din partea 1 și 2, este posibil să fi întâmpinat unele erori, comportamente ciudate sau lucruri pur și simplu nu funcționează. Cea mai obișnuită eroare pe care am experimentat-o ​​când învățam jQuery a fost aceea că elementele DOM nu erau găsite - deși i-am putut vedea clar în sursa paginii, jQuery mi-a spus că nu le-a putut găsi! De ce este asta?

Ei bine, este vorba doar de ordinea în care lucrurile sunt încărcate de browser. La cele mai simple, dacă aveți un script jQuery rulat în browser inainte de elementul DOM pe care îl caută a fost creat, scriptul se va încărca mai întâi, dar nu face nimic deoarece nu poate găsi elementul, atunci elementul DOM se va încărca mai târziu. Acest lucru este mai puțin o problemă dacă plasați toate scenariile în apropierea subsolului, dar se poate întâmpla.

Soluția este să îți împachetezi scripturile în ceea ce e numit a eveniment gata pentru documente. Acest lucru face ca codul închis să aștepte până când DOM-ul este complet încărcat (până când este gata). Folosirea este simplu:

$ (document) .ready (funcția () // codul dvs. de întârziere merge aici);

Există o modalitate chiar mai scurtă de a face acest lucru subliniat în documentația jQuery, dar aș sugera cu fermitate să folosiți acest mod pentru citirea codului.

Evenimentul pregătit pentru acest document este un alt exemplu bun funcția anonimă, așa că să încercăm să înțelegem ce înseamnă asta.

Funcții anonime

Dacă, ca mine, ai o experiență de programare la nivel începător sub centură, ideea funcții anonime - care este de bază pentru jQuery și Javascript - ar putea fi un pic derutant. Pentru unul, face ca erorile datorate coaselor necorespunzătoare să fie destul de frecvente, motiv pentru care o voi explica acum. Dacă doriți o explicație detaliată cu privire la motivul pentru care funcțiile anonime sunt mai bune decât funcțiile numite în mod obișnuit la un nivel mai tehnic, aș sugera să citiți această postare de blog destul de complexă [Nu mai este disponibilă].

Până acum, probabil că ai venit doar numite funcții. Acestea sunt funcții care au fost declarate cu un nume și pot fi, prin urmare, numite oriunde altundeva, ori de câte ori doriți. Luați în considerare acest exemplu trivial, care va înregistra un mesaj la consolă atunci când pagina este încărcată.

funcția doStuffOnPageLoad () console.log ("a face lucruri!");  $ (document) .ready (doStuffOnPageLoad);

Acest lucru este util dacă funcția dvs. este proiectată pentru a fi reutilizată, dar în acest caz este destul de complicată, deoarece într-adevăr dorim să se declanșeze o singură dată când pagina este încărcată. În schimb, nu ne deranjăm definirea unei funcții separate și doar o declarăm in linie ca parametru ca și când este necesar. Exemplul anterior ar fi, prin urmare, mai bine re-scris ca:

$ (document) .ready (funcție () console.log ("doing stuff"););

Este posibil să nu vedeți multe avantaje în acest moment - este doar un cod puțin mai puțin în acest caz - dar, pe măsură ce scripturile dvs. progresează în complexitate, veți aprecia că nu trebuie să faceți salt în încercarea de a găsi definiții ale funcțiilor. Din nefericire, aceasta face ca lucrurile să devină puțin mai dificile pentru începători - trebuie doar să vă uitați la toate aceste bretele - deci asigurați-vă că verificați următoarele puncte dacă primiți erori:

• Numărul corect de coliere corespunzătoare - indentarea codului dvs. vă ajută.
• Arcușuri curbate vs rotunde.
• Declarația de închidere cu punct și virgulă - dar nu este necesară după o închidere curbată.

Folosind un editor de cod ca Sublime Text 2 Încercați un text sublim 2 Pentru codul tău cruce Platforma de editare a nevoilor Încercați un text sublim 2 Pentru codul tău cruce Platforma de editare a nevoilor Sublime Text 2 este un editor de cod cross-platform pe care l-am auzit recent despre, și trebuie să spun că sunt foarte impresionat în ciuda etichetei beta. Puteți descărca aplicația completă fără a plăti un penny ... Citește mai mult poate ajuta cu adevărat, deoarece evidențiază corespondențe corespunzătoare și coduri indice cod pentru tine. Un editor de cod special este esențial, într-adevăr.

Asta este pentru această lecție, dar ar trebui să obții obiceiul de a închide câteva manipulări DOM de bază în evenimentul pregătit pentru documente, înainte de a merge mai departe și de a începe editarea fișierelor într-un editor de cod dacă nu ești deja. Data viitoare vom analiza evenimentele și modul în care acestea sunt utilizate pentru a adăuga interactivitatea unei pagini - cum ar fi face jQuery să facă ceva când se face clic pe un buton. Întrebările sau comentariile sunt întotdeauna binevenite mai jos.

Explorați mai multe despre: JavaScript, jQuery, Programare, Dezvoltare Web.