JQuery bun

În primul rând, cea mai scurtă dintre istorii. jQuery a apărut pentru prima dată în jurul anului 2006. A fost o perioadă în care scrierea codului JavaScript însemna că trebuia să fii foarte conștient de browser-ul țintă care ar rula codul tău. Standardele zilei erau în cel mai bun caz slabe. Și după cum se spune, lucrul grozav despre standarde este că există atât de multe dintre care să alegi. jQuery a oferit dezvoltatorilor o abordare consecventă pentru scrierea JavaScript (un API, în esență), ceea ce însemna că puteți scrie cod folosind jQuery care să funcționeze apoi în multe browsere. Deci, firesc, a crescut rapid în popularitate. De fapt, a devenit atât de popular, în special în rândul dezvoltatorilor noi, încât s-a spus că unii dezvoltatori se luptă să scrie JavaScript Vanilla real (alias JavaScript care nu folosește niciun cadru precum jQuery). Nu este surprinzător, având în vedere cât de ușor a fost să utilizați jQuery în comparație cu echivalentele Vanilla JS de acum câțiva ani.

Mai puțin bun jQuery

Fiind în preajmă atât de mult timp și îmbunătățit activ în tot acest timp, în mod natural, o bună parte a balonării este destinată să facă parte din amestec, așa cum ar fi cazul în orice produs software. Pentru unele proiecte, aceasta va fi cea mai mare bibliotecă JS din proiect, micșorându-le pe toate celelalte și având un impact negativ asupra performanței generale a aplicației web rezultate. Deși nu mă îndoiesc că aceasta poate fi o problemă reală, trăim și acum într-o lume cu telefoane mobile care au zeci și zeci de GB de RAM, 100 Mbps+ conexiuni wireless, mai multe nuclee CPU ca niciodată și o rezoluție substanțială a ecranului. mai mare decât ceea ce au majoritatea oamenilor pe desktop-urile lor. Cei 85 kb în plus pe care jquery.min.js îi va descărca nu pare să fie prea agitat. Dacă difuzați milioane de pagini pe oră, iar restul paginii dvs. este mai degrabă de 10 kb, atunci sigur că scăpați de jQuery ar putea fi o prioritate.

Dincolo de aceste cadre JS, JavaScript în sine a continuat să evolueze. Multe dintre inconsecvențele și incompatibilitățile au fost rezolvate, în special la nivelurile inferioare la care operează jQuery. O mare parte din funcționalitatea de bază a jQuery este acum parte a standardului JavaScript, cu implementări care depășesc în mod obișnuit echivalentele lor jQuery. Ceea ce înseamnă că eliminarea jQuery dintr-un proiect îl poate îmbunătăți. Atât în ceea ce privește lipsa de încărcare a bibliotecii jQuery, dar și mai puțin cod și cod mai rapid în general. Stimulente solide pentru orice proiect, dacă biții de jQuery care sunt utilizați se încadrează în această zonă. Dar nu tot jQuery a fost înlocuit (încă), și un număr mare de proiecte încă mai au jQuery ca dependență, fără planuri pentru eliminarea acestuia. jQuery va fi cu noi pentru ceva timp.

Despre această dependență

Fie că adăugați jQuery la proiectul dvs. TMS WEB Core pentru a satisface o cerință de dependență enumerată de o altă bibliotecă JS, sau pentru că pur și simplu vă place jQuery, adăugarea acestuia la proiectul dvs. este la fel de rapidă și ușoară ca orice altă bibliotecă JS. Doar deschideți Managerul bibliotecii JavaScript, derulați până la capăt și veți găsi jQuery 3.5.1.

Ca de obicei, puteți, de asemenea, să editați fișierul Project.html și să adăugați linkul necesar. Singurul lucru de menționat este că ar trebui să fie înaintea oricăror alte biblioteci JS care o listează ca dependență. În mod implicit, linkul furnizat de Managerul bibliotecii JavaScript face referire direct la site-ul jQuery, mai degrabă decât un alt CDN.

