Conceptul de geters și seters în JavaScript este doar unul dintre acele lucruri pe care ar trebui să le înțelegeți. Acestea sunt drăguțe în jQuery, deoarece API-ul este atât de consistent încât, odată ce îl obțineți, puteți ghici cam cum va funcționa pentru diferite metode. La cel mai de bază nivel ...
Setarii fac ceva.
Getters returnează o valoare .
Adesea, o singură metodă poate fi utilizată în ambele sensuri. Luați de exemplu metoda înălțimii.
// Used as a "setter" - will set the height $("#example").height(100); // Used as a "getter" - will return a value var theHeight = $("#example").height();Vezi diferenta? Setatorul trece un parametru atunci când metoda este utilizată. Getterul nu trece nimic . Așa știe jQuery în sine ce să facă. Testează doar dacă există sau nu un parametru acolo. Dacă nu, se comportă ca un getter. Dacă este acolo, se comportă ca un setter. Este doar o comoditate API plăcută, mai degrabă decât să ai metode separate, cum ar fi getHeight și setHeight.
Merită remarcat faptul că un getter folosit de el însuși nu face nimic.
// Useless $("#example").height();Și dacă setați valoarea unei variabile utilizând un setter, veți primi obiectul jQuery returnat.
// x will be a jQuery object containing #example var x = $("#example").height(100);Poate fi confuz, dar și un mic truc șmecher pentru a salva codul. Dacă știți că aveți nevoie să memorați în cache acel obiect jQuery și să setați înălțimea acestuia, ar putea să o faceți într-o singură linie de cod.
Vedeți stiloul 8ff68485673396d452f650bfb437fb2a de Chris Coyier (@chriscoyier) pe CodePen
De asemenea, menționat în articol este box-sizing: border-box;. Dimensiunea cutiei este o proprietate CSS super utilă. Sunt un mare susținător al setării pe toate elementele, cum ar fi:
* ( box-sizing: border-box; )După cum sa menționat în videoclip, acest lucru face, de asemenea, height()în jQuery un pic mai previzibil și mai consistent. Fără setul de casetă de margine, height()este egal cu proprietatea de înălțime în CSS sau orice înălțime este în mod natural elementul, minus căptușeala și chenarul. Cu border-boxset, height()este exact câtă înălțime ocupă acel element pe ecran, inclusiv căptușeala și chenarul. Fără border-boxset, pentru a obține acest lucru, trebuie să utilizați outerHeight()în jQuery.