În această lecție sunt oferite 15 sfaturi pentru lucrul cu biblioteca jQuery. Metodele descrise vă ajută să utilizați în mod eficient un puternic instrument de dezvoltator.
1. Utilizați cea mai recentă versiune a jQuery.
Utilizarea inovațiilor care apar în proiectul jQuery este una dintre cele mai ușoare căi de a îmbunătăți performanța site-ului dvs. Web. Fiecare nouă versiune a bibliotecii conține noi optimizări de cod și corecții de erori. Întregul proces de îmbunătățire este redus la o înlocuire elementară a conținutului etichetei de script.
Ultimul exemplu va include în mod automat cea mai recentă versiune a jQuery 1.6.x, dar țineți cont de faptul că acesta este stocat doar în cache timp de o oră.
2. Faceți selectorii mai ușor.
Cu toate acestea, procesul de obținere a elementelor ar trebui optimizat. Mulți utilizatori continuă să utilizeze versiuni mai vechi de browsere care forțează jQuery să se scufunde în parsarea copacului DOM, ceea ce este un proces lent.
Alegerea prin id este cea mai rapidă opțiune. Dacă trebuie să selectați o clasă, prefigurează-i numele cu eticheta $ ('li.selected'). Această optimizare afectează semnificativ procesele din browserele mai vechi și din dispozitivele mobile.
Un alt punct de reținut este faptul că jQuery vă oferă un set mare de selectori suplimentari (cum ar fi: vizibil, ascuns, animat) care nu sunt selectori CSS. Ca rezultat, dacă le folosiți, biblioteca nu utilizează funcția querySelectorAll (). Pentru a optimiza procesul, trebuie să selectați mai întâi elementele și apoi să le filtrați:
Rezultatul exemplului de mai sus este același, dar a doua opțiune produce un rezultat mai rapid.
3. obiecte jQuery ca matrice.
Rezultatul utilizării selectorilor este obiectul jQuery. Dar cu ea puteți lucra ca o matrice cu indexul de elemente și lungimea lor.
Dacă problemele legate de performanță vă deranjează, utilizați simplu pentru sau pentru bucle în loc de $ .each ().
Verificarea lungimii este, de asemenea, o metodă de determinare a existenței unei colecții într-o colecție.
4. Proprietatea selectorului.
jQuery oferă o proprietate care este utilizată pentru a porni lanțul.
Deși exemplele de mai sus indică un element, selectorii sunt diferiți. Selectorul secund nu poate fi folosit pentru a crea un nou obiect jQuery. Acesta arată metoda de filtrare pentru îngustarea colecției.
5. Creați un obiect jQuery gol.
Uneori trebuie să creați un obiect gol și să îl umpleți mai târziu cu metoda add ().
Această abordare este baza metodei quickEach (). care pot fi folosite ca o alternativă la standardul fiecare ().
6. Filtru propriu pentru selectori. Alegem un element aleatoriu.
Puteți crea propriul dvs. filtru pentru selectori. Trebuie doar să adăugați o nouă funcție în obiectul $ .expr [':']. Iată codul pentru selectarea aleatorie a unui element:
7. Folosim cârligele CSS.
API-ul cârlig CSS oferă dezvoltatorului capacitatea de a recepționa și de a seta anumite valori CSS. Puteți ascunde implementarea specifică a proprietăților în browsere și puteți utiliza o singură interfață pentru a accesa anumite proprietăți.
Și mai ales că există deja o bogată bibliotecă de cârlige suportate de CSS, care pot fi folosite în proiectele lor.
8. Utilizați funcția de tranziție personalizată în animații.
9. $ .proxy ()
Unul dintre dezavantajele folosirii funcțiilor returnare în jQuery este că atunci când sunt executate folosind metode de bibliotecă, contextul este setat pentru un alt element. De exemplu, dacă aveți un marcaj:
Trebuie să ascundeți panoul când faceți clic pe buton. Încercați să faceți codul:
Ca rezultat, avem o problemă - butonul dispare, nu panoul. Cu $ .proxy puteți face acest lucru:
Acum totul se face așa cum ar trebui. Funcția $ .proxy primește două argumente - funcția inițială și contextul. Aceasta returnează o nouă funcție, în care aceasta corespunde contextului.
10. Determinați greutatea paginii dvs.
Simplul fapt: cu cât mai mult conținutul pe pagina dvs., cu atât mai mult timp browserul își petrece rezultatele. Puteți determina rapid numărul de elemente DOM pe o pagină utilizând codul consolei:
Cu cât este mai mic numărul, cu atât mai rapid va fi afișată pagina. Puteți optimiza viteza de descărcare prin eliminarea marcării redundante și a containerelor inutile.
11. Asigurați-vă plugin-ul jQuery al codului.
Dacă ați făcut timp pentru a dezvolta codul folosind jQuery, vă recomandăm să îl implementați ca plug-in. Deci, codul poate fi folosit cu ușurință în mod repetat și fără limitări și vă va ajuta să formați baza de date de dezvoltare pentru proiecte.
Crearea unui plugin jQuery este un proces foarte simplu:
12. Setați implicit funcțiile globale și valorile pentru AJAX.
Când lucrați cu cererile AJAX în aplicația dvs., adesea trebuie să afișați o indicație a progresului procesului. De obicei, este afișată o animație de încărcare sau un strat de întunecare. Controlul indicatorului în fiecare apel $ .get sau $ .post poate fi rapid obosit.
Cea mai bună soluție este să setați implicit un set de valori și funcții globale AJAX utilizând metodele jQuery.
13. Utilizați întârzierea () pentru animații.
Legarea efectelor de animație la lanțuri este un instrument puternic pentru jQuery. De asemenea, puteți introduce o întârziere între animații.
14. Utilizați atributul de date HTML5
Atributul de date HTML5 este proiectat să includă pur și simplu date într-o pagină Web. Este convenabil pentru schimbul de date între server și partea client, când trebuie să ieșiți din bloc