Begrebet getters og setters i JavaScript er bare en af de ting, du skal forstå. De er pæne i jQuery, fordi API'en er så ensartet, at når du først får det, kan du stort set bare gætte, hvordan det skal fungere efter forskellige metoder. På det mest basale niveau ...
Settere gør noget.
Getters returnerer en værdi .
Ofte kan en enkelt metode bruges på begge måder. Tag højdemetoden 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();Ser du forskellen? Setter passerer en parameter, når metoden bruges. Getteren passerer intet . Sådan ved jQuery selv, hvad de skal gøre. Det tester bare, om der er en parameter der eller ej. Hvis ikke, opfører det sig som en getter. Hvis det er der, opfører det sig som en setter. Det er blot en god API-bekvemmelighed snarere end at have separate metoder som getHeight og setHeight.
Det er værd at bemærke, at en getter, der bruges af sig selv, ikke gør noget.
// Useless $("#example").height();Og hvis du indstiller værdien af en variabel ved hjælp af en setter, får du jQuery-objektet returneret.
// x will be a jQuery object containing #example var x = $("#example").height(100);Det kan være et hår forvirrende, men også et smukt lille trick til at gemme kode. Hvis du ved, at du både skal cache det jQuery-objekt og indstille dets højde, kan det lige så godt gøre det i en kodelinje.
Se pennen 8ff68485673396d452f650bfb437fb2a af Chris Coyier (@chriscoyier) på CodePen
Også nævnt i artiklen er box-sizing: border-box;. Box dimensionering er en super nyttig CSS egenskab. Jeg er en stor fortaler for at indstille det på alle elementer, som:
* ( box-sizing: border-box; )Som bemærket i videoen gør dette også height()jQuery lidt mere forudsigeligt og konsistent. Uden rammesæt height()er lig med højdeegenskaben i CSS eller hvilken højde elementet naturligvis er, minus polstring og kant. Med border-boxsæt er det height()nøjagtigt, hvor meget højde elementet optager på skærmen, inklusive polstring og kant. Uden border-boxsæt skal du bruge det outerHeight()i jQuery for at få det.