Există și alte modalități de a obține jQuery și există alte modalități de a încorpora jQuery în proiectul tău dacă ești interesat să compilați propria versiune. Acest lucru vă va permite să excludeți biți de care nu aveți nevoie, sau poate chiar să adăugați biți noi dacă intenționați să personalizați jQuery pentru a fi utilizat în multe proiecte. Dar, ca și în cazul multor alte subiecte pe care le vom întâlni, de obicei, acest lucru nu este ceva pe care l-ați face decât dacă lucrați la o scară foarte mare. Dacă doar încercați să adăugați jQuery la proiectul dvs. pentru a satisface cerințele de dependență ale unei alte biblioteci JS, vești bune! Ești gata. Dacă intenționați să utilizați jQuery direct, atunci avem mai mult teren de acoperit.

jQuery, organizația, are și alte produse care se bazează pe sau sunt legate de jQuery și uneori poate fi confuz. De exemplu, jQueryUI este un set de componente suplimentare și alte infrastructuri de sprijin legate de interfața utilizator pe care le puteți utiliza la fel de ușor ca jQuery. Și în lista de biblioteci găsite implicit în Managerul de bibliotecă Javascript, veți găsi produse ale altor furnizori care stau deasupra jQuery, cum ar fi jQWidgets în captura de ecran de mai sus. Toate acestea sunt doar biblioteci JS suplimentare ca oricare altele, care pot fi adăugate la proiectul dvs. în același mod și utilizate la fel ca orice altă bibliotecă JS, deși mai strâns integrate cu jQuery în sine și, desigur, cu jQuery ca dependență.

jQuery prima zi

JavaScript ca limbaj este un subiect amplu și complex și nu vreau să acopăr totul aici. Cu toate acestea, pentru a utiliza jQuery direct, vă ajută să înțelegeți puțin elementele de bază ale modului de utilizare. Folosirea jQuery într-un proiect TMS WEB Core înseamnă, în mod necesar, că orice cod jQuery va fi încapsulat în blocuri asm… …end . Voi face tot posibilul să nu opresc niciuna. Deci haideți să încercăm ceva simplu. Să presupunem că aveți un formular cu trei TWebButtons, WebButton1, WebButton2 și WebButton3 , fiecare cu proprietățile Caption și ElementID setate la aceeași valoare ca proprietatea Name. Și toate trei au aceeași valoare a proprietății ElementClassName a „btn btn-secondary” – clase Bootstrap care sunt folosite pentru a stila butoanele generice. Ar trebui să arate ceva ca următorul.

Rularea proiectului vă va oferi trei butoane în stilul implicit Bootstrap „secundar”. Nimic deosebit de remarcabil în asta, desigur.

În mod implicit, dacă faceți clic pe oricare dintre butoane, nu se întâmplă nimic. Înapoi în IDE, puteți adăuga cu ușurință cod pentru fiecare buton pentru a face ceva. Deci, să presupunem că doriți ca un clic pe WebButton1 să-și schimbe Legenda pentru a spune altceva. Nimeni nu ar trebui să aibă probleme în a face asta în Delphi, dar doar pentru distracție vom presupune că avem și FontAwesome disponibil.

 procedura TForm2.WebButton1Click(Expeditor: TObject);
 ÎNCEPE
 WebButton1.Caption := 'Am înțeles ';
 Sfârşit; 

Nu se poate deveni mult mai ușor decât atât. Deci, cum am face asta direct în JavaScript? O mulțime de moduri. Rulând în TMS WEB Core, putem face referire directă la WebButton1, deci este aproape la fel, trebuie doar să schimbăm operatorul de atribuire de la := la = și numele proprietății pe care o schimbăm din Caption în innerHTML.

 procedura TForm2.WebButton1Click(Expeditor: TObject);
 ÎNCEPE
 asm
 WebButton1.innerHTML = 'Am înțeles ';
 Sfârşit;
 Sfârşit;

De asemenea, putem lucra mult direct în Delphi, fără a fi nevoie să recurgem la JavaScript folosind același tip de apeluri JavaScript. Aceasta poate fi o modalitate la îndemână de a rezolva problema cu variabilele non-locale, de exemplu, pentru că suntem încă în Delphi și nu trebuie să fim îngrijorați de situația domeniului JavaScript. Majoritatea componentelor TWeb* au o proprietate ElementHandle care este de tip TJSHTMLElement . Deci ai putea, fără a recurge la JavaScript, să scrii cele de mai sus astfel.

 procedura TForm2.WebButton1Click(Expeditor: TObject);
 ÎNCEPE
 WebButton1.ElementHandle.innerHTML := 'Am înțeles ';
 Sfârşit;

