Увод у јКуери (3. део): чекање да се страница учита и анонимне функције

Реклама

јКуери је вероватно суштинска вештина за модерне Веб Девелопер Који програмски језик научити - Веб програмирањеДанас ћемо погледати различите веб програмске језике који покрећу Интернет. Ово је четврти део серије програмирања за почетнике. У првом делу научили смо основе... Опширније , и надам се да ћу вам у овој краткој мини серији дати знање да почнете да га користите у својим веб пројектима. У први део нашег јКуери водича Водич за јКуери - Први кораци: основе и бирачиПрошле недеље сам говорио о томе колико је јКуери важан за сваког модерног веб програмера и зашто је одличан. Ове недеље, мислим да је време да упрљамо руке неким кодом и научимо како... Опширније , погледали смо неке основе језика и како да користимо селекторе; у другом делу, прешли смо на методе манипулисања ДОМ-ом Увод у јКуери (2. део): Методе и функцијеОво је део текућег увода за почетнике у јКуери серију веб програмирања. Први део покрио је основе јКуери-ја о томе како га укључити у свој пројекат и селекторе. У другом делу настављамо са... Опширније .

У трећем делу ћемо се позабавити проблемом како да одложимо јКуери док се страница не учита, а затим ћу покушати да објасним шта су анонимне функције и зашто морате да знате о њима.

Одложено учитавање: како и зашто?

Ако сте испробавали неки од кода из 1. и 2. дела, можда сте наишли на неке грешке, чудно понашање или ствари које једноставно не раде. Најчешћа грешка коју сам искусио приликом учења јКуери-ја била је да ДОМ елементи нису пронађени – чак иако сам јасно могао да их видим у извору странице, јКуери ми је стално говорио да једноставно не може да пронађе њих! Зашто је то?

Па, све је у вези са редоследом којим се ствари учитавају у претраживачу. Најједноставније, ако имате јКуери скрипту покренуту у претраживачу пре него што ДОМ елемент који тражи је заправо креиран, скрипта ће се прво учитати, али неће учинити ништа јер не може да пронађе елемент, а затим ће се ДОМ елемент учитати касније. Ово је мањи проблем ако све своје скрипте поставите близу подножја, али то се и даље може догодити.

Решење је да умотате своје скрипте у оно што се зове а документ спреман догађај. Ово чини да приложени код чека док се ДОМ потпуно не учита (све док се не спреман). Коришћење је једноставно:

$(доцумент).реади (фунцтион(){ //ваш код за одлагање иде овде. });

Постоји још краћи начин да се то уради наведен у јКуери документација, али вам препоручујем да користите овај начин за читљивост кода.

Овај догађај спреман за документ је још један добар пример анонимна функција, па хајде да покушамо да разумемо шта ово значи.

Анонимне функције

Ако попут мене имате искуства у програмирању на почетничком нивоу, идеја о анонимне функције – што је језгро јКуери-ја и Јавасцрипт-а – могло би бити мало забрињавајуће. Као прво, прави грешке због неусклађених заграда прилично честе, због чега ћу то сада објаснити. Ако желите детаљно објашњење зашто су анонимне функције боље од уобичајених именованих функционише на више техничком нивоу, предлажем да прочитате овај прилично сложен пост на блогу [Не више Доступан].

До сада сте вероватно само наилазили именоване функције. То су функције које су декларисане именом и стога се могу позвати било где другде, колико год пута желите. Размотрите овај тривијални пример, који ће пријавити поруку на конзолу када се страница учита.

функција доСтуффОнПагеЛоад(){ цонсоле.лог("Ради ствари!"); } $(доцумент).реади (доСтуффОнПагеЛоад);

Ово је корисно ако је ваша функција дизајнирана да се поново користи, али у овом случају је некако замршена јер заиста желимо да се покрене само једном када се страница учита. Уместо тога, не трудимо се да дефинишемо засебну функцију, већ је само декларишемо као параметар када је то потребно. Претходни пример би стога било боље преписати као:

$(доцумент).реади (фунцтион(){ цонсоле.лог("раде ствари"); });

Можда не видите много предности овога у овом тренутку – то је само незнатно мање кода у овом случају – али као ваше скрипте напредују у сложености, ценићете што не морате да скачете около покушавајући да пронађете функцију дефиниције. Нажалост, почетницима то мало отежава ствари – само погледајте све те заграде – па обавезно проверите следеће тачке ако добијете грешке:

• Тачан број одговарајућих заграда – увлачење кода помаже.
• Коврџаве против округле заграде.
• Изјава се затвара тачком и зарезом – али није потребна након затварајуће витичасте заграде.

Коришћење уређивача кода као што је Узвишени текст 2 Испробајте Сублиме Тект 2 за потребе уређивања кода на више платформиСублиме Тект 2 је мулти-платформски уређивач кода за који сам тек недавно чуо, и морам рећи да сам заиста импресиониран упркос бета етикети. Можете преузети целу апликацију без плаћања ни пенија... Опширније може заиста помоћи јер истиче одговарајуће заграде и аутоматски увлачи код за вас. Наменски уређивач кода је заиста неопходан.

То је то за ову лекцију, али требало би да стекнете навику да приложите неке основне ДОМ манипулације у догађају спреман за документ пре него што кренете даље, и почните да уређујете датотеке у уређивачу кода ако нисте већ. Следећи пут ћемо погледати догађаје и како се они користе за додавање интерактивности на страницу – као што је да јКуери учини нешто када се кликне на дугме. Питања или коментари су увек добродошли испод.