Share
Dacă, la fel ca mulți dezvoltatori Flash, folosiți HTML5 pentru aplicațiile dvs. web, veți fi aproape sigur că ați întâlnit jQuery. Este o bibliotecă JavaScript foarte populară, utilizată de un procent mare din site-urile cele mai vizitate - dar care este tot ce-a făcut tam-tam și ar trebui să-l utilizați?
Dacă știți AS3, știți de fapt o mulțime de JavaScript deja; cele două limbi sunt foarte asemănătoare. Așadar, este tentant să mergeți direct și să codificați - dar există câteva concepte importante pe care trebuie să le înțelegeți mai întâi. Una dintre acestea este ideea DOM.
Atunci când încărcați o pagină web, browserul dvs. transformă un HTML plat într-o structură arborescentă a obiectelor JavaScript numită DOM (Document Object Model). Domeniul JavaScript DOM, atunci, este foarte asemănător cu lista de afișări ActionScript; și dacă sunteți un dezvoltator Flex, veți putea vedea asemănările dintre MXML și HTML.
În Flash, putem accesa obiecte de afișare specifice navigând la ele prin lista de afișare, cum ar fi stage.getChildAt (3) .getChildAt (0), dar acest lucru este destul de ridicol. În schimb, este mai probabil să dăm nume de instanțe ale obiectelor de afișare (prin Flash IDE) sau să stocăm referințele la acestea în variabile, matrice sau proprietăți obiect, cum ar fi dialogBox.okButton = nou SimpleButton ().
În JavaScript, noi ar putea construiți DOM în întregime prin JS și apoi spuneți browser-ului să îl redea, dar aceasta este o abordare neobișnuită; este mult mai probabil să definim DOM prin HTML, probabil cu o mica augmentare JS. Deci, JavaScript are diferite metode diferite pentru a accesa elementele DOM.
Cel mai simplu dintre acestea este document.getElementById (). Dacă avem un document HTML definit astfel:
Exemplu Iată câteva exemple de text.
… atunci document.getElementById ( "exemplu") ne va scoate în evidență deschidere obiect din DOM. Am putea adăuga o secundă p eticheta este așa:
Accentsconagua
var newPara = document.createElement ("p"); var newTextNode = document.createTextNode ("Mai mult text exemplu pe care l-am creat în zbor"); newPara.appendChild (newTextNode); document.getElementById ( "exemplu") appendChild (newPara.); Aceasta ar actualiza DOM, făcându-l echivalent cu ceea ce s-ar fi creat în cazul în care codul HTML original a fost după cum urmează:
Exemplu Iată câteva exemple de text.
Mai mult text exemplu pe care l-am creat în zbor.
Și dacă ați vrut să accesați cele două p elemente? Nu le putem accesa direct cu document.getElementById (), deoarece nu au identitate, dar putem folosi document.getElementsByTagName ( "p") pentru a obține o matrice care conține ambele.
Și dacă am fi avut alta deschidere, asa:
Iată câteva exemple de text.
Mai mult text exemplu pe care l-am creat în zbor.
Un al doilea interval.
Nu ne pasă de aceste paragrafe.
... și am vrut doar să obținem primele două p etichete, am putea să sunăm document.getElementById ( "example1"). getElementsByTagName ( "p") doar pentru a recupera cele două - toate aceste funcții DOM lucrează la orice nivel din structura copacilor, la fel ca modul în care fiecare Flash DisplayObjectContainer are metode cum ar fi getChildAt ().
Acest lucru este suficient de simplu pentru a înțelege, dar există probleme. Primul, este posibil să nu fiți surprins să auziți, se referă la Internet Explorer.
Weburile impresionante au o schiță excelentă a Internet Explorer getElementById () problemă. În esență, dacă aveți un element HTML ca acesta:
... atunci, în cele mai multe browsere, document.getElementById ( "exampleName") voi nu vă dau deschidere în cauză, dar în IE7, aceasta voi. (Alte browsere ar putea folosi document.getElementsByName ( "exampleName") [0] pentru a reveni la acest lucru deschidere.)
Aceasta înseamnă că, pentru a fi consecvenți în toate browserele (și presupunând că nu putem modifica codul HTML), va trebui să scriem un cod ca acesta:
var theSpan; dacă (usingIE) // Nu voi explica cum să detectez browser-ul aici var temp = document.getElementById ("exampleId"); // ar putea fi returnat un element cu numele "exampleId", deci trebuie să verificăm dacă: (temp.getAttribute ("id") == "exampleId") theSpan = temp; altceva theSpan = document.getElementById ("exampleId"); În general, am putea împacheta acest lucru într-o funcție reutilizabilă:
funcția getElById (id) if (usingIE) var temp = document.getElementById (id); dacă (temp.getAttribute ("id") == id) return temp; altfel theSpan = document.getElementById (id); Grozav! Dar, din păcate, există atât de multe dintre aceste mici diferențe iritante; probabil că vă va surprinde dacă veniți dintr-un fundal direct Flash, unde "problema de compatibilitate" înseamnă în general că Flash Player este puțin lent pe anumite platforme.
jQuery rezolvă această problemă. Se documentează asupra fisurilor între diferite browsere cu propriul set de funcții, deci dacă browser-ul utilizatorului este cel puțin la fel de nou ca IE6, codul dvs. poate avea o interfață consistentă.
Aceasta nu este singura modalitate prin care jQuery simplifică JavaScript ...
Să ne întoarcem la acest fragment de cod HTML și să presupunem că dorim să recuperăm evidențiați p elemente din DOM:
Iată câteva exemple de text.
Mai mult text exemplu pe care l-am creat în zbor.
Un al doilea interval.
Nu ne pasă de aceste paragrafe.
Cu jQuery, putem scrie:
jQuery ("# example1 p") Asta e tot ce avem nevoie! # example1 spune "a obține elementul cu un ID de example1" și p spune "a lua toate p elemente care sunt copii ai acelui element. "Acesta returnează un" obiect jQuery ", care este un obiect JavaScript care conține cele două p elementele de la JS DOM, plus câteva proprietăți și metode suplimentare specifice jQuery.
Putem face chiar mai scurtă, înlocuind-o jQuery cu $ - nu există nici un mister aici; $ este doar un nume de variabilă scurtă. Comparați-l cu codul nativ JavaScript:
// JS obișnuit, fără compatibilitate cu browserul încrucișat: document.getElementById ("example1") getElementsByTagName ("p") // jQuery, cu compatibilitate încorporată în browser: $ ("# example1 p" Nu este doar mai scurtă, este în concordanță cu CSS, ceea ce ușurează ridicarea. Am putea folosi exact același lucru selector ca în interiorul nostru jQuery () apel la stilul acestor paragrafe specifice într-o foaie de stil CSS:
# example1 p culoare: roșu
Acesta este doar un exemplu foarte simplu; Nu voi intra în detaliu, dar sunt sigur că puteți vedea beneficiul utilizării acelorași selectori atât în CSS, cât și în jQuery.
Am menționat că obiectele jQuery returnate de a $ () apelul a avut metode și proprietăți suplimentare. Acestea vă oferă o sintaxă ușoară pentru scrierea altor coduri comune.
De exemplu, am putea adăuga o funcție de ascultător pentru evenimentele cu clicuri de mouse și funcția de manipulare pentru ambele p elemente cum ar fi:
$ ("# example1 p") faceți clic pe (funcția () alert ("Ați făcut clic pe un paragraf!");); Sau, ai putea să-i faci pe toți invizibili:
$ ("# example1 p") ascunde (); Sau puteți rula niște JavaScript mai general pe ele:
var allText = ""; $ ("# example1 p") fiecare (funcția () allText + = $ (this) .text ();); În fiecare caz, jQuery oferă un mod simplu, scurt și consistent de scriere. Aceasta înseamnă că este mai rapid să obțineți codul de la capul dvs. la browser - și nu doar pentru că necesită mai puține caractere.
Deoarece Flash are rădăcini în animație, suntem obișnuiți să avem multe capabilități de îmbunătățire - atât în Flash IDE, cât și în Tween clasă, ca să nu mai vorbim de diferitele biblioteci disponibile.
JavaScript este diferit; animația nu este o parte intrinsecă a platformei. Dar tweens și tranziții mici sunt așteptate părți ale interacțiunii utilizatorilor aplicației web moderne: dacă adaug un comentariu nou pe un fir, acesta se glisa în loc; dacă elimină un articol din coșul meu de cumpărături, acesta clipește roșu și dispare. Fără acestea, aplicațiile arată nefolosite.
jQuery adaugă aceste mici tranziții.
De exemplu, să presupunem că dorim să facem ca oricare dintre punctele menționate mai sus să se estompeze atunci când sunt făcute clicuri. Uşor:
$ ("# example1 p") faceți clic pe (funcția () $ (this) .fadeOut ();); Nimic la asta! Și tu poți trece a durată și suna inapoi la fadeOut () dacă nu vă plac valorile implicite.
Pentru ceva mai puternic, putem folosi anima() metodă. Aceasta este, în esență, echivalentul unui tween; transmiteți-i un set de proprietăți și valori CSS pentru a anima spre, o durată, un tip de relaxare și un apel invers și are grijă de toate pentru tine.
Nu este chiar Greensock, dar este mult mai convenabil decât scrierea acestor efecte de la zero și ideal pentru interfețele de aplicații web.
Vorbind despre care ...
HTML are câteva componente UI încorporate, desigur: butoane, câmpuri de text și așa mai departe. HTML5 definește câteva noi, cum ar fi un selector de calendar pop-up și un picket de culoare (deși acestea sunt în prezent acceptate numai în Opera).
Dar acestea nu sunt suficiente, singure, pentru a crea o interfață completă și modernă de aplicații web. Nu este nimic de manipulat filele dintr-o pagină, o bara de progres sau chiar o fereastră de dialog simplă (în afara paginii) alerta() și prompt()).
jQuery UI, o bibliotecă opțională construită pe partea de sus a jQuery, adaugă aceste widget-uri suplimentare, cu metode și evenimente care sunt în concordanță cu sintaxa jQuery obișnuită. Gândiți-vă la aceasta ca la un echivalent JavaScript cu AS3 MinimalComps al lui Keith Peters. Pagina demo-ului arată mai bine decât o pot explica.
Fiecare widget poate suporta teme personalizate, astfel încât să puteți crea o singură pielă care să se potrivească site-ului dvs. și să o aplicați la fiecare componentă, făcând posibilă modificarea aspectului lor simultan. Din nou: consistență! În plus, puteți aplica efecte legate de UI altor elemente; face posibil ca utilizatorul să tragă sau să redimensioneze un element DOM sau să dă clic și să tragă o casetă în jurul unui grup de elemente pentru a le selecta pentru trimitere.
Compatibilitatea încrucișată cu browser-ul, sintaxa ușoară, capabilitățile de îmbinare și elementele de interfață UI sunt principalele avantaje ale jQuery față de JS simplu în ochii mei. Există și alte motive pentru a le place:
Deci de ce nu ar fi folosiți jQuery? Ca și în majoritatea opțiunilor tehnologice, este o chestiune de a vă asigura că utilizați instrumentul potrivit pentru această lucrare. Dacă aveți o structură DOM simplu sau nu aveți nevoie de animații și tranziții fanteziste sau folosiți în principal pânză pentru a face interfața dvs., mai degrabă decât widget-urile, probabil că jQuery nu este necesară.
Dacă utilizați deja una sau mai multe biblioteci JavaScript - Dojo, MooTools, YUI etc. - este posibil să descoperiți că nu aveți nevoie de funcționalitatea jQuery pe lângă ceea ce oferă. Dar scopul meu în acest articol nu este să încerc să vă vând pe o anumită bibliotecă mai presus de oricare altul.
Sper că acest articol a ajutat să explice exact ce este vorba despre jQuery, mai ales dacă vii din lumea AS3 și Flash. Dacă doriți să aflați acest lucru, verificați jQuery pe Nettuts + - jQuery pentru Absolute Beginners este un loc bun pentru a începe.
Anunță-mă dacă ai întrebări!
