JQuery (3. osa) sissejuhatus: lehe ootamine ja anonüümsed funktsioonid

Reklaam

jQuery on vaieldamatult kaasaegsete jaoks oluline oskus veebiarendaja Millist programmeerimiskeelt õppida - veebiprogrammeerimineTäna vaatleme erinevaid Interneti-programmeerimiskeeli. See on algajate programmeerimissarja neljas osa. 1. osas õppisime põhilisi ... Loe rohkem , ja selles lühikeses miniseerias loodan anda teile teadmisi, et saaksite seda oma veebiprojektides kasutama hakata. Aastal jQuery õpetuse esimene osa jQuery juhendaja - alustamine: põhitõed ja valijadEelmisel nädalal rääkisin sellest, kui oluline on jQuery iga kaasaegse veebiarendaja jaoks ja miks see on fantastiline. Sel nädalal arvan, et on aeg käes käsi mõne koodiga määrida ja saime teada, kuidas ... Loe rohkem , vaatasime mõningaid keele põhialuseid ja selektorite kasutamist; 2. osas liikusime edasi DOM-i manipuleerimise meetodid JQuery (2. osa) sissejuhatus: meetodid ja funktsioonidSee on osa pidevast jQuery veebiprogrammeerimissarja tutvustamisest. 1. osa hõlmas jQuery põhitõdesid selle kaasamiseks oma projekti ja valijaid. 2. osas jätkame ... Loe rohkem .

3. osas käsitleme probleemi, kuidas jQuery-d edasi lükata, kuni leht on laaditud, siis püüan selgitada, millised on anonüümsed funktsioonid ja miks peate neist teadma.

Laadimisega viivitamine: kuidas ja miks?

Kui olete mõnda koodi 1. ja 2. osast proovinud, võisite olla kokku puutunud mõne vea, veider käitumisega või asjadega, mis lihtsalt ei tööta. Kõige tavalisem viga, mida ma jQuery õppimisel kogesin, oli DOM-i elementide leidmata jätmine - isegi kuigi ma nägin neid lehe allikas selgelt, ütles jQuery mulle pidevalt, et seda lihtsalt ei leitud neid! Miks nii?

Noh, see kõik on seotud järjekorraga, milles brauser asju laadib. See on kõige lihtsam, kui brauseris töötab jQuery skript enne kui otsitav DOM-element on tegelikult loodud, laaditakse skript kõigepealt, kuid ei tehta midagi, kuna see ei leia elementi, siis laaditakse DOM-element hiljem. Kui asetate kõik skriptid jaluse lähedale, on see vähem probleem, kuid see võib siiski juhtuda.

Lahendus on mähkida oma skriptid nn dokumendiks valmis sündmus. See paneb lisatud koodi ootama, kuni DOM on täielikult laaditud (kuni see on valmis). Selle kasutamine on lihtne:

$ (dokument). juba (funktsioon () { // teie viivituse kood läheb siia. });

Selle jaoks on veel lühem viis, mis on ära toodud jaotises jQuery dokumentatsioon, kuid soovitan tungivalt kasutada seda koodi koodi loetavuse tagamiseks.

See dokumendivalmis sündmus on veel üks hea näide anonüümne funktsioon, proovime siis aru saada, mida see tähendab.

Anonüümsed funktsioonid

Kui minusugused, nagu näiteks mina, olete oma vöö all saanud nii algajate tasemel programmeerimiskogemuse, siis idee sellest anonüümsed funktsioonid - mis on jQuery ja Javascripti keskmes - võib pisut häirida. Esiteks teeb see sobimatute breketite tõttu vigu üsna tavaliseks, mistõttu selgitan seda nüüd. Kui soovite põhjalikku selgitust selle kohta, miks on anonüümsed funktsioonid paremad kui tavalised funktsioneerib tehnilisemal tasemel, soovitan lugeda seda üsna keerulist ajaveebi postitust [No Lmore Saadaval].

Siiani olete tõenäoliselt ainult kokku puutunud nimetatud funktsioonid. Need on funktsioonid, mis on nimega deklareeritud ja mida saab seetõttu kutsuda mujale, nii mitu korda kui soovite. Vaatleme seda triviaalset näidet, mis logib lehe laadimisel konsooli teate.

funktsioon doStuffOnPageLoad () { console.log ("teeme asju!"); } $ (dokument). jau (doStuffOnPageLoad);

See on kasulik, kui teie funktsioon on mõeldud taaskasutamiseks, kuid sel juhul on see keerdkäik, kuna me tõesti tahame, et see lehe laadimisel ainult üks kord tööle hakkaks. Selle asemel ei viitsi me eraldi funktsiooni määratleda ja lihtsalt kuulutame selle parajasti parameetriks vastavalt vajadusele. Seetõttu tuleks eelmine näide paremini ümber kirjutada järgmiselt:

$ (dokument). juba (funktsioon () { console.log ("asju ajama"); });

Võimalik, et te ei näe sellel hetkel palju eeliseid - sel juhul on kood vaid pisut vähem -, aga nagu teie skriptid edenevad keerukalt, ja te hindate, et te ei pea funktsiooni leidmiseks ringi hüppama määratlused. Kahjuks muudab see algajate jaoks pisut keerukamaks - vaadake ainult kõiki neid traksid - nii et vigade ilmnemisel kontrollige kindlasti järgmisi punkte:

• Vastavate trakside õige arv - koodi sisestus aitab.
• Lokkis vs ümmargused traksid.
• Avalduse sulgemine semikooloniga - kuid pärast sulgevat lokirullit pole seda vaja.

Kasutades koodiredaktorit nagu Ülev tekst 2 Proovige ülemist teksti 2. oma platvormidevahelise koodi redigeerimise vajaduste jaoksSublime Text 2 on platvormideülene koodiredaktor, millest kuulsin alles hiljuti ja pean ütlema, et olen beeta-sildist hoolimata tõeliselt muljet avaldanud. Rakenduse saate alla laadida ilma senti maksmata ... Loe rohkem võib tõesti aidata, kuna see tõstab esile vastavad traksid ja automaatselt taanded koodiks. Spetsiaalne koodiredaktor on tõesti hädavajalik.

See on selle õppetunni jaoks, kuid peaksite saama harjumuse lisada mõned põhilised DOM-i manipulatsioonid dokumendis valmis sündmuses enne liikumist ja alustage failide redigeerimist koodiredaktoris, kui te seda veel ei tee juba. Järgmine kord vaatleme sündmusi ja seda, kuidas neid kasutatakse lehe interaktiivsuse lisamiseks - näiteks pange jQuery nupule klõpsamisega midagi tegema. Küsimused või kommentaarid on alati teretulnud allpool.