Share
Să mergem astăzi cu o abordare clară. Vom scrie un mic fragment de cod în jQuery și apoi vom trece la mai multe biblioteci diferite. În afara acelei bucăți, vom examina modul de implementare a unei funcționalități de bază, necesare în fiecare dintre aceste biblioteci. Suna distractiv? Hai să ne aruncăm!
Cadrele JavaScript sunt un avantaj atunci când aveți multe idei pentru a deveni cod funcțional și curat. Și odată cu creșterea meteorică a aplicațiilor web folosind tehnologia AJAX, cadre precum jQuery sunt necesare pentru a reduce timpul petrecut în implementarea funcționalității necesare. Și privind în jur vă vedeți jQuery acest lucru și jQuery că cu puțin sau deloc menționează alte cadre. De fapt, există o mulțime de alte cadre care sunt la fel de elegante ca jQuery. Astăzi vom examina două cadre care promite să ușureze scrierea codului. Rețineți că folosesc biblioteca cuvintelor, cadrul și setul de instrumente interschimbabil. Nu voi intra în semantică și nici pe tine nu trebuie. Fiecare dintre aceste biblioteci încearcă să realizeze lucruri diferite. Vom analiza numai părțile în care funcțiile lor se suprapun.
În afara aplicațiilor esoterice și / sau dedicate, codul JavaScript al majorității oamenilor poate fi împărțit în bucăți care au grijă de următoarele funcționalități:
Un dezvoltator de JavaScript se confruntă cu această problemă mai devreme sau mai târziu: codul său original nu va fi rulat. El a depistat codul din nou și din nou, dar fără nici un rezultat. Problema este că codul este doar plasat în partea de sus a paginii. Când scriptul este executat, elementele la care se referă în codul său nu există nici măcar în DOM care conduc la aceste erori.
Rețineți că apelurile script sunt sincrone. Acest lucru înseamnă că, atunci când un browser vede o etichetă de script, acesta încetează să mai încărcă totul până când script-urile se încarcă. Acest lucru este în contrast puternic cu mecanismul său general de încărcare, unde alte obiecte sunt adesea încărcate asincron.
Ați putea întotdeauna să faceți acest lucru prin plasarea codului în partea de jos a paginii, dar niciodată nu știți. Având în vedere acest lucru, majoritatea bibliotecilor oferă o funcție de pregătire DOM pentru a vă asigura că codul este executat numai după ce DOM este gata să blocheze n 'încărcarea, dar înainte ca imaginile să fie complet încărcate.
Cu JavaScript-ul brut, te-ai uita la ceva de genul asta.
window.onload = someFunction;
Desigur, doriți să accesați anumite elemente și să le manipulați cumva. Din păcate, IE este destul de finic și vă poate rupe codul. Pentru a permite dezvoltatorilor să scrie cod mai bun, fiecare bibliotecă oferă o metodă de browser încrucișată care vă permite să accesați un anumit element. Majoritatea bibliotecilor utilizează selectori de stil CSS la zero pentru elementele lor țintă pentru a face curba de învățare mai scurtă și mult mai importantă, un cod mai curat.
Fără un cadru, va trebui să faceți acest lucru:
Accentsconagua
var elem = document.getElementById ('antet'); var io = document.getElementsByTagName ("intrare"); Desigur, odată ce ați obținut elementul, ați dori să efectuați o operațiune. Aceasta include adăugarea sau eliminarea unei clase, trecerea la vizibilitate, schimbarea dimensiunilor, editarea conținutului acesteia și așa mai departe. Așa cum scrie întotdeauna toate acestea în JavaScript, pot fi dureroase. Fiecare dintre aceste biblioteci oferă funcții de împachetare pentru a face toate lucrările menționate mai sus și multe altele.
Cu codul JavaScript brut, codul dvs. ar arăta astfel:
. Document.getElementById ( "titlul") innerHTML = "Titlu";
De multe ori, doriți să modificați în mod direct nodurile din DOM. S-ar putea să doriți să creați un nou obiect de împachetare la care doriți să vă puneți statutul dvs. Twitter recent sau să doriți să eliminați un element div pentru o aplicație de e-mail pe care o scrieți. În fiecare dintre aceste cazuri, doriți să manipulați eficient DOM, iar toate aceste biblioteci oferă metode pentru a face acest lucru într-un mod curat.
Adăugarea unui element ar lua acest cod cu JS brut.
var myElement = document.createElement ("Sometext"); document.all.myBody.appendChild (myElement); Evenimentele reprezintă elementele de bază ale oricărei aplicații și una dintre cele mai pesimiste părți ale scriptului de browser încrucișat. Lucrul este că W3C definește o cale și IE își face propriul lucru. Pentru a veni peste aceasta, toate aceste biblioteci oferă modalități de a atașa sau de a desemna chiar și manipulanții la anumite evenimente ale elementului.
Legarea evenimentelor în JavaScript brut.
element.addEventListener ( 'clic', doSomething, fals)
JavaScript-ul nativ utilizând obiectul XHR este dificil de scris și de depanat. Pentru a permite dezvoltatorilor să scrie mai ușor codul, fiecare dintre aceste cadre abstractează detaliile obositoare ale implementării unei solicitări AJAX în spatele unui simplu apel de funcții cu metode de apelare atunci când cererea reușește sau nu reușește.
Nici măcar nu voi încerca să postez un cod pentru a solicita AJAX cu JS brut. În schimb, ar trebui să te uiți la ecranul excelent al lui Jeffrey. În scurt timp, vom vedea cum un cadru vă reduce drastic codul.
Nimic nu-mi place; vom construi o demonstrație simplă. Marcajul arată astfel:
Net Tuts Acesta este un exemplu întâmplător text. Faceți clic pe cuvântul "aleatoriu" pentru a modifica DOM, creând un element nou și adăugându-l la conținutul curent.
Avem un text într-un element p. Avem cuvântul întâmplător înfășurat într-un element de span cu un cod de identificare. De fiecare dată când se face clic pe elementul cu elementul de identificare a maintriggerului, trebuie adăugat un nou element div la elementul de paragraf care conține textul "clicat". Această demonstrație simplă atinge toate cerințele de bază de funcționalitate, inclusiv accesarea elementelor, conectarea evenimentelor și adăugarea elementelor cu excepția celor de abstractizare AJAX și ne va permite să ne simțim pentru fiecare bibliotecă.
Înainte de a ne uita la celelalte biblioteci, este mai bine să ne uităm la modul în care jQuery ne permite să facem fiecare dintre ele.
Ah, toate jQuery. Acesta a fost vorba de oraș între dezvoltatorii de web pentru un timp știu și pe bună dreptate. jQuery nu încearcă să facă prea multe lucruri. Nu veți găsi o mulțime de widget-uri plus pachetul de bază sau modalități de a susține clase sau obiecte bazate pe clasă. jQuery se concentrează în principal pe DOM și cred că au făcut o treabă excelentă.
Dacă munca dvs. este în primul rând legate de DOM, jQuery este calea de parcurs. Sintaxa este una dintre cele mai ușoare și de multe ori se simte ca citirea pseudocodului decât codul de lucru real. Comunitatea este mare și prietenoasă și există o multitudine de pluginuri pe care le-ați putea lăsa doar pentru funcționalitate adăugată. În plus, există biblioteca UI dacă doriți să adăugați câteva widgeturi comune pe site-ul dvs..
jQuery include:
Extrem de impresionant dacă mă întrebi.
Acum, vom analiza modul în care jQuery ne permite să reducem timpul petrecut în codificare înainte de a ne uita la celelalte cadre.
$ (document) .ready (funcția () // Lucrurile tale aici);
Când scrieți codul jQuery, este imperativ să introduceți codul în această secțiune. Aici cerem ca codul să fie executat atunci când DOM este pregătit să fie manipulat. Puteți trece fie într-un nume de funcții, fie scrieți tot codul în cadrul unei funcții anonime, ca în exemplul de mai sus.
var container = $ ("# principal"); posturi var = $ (". post"); var titluri = $ ("h1"); Simplu așa cum se întâmplă. Mai întâi creează o variabilă pentru a ține o referință la nodul DOM, deoarece nu vrem să o căutăm din nou și din nou. $ este un alias pentru jQuery Spațiu de nume. Noi trecem doar în id-ul, clasa sau tag-ul elementului exact așa cum ați face dacă ați scrie o declarație CSS. Trecerea în selectori CSS funcționează la fel cum v-ați aștepta. Exemple precum lucrarea de mai jos.
$ ( "Durata: are (a)") doSomething ();. $ ("ul li: nth-child (3)"); doSomething (); . $ ( "P: ascuns") doSomething (); $ ("div") .attr ("clasă", "clic"); $ ( "Div"). Html (“Salut"); $ (" span "); addClass (" curent "); Modificarea atributelor elementelor, a conținuturilor sau a claselor pe care le are este destul de banală. Noi doar accesăm elementul necesar și sunăm funcția necesară. attr ne permite să schimbăm un atribut specific al unui element, html ne permite să specificăm conținutul HTML și addClass metoda nu are nevoie de explicații.
$ ( "# Post"). După (“Comentarii"); $ (" p ") wrap (""), $ (" .com comment "), adăugați ("Postat de„);
Adăugarea elementelor după elementul specificat, adăugarea conținutului în interiorul unui element sau împachetarea elementului trecut cu altul este la fel de ușor. Obținem elementul și apoi numim funcția cea mai potrivită nevoii noastre.
// Utilizarea funcțiilor anonime $ ("# submit"). Bind ("faceți clic", funcția (e) // Codul dvs. aici); // Transmiterea unui nume de funcții $ ("# submit") bind ("click", evHandler); Evenimentele de conectare sunt la fel de ușor. Obținem elementul și apoi apelăm funcția de legare. Primul argument este tipul de eveniment, iar al doilea este codul care trebuie executat atunci când evenimentul este declanșat. Puteți trece fie numele funcției, fie creați o funcție anonimă și plasați întregul cod în interiorul acesteia.
$ .ajax (tip: "GET", url: "test.html", succes: functie (xhr) // Câteva cod aici, eroare: functie (xhr) tip: "POST", url: "test.php", succes: functie (xhr) // Un cod aici, eroare: functie (xhr) // Unele cod aici);
Aveți nevoie doar de 3 linii pentru a efectua un apel AJAX cu bare libere. Specificați tipul de solicitare, adresa URL și sunteți bine să mergeți. Succesul și funcțiile de eroare pot fi definite pentru a specifica ce se întâmplă dacă se întâmplă numele lor.
Pentru a obține funcționalitatea dorită menționată mai sus, codul dvs. jQuery ar arăta aproximativ ca acesta:
$ ("# maintrigger") faceți clic pe (funcția () $ ("p") după ("a dat clic");); 3 linii este tot ce este nevoie. Selectăm elementele necesare, apelați funcția de clic, creați o funcție anonimă și adăugați un element div. Sună mult mai complicat decât de fapt.
Acum că am analizat codul jQuery, putem explora celelalte biblioteci.
Prototipul este marele tată al cadrelor JavaScript. Oferă toate avantajele pe care le-ați aștepta de la un cadru matur și apoi adaugă un pic mai mult. Acesta oferă, de asemenea, o serie de funcții de bibliotecă pentru a vă ajuta să scrieți frumos abstracționat, obiect orientat spre cod.
Baza de utilizatori a prototipului include:
O mulțime de nume bine cunoscute, de nivel superior acolo. Așa cum am spus, prototipul a fost cadrul de alegere pentru mult timp înainte ca jQuery să intre.
Acum, că introducerile se fac, să vedem cum Prototype vă poate ajuta să scrieți mai bine JavaScript.
document.observe ("dom: loaded", funcția () // Codul dvs. aici); Cele de mai sus sunt versiunea Prototype a DOM pregătită. Arată ciudat la început dacă vii de la jQuery, dar este la fel de simplu. observa Funcția asculta pentru evenimentul trecut pentru durata de viață a documentului. Tocmai trecem la evenimentul necesar și acoperim tot codul nostru într-o funcție anonimă, la fel ca la jQuery.
// Accesați un element cu un id de post $ ('post'); // Utilizați motorul selector CSS $$ ('. Comment'); $ oferă un alias pentru document.getElementById metodă. Vă permite să găsiți elemente cu valoarea ID trecută.
$$ vă permite să utilizați în schimb selectori CSS. Este nevoie ca argumentele oricarui numar de selectori CSS si returneaza elementul specific sau o serie de ele. La fel ca în cazul motorului selector jQuery, puteți folosi tot felul de selectori CSS3 nefavorabili, inclusiv selectori de copii, selectori de atribute și chiar pseudo-clase.
$ ( 'Post') addClassName ( 'autor').; $ ( 'Container') getWidth ().; $ ( 'Post') ascunde ().;
Prototype oferă o serie de metode puternice de lucru cu elementul returnat. Rețineți că trebuie să accesați acest lucru prin obiectul $. Ceea ce inseamna ca trebuie mai intai sa salvezi referinta inainte sa poti manipula elementul in vreun fel pe care il consideri potrivit.
Manipularea unui element este la fel de simplă ca obținerea unei referințe la element și apelarea funcției necesare. Puteți face o mulțime de lucruri de la setarea sttributes, pentru a ascunde elementul.
$ ('post'). wrap ('div', 'id': 'container')); $ ( 'Post'). Actualizare (“Un text aleatoriu
„); $ ('post') inserați ('div', 'Un text aleatoriu
„); Prima metodă împachetează elementul transferat cu un element descris, setând diferitele sale proprietăți în proces. Funcțiile de actualizare înlocuiesc conținutul elementului transferat cu cel dorit. Introduceți inserții text simplu sau fragmente HTML în partea de sus, de jos, înainte sau după element. În loc de a folosi metode separate cum ar fi adăuga și după ca în jQuery, trebuie doar să specificăm poziția și am terminat.
// Utilizarea funcțiilor anonime $ (btn) .observe ("clic", funcție (eveniment) // Codul dvs. aici); // Transmiterea numelui funcției $ (btn) .observe ('click', doSomething); După cum am menționat mai devreme, observa Funcția vă permite să conectați evenimentele la agenții de gestionare a evenimentelor. Mai întâi obținem o referință la element și apoi sunăm observa metodă care transmite numele și funcția evenimentului ca parametri. Dacă nu doriți să creați o funcție separată doar pentru acest lucru, sunteți întotdeauna liber să creați o funcție anonimă și să puneți tot codul înăuntru.
nou Ajax.Request ("test.html", method: 'get', onSuccess: functie (transport) // Un cod aici, onFailure: functie (transport) // Un cod aici); nou Ajax.Request ("test.php", method: 'post', onSuccess: function (transport) // Unele cod aici, onFailure: functie (transport) // Unele cod aici); Prototype oferă funcții extensive de înfășurare pentru a face o solicitare AJAX. Am arătat cererile de AJAX POST și GET de nivel inferior aici. Există o mulțime de alte metode specializate pentru solicitările AJAX, inclusiv o actualizare automată.
Pentru a atinge funcționalitatea dorită menționată mai sus, codul dvs. ar arăta aproximativ așa:
$ ("maintrigger") observați ('click', funcție (eveniment) $ ("text"a dat clic„); ); Încă o linie cu 3 căni. Ceea ce facem este similar cu codul jQuery, sintaxa este doar diferită. Noi folosim observa pentru a atașa evenimentul clic la codul pe care l-am creat într-o funcție anonimă. Vom introduce doar un text pentru a indica faptul că procesul a fost un succes.
Veți vedea că, în general, facem același lucru cu jQuery, doar cu o sintaxă diferită și câteva diferențe. Când lucrarea dvs. nu este DOM-centrică și aveți nevoie de obiecte adecvate pentru a vă folosi în mod corespunzător ideile, Prototype este cadrul de alegere.
Mootools nu mărturisește că este un cadru ușor de învățat. Hai să ne confruntăm cu aceasta, pagina sa de web spune că este un cadru de aplicații web pentru dezvoltatorii web intermediari și avansați. Nu-i lăsa să te păcălească. Acesta este un cadru extrem de elegant care vă permite să creați JavaScript extrem de clasic. Se concentrează pe JavaScript ca un întreg în loc de DOM. Având în vedere acest lucru, acesta oferă o serie de funcții pentru a vă accelera fluxul de lucru și, de asemenea, extinde DOM ori de câte ori este posibil. Și la fel ca Prototype, acesta conține un sistem de creare de clasă și de moștenire care ar trebui să facă pe cei care vin din C # sau Java mai confortabil cu JavaScript.
Companiile care folosesc MooTools includ:
Un alt cadru cu o bază de utilizatori foarte impresionantă.
Să ne uităm acum la modul în care MooTools vă face viața mai ușoară ca dezvoltator JavaScript.
window.addEvent ('domready', funcția () // Codul dvs. aici); Ar putea părea complicat, dar nu vă îngrijorați. Se pare diferit. Atragem evenimentul de tip jurnal al ferestrelor la funcția anonimă. addEvent ne permite să atașăm evenimente pentru agenții lor. MooTools definește evenimentul de tip "domready" pe care îl folosim aici. Ca de obicei, înfășurăm codul nostru într-o funcție anonimă și o plasăm înăuntru. Acolo! Nu a fost așa de greu, nu-i așa??
// Utilizați funcția $ $ ('someElement'); // Utilizați selectorii CSS $$ ("# principal"); $$ ( "post."); $$ ( "h1"); La fel ca în Prototype, puteți utiliza funcția $ ca un pseudonim pentru recuperare directă sau utilizați funcția $$ pentru a utiliza selectori CSS mult mai intuitivi.
Fiecare dintre aceste metode returnează fie un element DOM, fie un tablou în funcție de care utilizați.
$ ( 'SomeElement) .hasClass (' clic pe "); // Returnează adevărat dacă elementul într-adevăr are acea clasă $ ("someElement") setProperty ('class', 'clicked'); $ ( "SomeElement") gol ().; // Golește elementul tuturor copiilor săi MooTools oferă o serie de metode pentru a manipula un element specific, inclusiv setarea atributelor acestuia, modificarea conținutului acestuia și așa mai departe. Dacă sunteți interesat, consultați documentația MooTools aici
var someElement = element nou ('div', id: 'mySecondElement'); someElement.inject (someOtherElement); // Injectează conținutul lui someElement în cadrul unorOtherElement $ ("someElement"). Destroy (); / / Îndepărtează elementul și toți copiii lui din clona () din DOM $ ('someElement'). // Face o copie a elementului La fel ca majoritatea bibliotecilor, MooTools oferă o multitudine de funcții pentru a ne permite să modificăm DOM. Totul, de la adăugarea conținutului la eliminarea completă a unui nod din DOM, este inclus.
// Utilizarea funcțiilor anonime $ ('myElement'). AddEvent ('click', funcția () // Unele coduri); // Introducerea numelui de funcții $ ('myElement') addEvent ('click', doSomething); După cum am menționat mai sus, folosim addEvent metodă pentru atașarea evenimentului la dispozitivul de manipulare. Transmitem numele evenimentului la funcție și, ca de obicei, suntem liberi să alegem între crearea unei funcții separate sau anonime pentru a pune codul nostru în.
// Cerere GET var myRequest = cerere nouă (method: 'get', url: 'test.html'); myRequest.send (); // Cerere POST var myRequest = cerere nouă (url: 'test.html'); myRequest.send (someData);
Setarea unei solicitări AJAX este la fel de ușoară. MooTools oferă un robust Cerere clasa care permite utilizarea face POST sau GET AJAX cereri. Metoda implicită este POST, astfel încât nu este nevoie să specificați dacă faceți o solicitare.
La fel ca și alte cadre, clasa de solicitări acceptă apeluri de repetare pentru succes, eroare și finalizare.
Pentru a atinge funcționalitatea dorită menționată mai sus, codul dvs. ar arăta aproximativ așa:
$ ("text"); var someElement = element nou ("div"); someElement.appendText ("Clicked!"). injectați (elem, "după");); Puțin mai detaliat decât celelalte două implementări, dar aici vom crea de fapt un nod div de la zero și apoi îl vom adăuga. De asemenea, stocăm o referință la elementul de paragraf în sine. După aceea, adăugăm simplu textul necesar în elementul nou creat și apoi îl adăugăm DOM.
Mai multe verbose? Da. Mai dificil? Cu siguranta nu. Este doar un stil diferit de codificare.
$ ("# maintrigger") faceți clic pe (funcția () $ ("p") după ("a dat clic");); $ ("maintrigger") observați ('click', funcție (eveniment) $ ("text"a dat clic„); ); $ ("text"); var someElement = element nou ("div"); someElement.appendText ("Clicked!"). injectați (elem, "după");); Toate aceste fragmente de cod fac în esență același lucru. Doar în stiluri diferite și cu cantități diferite de control.
Acest articol nu a fost în nici un fel menit să compare aceste cadre. În schimb, am vrut să atrag atenția cititorului asupra celorlalte soluții viabile disponibile în afara jQuery. Nu este faptul că jQuery este rău. Îmi place jQuery, este un cadru minunat, dar se concentrează în primul rând doar pe DOM și DOM. Dacă sunteți în căutarea de a scrie o aplicație web sau un renderer sau un alt lucru cool, crearea unui cod de întreținere, extensibil, curat este o prioritate. Pentru aceste tipuri de scenarii, este mai logic să recurgeți la un alt cadru.
Am putea alege doar două cadre în acest articol datorită constrângerilor spațiului. Există o serie de cadre, la fel de puternice, precum Dojo, YUI, Rico și GWT, care merită, de asemenea, atenția dvs..
Sper că v-am văzut astăzi interesat de cadrele JavaScript alternative și sper cu adevărat să experimentați alte cadre. Spuneți-ne cum funcționează experimentarea în comentarii. Codificare fericită!