Dacă ne prefacem că nu rulăm în TMS WEB Core sau dorim să actualizăm un element care nu se mapează direct la o componentă TMS WEB Core din formularul nostru. Atunci problema este că trebuie să găsim o referință la WebButton1 înainte de a o putea actualiza. Există o serie de motive pentru care acesta ar putea fi cazul, dar apare atât de des în aproape fiecare exemplu de cod JavaScript încât s-ar crede că este modalitatea preferată de a face referire la elemente. În Vanilla JavaScript, puteți căuta referința la WebButton1 și apoi puteți modifica proprietatea acesteia, astfel.

 procedura TForm2.WebButton1Click(Expeditor: TObject);
 ÎNCEPE
 asm
 document.getElementById('WebButton1').innerHTML = 'Am înțeles ';
 Sfârşit;
 Sfârşit;

Această funcție de căutare, sau de interogare, caută în întregul DOM elementul numit WebButton1 , pe care l-am setat mai devreme cu proprietatea ElementID . În cazul nostru, DOM-ul este foarte mic și acest lucru nu va dura deloc. DOM se referă la Document Object Model – practic vizualizarea codului paginii dvs. web. Ne putem imagina cu ușurință că în pagini mai mari, cu sute sau poate chiar multe mii de elemente într-o ierarhie aleatorie, găsirea rapidă a unui element este extrem de importantă. Și aici pot fi urmărite originile (și numele) jQuery – interogând DOM JavaScript. Pentru a scrie același cod folosind jQuery, ar arăta astfel.

 procedura TForm2.WebButton1Click(Expeditor: TObject);
 ÎNCEPE
 asm
 $('#WebButton1').html('Am înțeles ');
 Sfârşit;
 Sfârşit;

Rețineți că $(#) este funcția de înlocuire a documentului. getElementById și că, în loc să setăm valoarea proprietății innerHTML , numim funcția html . jQuery preferă funcțiile în locul atributelor, deoarece acest lucru permite înlănțuirea operațiilor împreună. Și există o mulțime de funcții jQuery care pot fi adăugate. Vom folosi funcții precum delay(), fadeIn() și fadeOut() sunt exemple. Deci, dacă ați dori să actualizați Legenda, așteptați două secunde și apoi să dispară întregul buton, ar arăta așa.

 procedura TForm2.WebButton1Click(Expeditor: TObject);
 ÎNCEPE
 asm
 $('#WebButton1').html('Am înțeles ').delay(2000).fadeOut(500);
 Sfârşit;
 Sfârşit;

Funcția de întârziere () din jQuery nu este chiar ca un apel Delphi sleep (). JavaScript a setTimeout () pentru asta. Este mai mult despre inserarea unei întârzieri în coada de animație a jQuery – lista de animații în așteptare pentru un anumit element. Pentru a face cele de mai sus în Vanilla JavaScript ar necesita, prin urmare, două funcții setTimeout și ceva mai mult pentru a anima valoarea opacității elementului de la 1 la 0. Fezabil, desigur, dar probabil nu la fel de banal pentru cod. Și acesta este cheia problemei cu jQuery. Este complet posibil să eliminați jQuery, dar trebuie să actualizați codul pentru a utiliza echivalentele non-jQuery. Ceea ce poate fi plictisitor dacă așa arată tot codul tău.

Multiplicator de forță

Ce se întâmplă dacă ați dori un clic pe WebButton1 pentru a schimba în schimb legenda pe toate cele trei butoane? În Delphi, JS și jQuery, puteți doar să copiați și să lipiți codul pentru fiecare și să actualizați WebButton1 cu WebButton2 și WebButton3 , desigur. Dar să presupunem că acestea reprezintă un număr arbitrar de butoane pe pagină. Și să presupunem că nu știm cum se numesc, doar că au o proprietate comună, ElementClassName , și ne interesează cele cu valoarea „btn” inclusă. Acest lucru s-ar putea să nu se întâmple des într-o aplicație Delphi VCL, dar este o apariție frecventă în aplicațiile web. Într-o aplicație Delphi VCL, probabil că veți ajunge la FindComponent și veți itera toate clasele TWebButton , verificând fiecare proprietatea în cauză. Sau, dacă ați plănuit să faceți acest lucru în avans, ați avea o matrice TObject de căutat. Dar în jQuery, acest lucru este banal.

 procedura TForm2.WebButton1Click(Expeditor: TObject);
 ÎNCEPE
 asm
 $('.btn').html('Am înțeles ');
 Sfârşit;
 Sfârşit; 

În loc de $(#) folosim $(.). Oricine este familiarizat cu CSS va recunoaște imediat diferența dintre „#” care reprezintă ID-ul unui element (care este unic pentru fiecare element în pagină) și „.” reprezentând o singură clasă asociată cu un element, unde poate exista orice număr de clase neunice asociate cu orice element din pagină. Versiunea echivalentă în Vanilla JavaScript va fi probabil document.getElementsbyClassName() , care va returna o listă de elemente care pot fi apoi folosite pentru a aplica modificarea.

 procedura TForm2.WebButton1Click(Expeditor: TObject);
 ÎNCEPE
 asm
 var elemente = document.getElementsByClassName('btn');
 pentru (var i = 0; i < elemente.lungime; i++) {
 elements[i].innerHTML = 'Am înțeles ';
 }
 Sfârşit;
 Sfârşit;

Din nou, destul de posibil, dar nu la fel de curat. Codul JavaScript Vanilla este probabil să se execute mai rapid decât echivalentul jQuery, deoarece nu are supraîncărcarea jQuery, dar acest lucru nu este probabil ceva care va conta în marea majoritate a timpului. Cu siguranță nu vom observa acest lucru aici în exemplul nostru, dar dacă ați face acest lucru pe mai multe obiecte cu căutări de clasă mai complexe care se desfășoară tot timpul, începe să se adună și rezultatul ar putea fi o interfață cu utilizatorul lenta. S-ar putea să fie încă lent chiar și fără jQuery, desigur, dar aici încep să fie luate în considerare preocupările cu privire la suprasarcina jQuery.

De asemenea, puteți utiliza o altă funcție JavaScript pentru a face acest lucru, document.querySelectorAll() . Funcționează în același mod, dar este puțin mai rapid și este ceea ce vom folosi în exemplele noastre care urmează. Există și alte diferențe cheie în modul în care funcționează la un nivel inferior, lucruri despre noduri vs. HTMLCollections și rezultate live versus non-live fiind returnate, dar nimic nu contează pentru scopurile noastre aici. Ceea ce este bine de știut este că există adesea multe moduri diferite de a face același lucru și că optimizarea JavaScript este ceva care este examinat foarte atent de legiuni de dezvoltatori. Așadar, dacă aveți nevoie de acel punct suplimentar de performanță, există aproape întotdeauna o groapă nesfârșită de idei disponibile despre cum să o obțineți.

Despre acel exemplu de proiect

În Sample Project v3, care a fost inclus cu ultima postare pe blog, toate acestea sunt folosite în câteva locuri. În primul rând, să le abordăm pe cele ușoare.

Partea principală a interfeței este o grămadă imensă de butoane, fiecare reprezentând o clasă Bootstrap diferită. Când faceți clic pe unul dintre aceste butoane, se adaugă acea clasă la proprietatea ElementClassName a oricărei componente de exemplu pe care o priviți, cum ar fi un TWebButton , de exemplu. Și ori de câte ori acea listă de clase este editată, fie direct, fie prin utilizarea acestor butoane, toate butoanele sunt actualizate pentru a le evidenția pe cele care sunt incluse în listă. Această evidențiere se face prin schimbarea btn-primary (evidențiat) cu btn-secondary (neevidențiat). Pentru aceasta este apelată procedura SelectButtons , care are ca parametri lista de butoane pe care le luăm în considerare și acele butoane care trebuie evidențiate.

 procedura TForm1.SelectButtons(BtnGroup: String; ActiveBtns: String);
 ÎNCEPE
 // Aici dorim să setăm toate btn-urile BtnGroup la btn-secundar
 // cu excepția ActiveBtns Captions care dorim să fie btn-primary
 asm
 ActiveBtns = ' '+ActiveBtns+' ';
 var btns = document.querySelectorAll(BtnGroup);
 pentru (var i = 0; i < btns.length; i++) {
 dacă (ActiveBtns.includes(' '+btns[i].innerText+' ')) {
 btns[i].classList.remove('btn-secundar');
 btns[i].classList.add('btn-primary');
 }
 else {
 btns[i].classList.add('btn-secundar');
 btns[i].classList.remove('btn-primary');
 }
 }
 Sfârşit;
 Sfârşit;

Atât meniul principal din stânga sus, cât și meniul tematic din dreapta sus, folosesc o tactică similară, dar este de așteptat să fie evidențiat un singur buton și acesta este transmis ca valoare ElementID în loc de valoare Caption la procedura SelectButton .

 procedura TForm1.SelectButton(BtnGroup: String; ActiveBtn: String);
 ÎNCEPE
 // Aici dorim să setăm toate btn-urile BtnGroup la btn-secundar
 // cu excepția ID-ului ActiveBtn care dorim să fie btn-primar
 asm
 var btns = document.querySelectorAll(BtnGroup);
 pentru (var i = 0; i < btns.length; i++) {
 if (btns[i].id == ActiveBtn) {
 btns[i].classList.remove('btn-secundar');
 btns[i].classList.add('btn-primary');
 }
 else {
 btns[i].classList.add('btn-secundar');
 btns[i].classList.remove('btn-primary');
 }
 }
 Sfârşit;
 Sfârşit;

Nici SelectButtons() și nici SelectButton() nu folosesc jQuery deoarece nu este necesar și nu ar fi mai rapid. Și ne pasă puțin de performanță aici. În special performanța SelectButtons , deoarece există o mulțime de butoane și acest lucru este numit între apăsarea tastelor atunci când editați proprietatea ElementClassName . Deci vei observa dacă este cu adevărat lent.

Cu BigText, facem ceva similar, în care trebuie să găsim toate elementele cu o anumită clasă și apoi să rulăm o funcție jQuery împotriva lor. Iată cum arată.

 asm
 funcția ApplyBigText() {
 var elems = document.querySelectorAll('.bigtext');
 pentru (var i = 0; i < elems.length; i++) {
 var elem = elems[i];
 dacă (elem.classList.contains('bigtext-min-8' )) { $(elem).bigtext({minfontsize:8 }) }
 else if (elem.classList.contains('bigtext-min-10' )) { $(elem).bigtext({minfontsize:10}) }
 else if (elem.classList.contains('bigtext-min-12' )) { $(elem).bigtext({minfontsize:12}) }
 else if (elem.classList.contains('bigtext-min-14' )) { $(elem).bigtext({minfontsize:14}) }
 else if (elem.classList.contains('bigtext-max-24' )) { $(elem).bigtext({maxfontsize:24}) }
 else if (elem.classList.contains('bigtext-max-36' )) { $(elem).bigtext({maxfontsize:36}) }
 else if (elem.classList.contains('bigtext-max-48' )) { $(elem).bigtext({maxfontsize:48}) }
 else if (elem.classList.contains('bigtext-max-24' )) { $(elem).bigtext({maxfontsize:60}) }
 else { $(elem).bigtext() }
 }
 }
 window.ApplyBigText = ApplyBigText;
 Sfârşit;

În acest caz, BigText este de fapt o funcție jQuery, .bigtext() care este apelată pe fiecare element care are ca clasă bigtext . Parametrii utilizați la apelarea .bigtext() depind de dacă oa doua clasă este inclusă și în clasele acelui element. Această abordare înseamnă că trebuie să facem doar un apel document.querySelectorAll . Utilizarea unei clase suplimentare pentru a restrânge căutarea și pentru a căuta o singură dată nu este neobișnuită. De exemplu, acest lucru se întâmplă cu butoanele din Bootstrap, unde trebuie să specificați atât btn, cât și btn-primary pentru ca acesta să funcționeze corect. În proiectul nostru exemplu, funcția ApplyBigText() este numită pe măsură ce redimensionăm un element. Dacă durează prea mult, netezimea redimensionării va fi afectată. Este deja vizibil doar cu un singur apel, dar nu m-am uitat mai departe pentru a vedea dacă acest lucru se datorează document.querySelectorAll() sau .bigtext() sau Interact.js.

Dificultate++

Ultimul fragment important de cod JavaScript din proiectul exemplu se referă la actualizarea valorilor dimensiunilor legate de elementul redimensionat sau tras. Aici, din nou, folosim aceeași abordare a document.querySelectorAll() pentru a găsi elementele pe care le vom actualiza. Și folosim funcția jQuery .fadeIn() pentru a o face puțin mai plăcută când este făcută vizibilă. Un pic de dificultate în plus vine în încercarea de a o face să dispară din nou și cred că este oarecum reprezentativă în ceea ce privește tipurile de provocări care vin odată cu jQuery. Unde ajungi 98% din drum până acolo, dar ultimele 2% este o durere reală.

 funcția interactInfo(x, y, w, h, dx, dy, dw, dh) {
 //...cod omis pentru concizie
 txt = 'x: '+x+' y: '+y+' w: '+w+' h:'+h+' Δx:'+dx+' Δy:'+dy+' Δw:'+dw+ ' Δh:'+dh;
 elems = document.querySelectorAll('.interact-full'); // (1) mai jos
 pentru (var i = 0; i < elems.length; i++) {
 elem = elems[i];
 if (elem.innerHTML !== txt) {// (2) de mai jos
 elem.innerHTML = txt; // (3) mai jos
 dacă (!$(elem).is(':vizibil')) {$(elem).stop(true,true).fadeIn(400)} // (4) mai jos
 tmr = elem.getAttribute('tmr'); // (5) mai jos
 if (tmr !== null) { clearTimeout(tmr); }
 tmr = setTimeout(function() {$(elem).fadeOut(800); },3000);
 elem.setAttribute('tmr',tmr);
 }
 }
 }
 window.interactInfo = interactInfo;

Deci, ce naiba se întâmplă aici? Experiența utilizatorului pe care o urmăresc este cea pe care o vedeți în imagine. Vreau ca dimensiunile să dispară atunci când elementul este tras sau redimensionat. Și vreau ca aceste informații să se actualizeze continuu în timp ce elementul este tras sau redimensionat. Și odată ce nu mai este târât sau redimensionat pentru câteva secunde, aș dori ca dimensiunile să dispară. Așa că mai întâi voi trece peste ceea ce face. Și apoi voi explica de ce procedează astfel.

1. Mai întâi, obțineți lista de elemente care ar putea fi utilizate pentru a afișa aceste informații. Sincer, probabil că va fi doar un element, dar faceți aceeași căutare indiferent. Într-o aplicație de producție, probabil că aceasta ar face referire doar la acel element și nu ar deranja cu querySelectorAll()
2. Verificați dacă afișează deja aceleași informații. Daca nu s-a schimbat nu ne deranjam deloc cu el, chiar daca nu se vede
3. În caz contrar, setați valoarea care va fi afișată
4. Dacă nu este deja vizibil, estompați-l rapid. Apelul la .stop(true,true) înainte de .fadeIn(400) este efectuat pentru a anula orice .fadeOut() care s-ar putea întâmpla și pentru a trece doar la partea .fadeIn() .
5. Aici, un cronometru este setat pentru 3 secunde, după care elementul va fi estompat puțin mai lent decât a fost estompat în interior. Dacă un cronometru a fost deja setat, acesta este eliminat și altul nou pus în locul lui. Rețineți că acest lucru se întâmplă de fiecare dată când textul este actualizat. Deci un pic de durere, dar face treaba.

Acum s-ar putea să vă gândiți, așa cum m-am gândit și eu, că o încercare inițială la acest efect de fadeIn/fadeOut ar fi mult mai simplă. La (4) s-ar putea face următoarele.

 dacă (!$(elem).is(':vizibil')) {$(elem).fadeIn(400).delay(3000).fadeOut(800);

Și, din punct de vedere tehnic, se pare că ar trebui să funcționeze bine. Dacă doar redimensionați un element o singură dată, acesta ar disparea în dimensiuni timp de trei secunde, apoi s-ar estompa mai lent, așa cum ne-am aștepta. În cazul în care lucrurile merg lateral este atunci când acesta este apelat de mai multe ori sau când tragerea sau redimensionarea durează mai mult de trei secunde. Dacă trageți încet elementul pentru mai mult timp, de exemplu, dimensiunile vor clipi pe măsură ce temporizatorul de întârziere începe. Adăugarea apelului .stop() în implementarea finală a ajutat puțin la fade-in imediat după cele 3 secunde. mark, dar în jQuery, apelarea .stop() nu anulează, din păcate, .delay() , așa că se termină un pic de mizerie. Unul dintre acele mici detalii care provoacă multă durere inutilă.

Soluția este atunci să porniți un temporizator de 3 secunde de îndată ce dimensiunile sunt afișate, folosind un apel JavaScript .setTimeout() în loc de jQuery. Și de fiecare dată când dimensiunile sunt actualizate, acel cronometru este anulat și este pornit un nou cronometru de 3 secunde. Total în afara domeniului de aplicare al jQuery, dar își face treaba. Acesta este și modul în care ați putea face acest lucru dacă doriți să o gestionați în cod Delphi în loc de JavaScript. Configurați un TWebTimer cu un interval de 3 secunde. Apoi dezactivați-l și activați-l ori de câte ori dimensiunile se schimbă și puneți-l să se dezactiveze singur atunci când este declanșat. Deci, în acest caz, utilizarea Delphi pentru a rezolva problema ar fi de fapt mai simplă (din punct de vedere al codării) decât Vanilla JavaScript sau jQuery. Cât de distractiv este?!

Mai mult jQuery

Mai există sute de funcții jQuery care pot fi folosite pentru a face tot felul de lucruri. O mulțime de funcții pentru manipularea elementelor DOM și a conținutului acestora în toate modurile imaginabile. Un set bogat de caracteristici legate de gestionarea evenimentelor JavaScript. Multe mai multe efecte de animație. Și atât de multe moduri de a interoga și de a utiliza selectoare CSS. API-ul este bine documentat și sunt sigur că un procent considerabil din conținutul StackOverflow este direct legat de jQuery. Aș paria, de fapt, că nu există o comunitate de suport mai mare pentru orice instrument de dezvoltare software decât există pentru jQuery.

Exemplu de proiect v4

Exemplu de ecran de încărcare a proiectului v4

Alte modificări în Sample Project V4 includ următoarele.

• Mai multe comentarii pentru aproape tot ce este în cod.
• S-a adăugat BeginUpdate/EndUpdate la crearea elementelor TWebComboBox.Item -> creștere uriașă a performanței.
• S-a adăugat BeginUpdate/EndUpdate și amânarea atribuirii clasei la crearea TWebButtons -> creștere uriașă a performanței.
• S-au eliminat referințele document.getelementByID() – nu sunt necesare când aveți deja ElementHandle … la îndemână.
• Perechile classList.add/remove au fost înlocuite cu classList.replace . Unele dintre acestea sunt noi și pentru mine!
• Ecran de încărcare nou fantastic, cu o referință TMS WEB Core de asemenea
• Numeroase alte mici ajustări și remedieri de erori ici și colo.

Aduceți Comenzile

jQuery completează cele mai mari trei biblioteci JS pe care am vrut să le acopăr în această serie de bloguri. Dar până acum, tot ceea ce am acoperit (în afară de poate bara de progres de mai sus) se încadrează în categoriile Ajutor, Instrumente sau Active . În calitate de dezvoltatori, ceea ce ne interesează cel mai adesea sunt controalele – elementele proiectului nostru cu care utilizatorii interacționează efectiv. Cele mai strălucitoare părți la care ne gândim atunci când dezvoltăm noi proiecte. Deși există încă câțiva Ajutoare și Instrumente mici pe lista de activități, marea majoritate sunt toate Controale . Data viitoare, vom face o încercare solidă la FlatPickr și vom vedea cât de ușor este de utilizat în proiectele noastre TMS WEB Core.

Andrew Simard.