Următoarele exemple prezintă două modalități de inițializare a elementului "selectare dată". Prima cale este "Vom inițializa totul la rând", iar al doilea exemplu va folosi principiul "Inițializăm la momentul potrivit"
Exemplu de marcare
Pentru o explicație mai bună a ideii, voi încerca să arăt mai întâi mostra de cod și apoi să explic ce se întâmplă în ea. Vom folosi următorul cod HTML pentru a marca codul nostru.
Folosesc Twitter Bootstrap pentru a crea o vizualizare UI prezentabilă și de aceea am mai multe clase în codul de mai sus.
Codul prezintă o formă simplă cu elemente de intrare diferite. În formular vom avea câmpuri de date diferite pe care le-am dori să le inițializăm utilizând widget-ul datepicker al jQuery UI.
Inițializați totul
Următorul cod jQuery arată familiar din multe fragmente pe care ar trebui să le vedeți pe internet, în lecții, în aplicațiile dvs.
Folosesc o mică bibliotecă moment.js pentru a lucra cu date. Aceasta este o bibliotecă destul de la îndemână, care este bogată în diverse funcții.
Înțelegeți codul:- Așteptăm ca documentul să fie pregătit înainte de a executa restul codului nostru.
- Imediat după ce DOM este gata, selectați toate elementele de intrare ale paginii cu clasa de date.
- jQuery va itera în mod implicit prin intermediul setului său intern de elemente și va inițializa fiecare utilizând jAPlayer UI pentru datapicker jQuery.
Avantajele acestei tehnici
- Când utilizatorul interacționează cu oricare dintre elementele de intrare.data, ele vor fi deja instalate și, prin urmare, vor răspunde foarte repede.
Dezavantaje ale acestei tehnici
- Codul dvs. trebuie să aștepte ca DOM să fie gata înainte de a putea selecta elementele. Ar fi frumos dacă ați putea folosi perioada între jQuery și atunci când DOM este gata.
- Selectorul nu are context, așa că caută toate elementele de intrare DOM cu clasa de date. Acesta va fi un selector semi-optim, deoarece nu există nici o limită a limitelor sau contextului a ceea ce este căutat.
- Codul inițializează toate elementele (ciclul ascuns) de care aveți nevoie sau nu. Desigur, widget-urile sunt gata atunci când aveți nevoie de ele, dar aveți nevoie de tot acest cod pe partea din față a site-ului?
- Se execută o mulțime de cod, care nu este deloc necesar, până când pagina este încărcată complet. Toate acestea afectează viteza de încărcare a paginii, care este un punct cheie pentru utilizatori.
Inițializare la momentul potrivit
Fragmentul următor diferă puțin de exemplul anterior, dar rezultatul este același, iar plusurile și minusurile sunt diferite. Uită-te cu atenție și găsiți diferențele.
Folosesc biblioteca toastr pentru a scoate mesajele indicator despre inițializarea elementelor. Biblioteca a fost creată de Hans Fjöllemark și John Papa.
- Am setat imediat modulul de tratare a evenimentului să aștepte introducerea de către utilizator înainte de a inițializa introducerea datei - datepicker. Acest lucru va permite ca codul să ruleze imediat după ce a rulat jQuery pe pagină, chiar înainte ca DOM să fie gata. Nu trebuie să ne așteptăm la pregătirea DOM, deoarece ne delegăm evenimentul în contextul documentului - document.
- Nu inițializăm toate elementele input.date, urmăm doar evenimentul de focalizare. Acest eveniment se va propaga în sus (ca un balon) prin copacul DOM până când ajunge la documentul documentului și la acel moment jQuery determină dacă obiectul focalizat se potrivește cu metadatele stocate în acesta. Această constatare a corespondenței dintre metadate este foarte rapidă, deoarece este comparat doar acest selector "nebun" cu un element DOM, la care a lovit focul și nu întregul arbore DOM.
- Selectorul nostru avansat caută un element input.date care nu are o clasă hasDatepicker. Dacă se potrivește, atunci acest element DOM va fi inițializat. După aceea, dacă elementul a fost focalizat, atunci selectorul nu se va potrivi, deoarece jQuery a adăugat clasa hasDatepicker atunci când a creat un widget pentru el.
Avantajele acestei tehnici
- Viteza de descărcare foarte rapidă, deoarece adăugați un manipulator de evenimente la documentul de document cu unele metadate care vor fi utilizate ulterior
- Nu există selecții jQuery când DOM este gata
- Nu există buclă ascunsă pentru inițializarea elementelor
- Doar elementele care urmează să fie utilizate sunt inițializate, deci nu există execuție a codului redundant
- Elementele care sunt focalizate sunt inițializate o singură dată
- Această tehnică funcționează, de asemenea, pentru adăugarea dinamică a câmpurilor "date input" adăugate DOM
Dezavantaje ale acestei tehnici
- Există unele capace care se concentrează evenimentul trebuie să urce în sus documentul și să facă jQuery document de metadate pentru a verifica pe elementul de selectare în cerere, dar aceasta este doar o picătură de rouă, ca fiind testat doar un singur element.
concluzie
În mod constant doriți să limitați inițierea completă a tuturor lucrurilor. Va fi util dacă începeți să vă gândiți la întârzierea inițializării până în momentul în care este necesar sau chiar înainte de acest moment. Procedând astfel, puteți utiliza timpul imediat după ce ați rulat jQuery și nu așteptați ca DOM să fie gata, atunci puteți utiliza acest timp prețios în timp ce pagina se încarcă. În plus, veți avea un selector ciudat jQuery nebun, foarte rapid, deoarece verifică doar un element care sa focalizat, nu întregul arbore DOM.
Vă mulțumesc foarte mult pentru ajutorul dvs.
Articole similare
-
Cum să luați tetraciclină cu diaree - tot ce ați vrut să știți - informații despre sănătate
-
Propolisul pentru răceli - tratament fără probleme - "toate lucrurile mici"
-
Gulzhan ergaliyeva este același ca și în cazul lui Rahat Aliyev, poziția dată-publică
Trimiteți-le prietenilor: