Brian Curtis
0 
3425
504
jQuery je nepochybně nezbytnou dovedností moderního webového vývojáře, který programovací jazyk se naučit - programování webu, který programovací jazyk se učit - programování webu Dnes se podíváme na různé webové programovací jazyky, které pohánějí internet. Toto je čtvrtá část programovací série pro začátečníky. V části 1 jsme se naučili základní… a v této krátké mini-sérii doufám, že vám poskytnu znalosti, abyste mohli začít využívat ve svých vlastních webových projektech. V první části našeho tutoriálu jQuery Výukový program jQuery - Začínáme: Základy a výběry jQuery Výukový program - Začínáme: Základy a výběry Minulý týden jsem mluvil o tom, jak důležité je jQuery pro každého moderního webového vývojáře a proč je to úžasné. Tento týden si myslím, že je čas, abychom si zašpinili ruce nějakým kódem a zjistili jsme, jak ..., podívali jsme se na některé jazykové základy a jak používat selektory; v části 2 jsme se přesunuli k metodám manipulace s DOM Úvod do jQuery (Část 2): Metody a funkce Úvod do jQuery (Část 2): Metody a funkce Toto je část pokračujícího úvodního úvodu do programovací série webů jQuery. . Část 1 se zabývala základy jQuery o tom, jak ji zahrnout do vašeho projektu, a selektory. V části 2 budeme pokračovat… .
V části 3 se zabýváme problémem zpoždění jQuery, dokud se stránka nenačte, pak se pokusím vysvětlit, jaké jsou anonymní funkce a proč o nich potřebujete vědět.
Zpožděné načítání: Jak a proč?
Pokud jste vyzkoušeli některý z kódů z částí 1 a 2, možná narazíte na některé chyby, liché chování nebo věci prostě nefungují. Nejčastější chybou, se kterou jsem se při učení jQuery setkal, bylo to, že elementy DOM nebyly nalezeny - i když jsem je viditelně viděl ve zdroji stránky, jQuery mi stále říkal, že je prostě nemůže najít! Proč??
No, to všechno má co do činění s tím, jak jsou věci načteny prohlížečem. Nejjednodušší je, pokud máte v prohlížeči spuštěn skript jQuery před prvek DOM, který hledá, byl skutečně vytvořen, skript se načte jako první, ale neudělá nic, protože jej nemůže najít, pak se prvek DOM načte později. To je menší problém, pokud umístíte všechny své skripty blízko zápatí, ale stále se to může stát.
Řešením je zabalit vaše skripty do tzv. A událost připravena k dokumentu. Díky tomu bude přiložený kód čekat, až bude DOM plně načten (dokud není připraven). Použití je jednoduché:
$ (document) .ready (function () // zde se nachází váš kód pro zpoždění);Existuje ještě kratší způsob, jak to nastínit v dokumentaci jQuery, ale důrazně doporučujeme použít tento způsob pro čitelnost kódu.
Tato událost připravená k dokumentu je dalším dobrým příkladem anonymní funkce, Zkusme tedy pochopit, co to znamená.
Anonymní funkce
Pokud jste jako já, máte pod pásem nějaké zkušenosti s programováním pro začátečníky, myšlenka anonymní funkce - což je jádro jQuery a Javascriptu - může to být trochu znepokojující. Pro jednoho to dělá chyby kvůli neshodným složeným závorkám docela běžné, a proto to teď vysvětlím. Pokud byste chtěli důkladné vysvětlení, proč jsou anonymní funkce lepší než běžné pojmenované funkce na technické úrovni, doporučuji přečíst tento poměrně složitý blogový příspěvek [Už není k dispozici].
Až dosud jste pravděpodobně narazili pojmenované funkce. Jedná se o funkce, které byly deklarovány jménem, a proto je lze volat kdekoli jinde, kolikrát chcete. Zvažte tento triviální příklad, který při načtení stránky zaznamená zprávu do konzole.
function doStuffOnPageLoad () console.log ("doing doing!"); $ (document) .ready (doStuffOnPageLoad);To je užitečné, pokud je vaše funkce navržena k opětovnému použití, ale v tomto případě je to spletité, protože opravdu chceme, aby se spustila pouze jednou při načtení stránky. Místo toho se neobtěžujeme definovat samostatnou funkci a pouze ji deklarujeme inline jako parametr podle potřeby. Předchozí příklad by proto byl lépe přepsán takto:
$ (document) .ready (function () console.log ("doing doing"););V tuto chvíli možná neuvidíte mnoho výhod - v tomto případě je to jen nepatrně méně kód - ale jak vaše skripty postupují ve složitosti, oceníte, že nemusíte skákat kolem a hledat definice funkcí. Bohužel to pro začátečníky trochu ztěžuje věci - stačí se podívat na všechny tyto rovnátka - pokud se tedy vyskytnou chyby, zkontrolujte následující body:
- Správný počet odpovídajících závorek - pomůže odsazení kódu.
- Curly vs kulaté rovnátka.
- Uzavření prohlášení středníkem - ale není potřeba po zavření složené závorky.
Pomocí editoru kódu, jako je Sublime Text 2, vyzkoušejte Sublime Text 2 pro vaše potřeby pro úpravy kódu napříč platformami Vyzkoušejte Sublime Text 2 pro vaše Editace kódu pro napříč platformami Sublime Text 2 je editor pro napříč platformami, o kterém jsem jen nedávno slyšel, a musím říct, že jsem opravdu ohromen i přes beta štítek. Můžete si stáhnout plnou aplikaci bez placení penny… může vám opravdu pomoci, protože zvýrazní odpovídající rovnátka a automaticky odsadí kód pro vás. Speciální editor kódu je opravdu nezbytný.
To je pro tuto lekci, ale měli byste si zvyknout uzavřít některé základní manipulace DOM do události připravené k dokumentu, než se pustíte do práce, a začít editovat soubory v editoru kódů, pokud ještě nemáte. Až se příště podíváme na události a na to, jak se používají k přidání interaktivity na stránku - například aby jQuery udělal něco po kliknutí na tlačítko. Otázky nebo komentáře jsou vždy vítány níže.