Johdanto jQueryyn (osa 3): Sivun odottaminen ladattavaksi ja nimettömät toiminnot

Mainos

jQuery on kiistatta välttämätön taito modernille Web-kehittäjä Mikä ohjelmointikieli opitaan - Web-ohjelmointiTänään katsomme erilaisia ​​Internet-ohjelmointikieliä, jotka ohjaavat Internetiä. Tämä on aloittelijoiden ohjelmasarjan neljäs osa. Osassa 1 opimme perustiedot ... Lue lisää , ja toivon voivani antaa sinulle tämän lyhyen minisarjan tiedon käytön aloittamiseksi omissa verkkoprojekteissasi. vuonna ensimmäinen osa jQuery-opetusohjelmastamme jQuery-opas - Aloittaminen: Perusteet ja valitsimetViime viikolla puhuin siitä, kuinka tärkeä jQuery on kaikille nykyaikaisille web-kehittäjille ja miksi se on mahtava. Tällä viikolla mielestäni on aika saada kädet likaantumaan jollain koodilla ja oppia kuinka ... Lue lisää , tarkastelimme joitain kielen perusteita ja kuinka valitsimia käytetään; osassa 2 muutimme eteenpäin menetelmät DOM: n manipuloimiseksi Johdanto jQueryyn (osa 2): Menetelmät ja toiminnotTämä on osa käynnissä olevaa aloittelijaa jQuery-web-ohjelmasarjoihin. Osa 1 kattoi jQuery-perusteet sen sisällyttämisestä projektiisi ja valitsimiin. Osassa 2 jatkamme ...

Lue lisää .

Osassa 3 käsittelemme ongelmaa, joka koskee jQueryn viivästyttämistä, kunnes sivu on latautunut. Yritän sitten selittää mitä anonyymit toiminnot ovat ja miksi sinun on tiedettävä niistä.

Viivästynyt lastaus: Kuinka ja miksi?

Jos olet kokeillut jotakin koodia osista 1 ja 2, olet saattanut löytää joitain virheitä, outoa käyttäytymistä tai asioita, jotka vain eivät toimi. Yleisin virhe, jonka koin oppiessani jQueryä, oli virhe, että DOM-elementtejä ei löydy - edes vaikka näin ne selvästi sivun lähteessä, jQuery kertoi minulle jatkuvasti, että sitä ei vain löytynyt niitä! Miksi niin?

Se on kaikki tekemistä järjestyksen kanssa, jossa selain lataa asiat. Se on yksinkertaisin, jos selaimessa on käynnissä jQuery-skripti ennen etsimäsi DOM-elementti on todella luotu, komentosarja latautuu ensin, mutta ei tee mitään, koska se ei löydä elementtiä, sitten DOM-elementti latautuu myöhemmin. Tämä on vähemmän ongelma, jos sijoitat kaikki skriptit alatunnisteen lähelle, mutta se voi silti tapahtua.

Ratkaisu on kääri skriptit niin kutsuttuihin a asiakirjavalmis tapahtuma. Tämä saa liitetyn koodin odottamaan, kunnes DOM on ladattu kokonaan (kunnes se on valmis). Sen käyttö on helppoa:

$ (asiakirja). jo (toiminto () { // viivästytettävä koodisi menee tänne. });

Tässä on vielä lyhyempi tapa tehdä tämä jQuery-dokumentaatio, mutta suosittelen, että käytät tätä tapaa koodin luettavuuteen.

Tämä asiakirjavalmis tapahtuma on toinen hyvä esimerkki anonyymi toiminto, joten yritetään ymmärtää, mitä tämä tarkoittaa.

Anonyymit toiminnot

Jos kuten minä, sinulla on jonkin verran aloittelijaohjelmointikokemusta vyösi alla, idea anonyymit toiminnot - joka on ydin jQuerylle ja Javascriptille - saattaa olla hieman hämmentävää. Ensinnäkin se tekee virheistä, jotka johtuvat sopimattomista kiinnikkeistä, melko yleisiä, minkä vuoksi aion selittää sen nyt. Jos haluat yksityiskohtaisen selityksen miksi nimettömät toiminnot ovat parempia kuin tavalliset nimetyt toimii teknisemmällä tasolla, suosittelen lukemaan tätä melko monimutkaista blogin viestiä [Ei enää Saatavilla].

Tähän asti olet todennäköisesti törmännyt vain nimetyt toiminnot. Nämä ovat toimintoja, jotka on ilmoitettu nimellä ja joita voidaan siksi kutsua muualle niin monta kertaa kuin haluat. Mieti tätä triviaalia esimerkkiä, joka kirjaa viestin konsoliin, kun sivu ladataan.

toiminto doStuffOnPageLoad () { console.log ("tekemässä juttuja!"); } $ (asiakirja). jo (doStuffOnPageLoad);

Tämä on hyödyllistä, jos toimintosi on suunniteltu käytettäväksi uudelleen, mutta tässä tapauksessa se on eräänlainen kiertynyt, koska haluamme todella sen tulevan vain kerran, kun sivu ladataan. Sen sijaan, emme vaivaudu määrittelemään erillistä toimintoa, ja julistamme sen vain rivinä parametrina tarvittaessa. Edellinen esimerkki olisi siksi parempi kirjoittaa uudelleen seuraavasti:

$ (asiakirja). jo (toiminto () { console.log ("tekemässä juttuja"); });

Et ehkä näe tällä hetkellä monia etuja - tässä tapauksessa koodi on vain hiukan vähemmän - mutta kuten skriptit etenevät monimutkaisesti, ja sinun on arvostettava, että sinun ei tarvitse hypätä ympäri yrittäessään löytää toiminto määritelmät. Valitettavasti se tekee asioista hieman vaikeampia aloittelijoille - katsokaa vain näitä noita kiinnikkeitä - joten muista tarkistaa seuraavat kohdat, jos saat virheitä:

• Oikea lukumäärä vastaavia kiinnikkeitä - koodin sisennys auttaa.
• Kiharat vs pyöreät olkaimet.
• Lausunto suljetaan puolipisteellä - mutta ei tarvita sulkevan kihara-aukon jälkeen.

Käyttämällä koodieditoria kuten Ylpeä teksti 2 Kokeile Sublime Text 2 -käyttöjärjestelmääsi monikokoisiin muokkaustarpeisiisiSublime Text 2 on alustanvälinen koodieditori, josta kuulin vasta äskettäin, ja minun on sanottava, että olen todella vaikuttunut beta-merkinnästä huolimatta. Voit ladata koko sovelluksen maksamatta penniäkään ... Lue lisää voi todella auttaa, koska se korostaa vastaavat hammasraudat ja automaattisesti sisennykset sinulle. Omistettu koodieditori on todella välttämätön.

Se on se tähän oppituntiin, mutta sinun pitäisi olla tapana sulkea joitain DOM-peruskäsittelyjä asiakirjavalmis tapahtumassa ennen siirtymistä eteenpäin, ja aloita tiedostojen muokkaaminen koodieditorissa, jos et ole jo. Seuraavan kerran tarkastelemme tapahtumia ja miten niitä käytetään lisäämään vuorovaikutteisuutta sivulle - kuten saadaan jQuery tekemään jotain, kun nappia napsautetaan. Kysymykset tai kommentit ovat aina tervetulleita alla.