Edmund Richardson
0 
1757
45
jQuery je vjerojatno osnovna vještina modernog razvojnog programera Koji programski jezik za učenje - Web programiranje Koji programski jezik za učenje - Web programiranje Danas ćemo pogledati razne jezike web programa koji napajaju Internet. Ovo je četvrti dio u seriji za početnike programiranja. U prvom dijelu smo naučili osnovne…, a u ovoj kratkoj mini seriji nadam se da ću vam dati znanje kako biste je počeli koristiti u vlastitim web projektima. U prvom dijelu našeg jQuery tutorial jQuery Tutorial - Prvi koraci: Osnove i odabiri jQuery Tutorial - Prvi koraci: Osnove i Selektori Prošli tjedan sam govorio o tome koliko je jQuery važan modernom web programeru i zašto je to fenomenalno. Ovaj tjedan, mislim da je vrijeme da se umažemo rukama s nekim kodom i naučimo kako…, razmotrili smo neke jezične osnove i kako koristiti selektore; u drugom dijelu prešli smo na metode manipulacije DOM-a Uvod u jQuery (2. dio): Metode i funkcije Uvod u jQuery (2. dio): Metode i funkcije Ovo je dio stalnog uvođenja početnika u jQuery seriju web programiranja , Prvi dio je pokrenuo osnove jQueryja o tome kako ga uključiti u svoj projekt i odabire. U drugom dijelu, nastavit ćemo s… .
U trećem dijelu pozabavit ćemo se problemom kako odgoditi jQuery dok se stranica ne učita, a zatim ću pokušati objasniti što su anonimne funkcije i zašto o njima trebate znati.
Odloženo učitavanje: kako i zašto?
Ako ste isprobavali neki od koda iz 1. i 2. dijela, možda ste naišli na neke pogreške, neobično ponašanje ili stvari koje jednostavno ne funkcioniraju. Najčešća pogreška koju sam doživio prilikom učenja jQuery-a je bila da se DOM elementi ne mogu naći - iako sam ih mogao jasno vidjeti u izvoru stranice, jQuery mi je nastavio govoriti da ih jednostavno ne mogu pronaći! Zašto je to?
Pa, sve je to povezano s redoslijedom kojim stvari pregledavaju preglednik. Najjednostavnije je ako vam se u pregledniku pokreće jQuery skripta prije DOM element koji traži zapravo je stvoren, skripta će se prvo učitati, ali ne učiniti ništa, jer ne može pronaći element, a zatim će se DOM element učitati kasnije. Ovo je manje problema ako sve skripte postavite u podnožje podnožja, ali to se ipak može dogoditi.
Rješenje je uvesti svoje skripte u ono što se naziva dokument spreman događaj. To čini da priloženi kôd pričeka dok DOM ne bude u potpunosti ucrtan (sve dok nije spreman). Pomoću nje je jednostavno:
$ (document) .ready (funkcija () // vaš kod za odlaganje ide ovdje);Postoji još kraći način da se to iskaže u jQuery dokumentaciji, ali toplo bih vam preporučio da koristite ovaj način čitljivosti koda..
Ovaj događaj spreman za dokument je još jedan dobar primjer anonimna funkcija, pa pokušajmo shvatiti što to znači.
Anonimne funkcije
Ako ste poput mene, ispod pojasa imate neko iskustvo programiranja na početnoj razini anonimne funkcije - koja je srž jQueryja i Javascripta - možda bi moglo biti malo uznemirujuće. Za jednu, to je pogreške zbog neusklađenih ograde prilično uobičajene, i zato ću sada objasniti. Ako želite temeljito objašnjenje zašto su anonimne funkcije bolje od redovito imenovanih funkcija na tehničkoj razini, predlažem vam da pročitate ovaj prilično složen post na blogu [No Longer Available].
Do sada ste vjerojatno naišli samo imenovane funkcije. Ovo su funkcije koje su deklarirane s imenom i zato se mogu pozivati bilo gdje drugdje, onoliko puta koliko želite. Razmotrite ovaj trivijalni primjer koji će zabilježiti poruku na konzoli kad se učita stranica.
funkcija doStuffOnPageLoad () console.log ("radi stvari!"); $ (dokument). Već (doStuffOnPageLoad);Ovo je korisno ako je vaša funkcija osmišljena za ponovnu upotrebu, ali u ovom slučaju je nekako zbunjena, jer stvarno želimo da se aktivira samo kad se učita stranica. Umjesto toga, ne trudimo se definirati zasebnu funkciju, već je deklariramo u liniji kao parametar po potrebi i po potrebi. Prethodni je primjer stoga bolje prepisati kao:
$ (document) .ready (function () console.log ("radi stvari"););Trenutno možda nećete vidjeti mnogo prednosti toga - to je u ovom slučaju samo neznatno manje koda - ali s obzirom na to da vam skripti napreduju u složenosti, shvatit ćete da se nećete morati preskakati pokušavajući pronaći definicije funkcija. Nažalost, početnicima to čini malo teškim - samo pogledajte sve te grudnjake - stoga budite sigurni da provjerite sljedeće točke ako ste pogriješili:
- Točan broj odgovarajućih zagrada - pomoć uvlačenja koda.
- Curly vs okrugle naramenice.
- Izjava se zatvara zarezom - ali nije potrebna nakon završne zavojnice u zatvaranju.
Korištenje uređivača koda, kao što je Sublime Text 2, isprobajte uzvišeni tekst 2 za potrebe cross-platforming uređivanja potreba. Isprobajte uzvišeni tekst 2 za vaš cross-platformform uređivanje potreba treba sublime text 2 je cross-platformski uređivač koda za koji sam nedavno nedavno čuo, i moram reći da sam jako impresioniran unatoč beta oznaci. Možete preuzeti cijelu aplikaciju bez plaćanja novčića ... zaista vam može pomoći kako ističe odgovarajuće zagrade i automatski uvlači kôd za vas. Namjenski uređivač koda bitno je, zaista.
To je to za ovu lekciju, ali trebali biste steći naviku umetati neke osnovne DOM manipulacije u događaj spreman za dokument prije nego što krenete dalje, i započnite uređivati datoteke u uređivaču koda ako to već niste. Sljedeći ćemo put pogledati događaje i kako se oni koriste za dodavanje interaktivnosti na stranicu - primjerice, natjeranje jQuery-a da učini nešto kad se klikne gumb. Pitanja ili komentari su uvijek dobrodošli u nastavku.