Konseptet med getters og setters i JavaScript er bare en av de tingene du bør forstå. De er fine i jQuery fordi API er så konsistent at når du først får det, kan du ganske mye gjette hvordan det kommer til å fungere for forskjellige metoder. På det mest grunnleggende nivået ...
Settere gjør noe.
Getters returnerer en verdi .
Ofte kan en enkelt metode brukes på begge måter. Ta høydemetoden for eksempel.
// Used as a "setter" - will set the height $("#example").height(100); // Used as a "getter" - will return a value var theHeight = $("#example").height();Se forskjellen? Setteren sender en parameter når metoden brukes. Getter passerer ingenting . Slik vet jQuery selv hva de skal gjøre. Det tester bare om det er en parameter der eller ikke. Hvis ikke, oppfører den seg som en getter. Hvis den er der, oppfører den seg som en setter. Det er bare en fin API-bekvemmelighet, i stedet for å ha separate metoder som getHeight og setHeight.
Det er verdt å merke seg at en getter som brukes av seg selv ikke gjør noe.
// Useless $("#example").height();Og hvis du setter verdien til en variabel ved hjelp av en setter, får du jQuery-objektet returnert.
// x will be a jQuery object containing #example var x = $("#example").height(100);Det kan være et hår forvirrende, men også et fiffig lite triks for å lagre kode. Hvis du vet at du både må cache det jQuery-objektet og angi høyde, kan du like godt gjøre det i en kodelinje.
Se pennen 8ff68485673396d452f650bfb437fb2a av Chris Coyier (@chriscoyier) på CodePen
Også nevnt i artikkelen er box-sizing: border-box;. Box dimensjonering er en veldig nyttig CSS-egenskap. Jeg er en stor forkjemper for å sette det på alle elementer, som:
* ( box-sizing: border-box; )Som nevnt i videoen, gjør dette også height()jQuery litt mer forutsigbart og konsistent. Uten rammesett height()er lik høydeegenskapen i CSS, eller hvilken høyde elementet naturlig er, minus polstring og kant. Med border-boxsett er det height()nøyaktig hvor mye høyde elementet tar opp på skjermen, inkludert polstring og kantlinje. Uten border-boxsett, for å få det, må du bruke outerHeight()i jQuery.