Pojęcia getters i setters w JavaScript to tylko jedna z tych rzeczy, które powinieneś zrozumieć. Są fajne w jQuery, ponieważ API jest tak spójne, że kiedy już je zdobędziesz, możesz po prostu zgadywać, jak będzie działać dla różnych metod. Na najbardziej podstawowym poziomie…
Setery coś robią .
Metody pobierające zwracają wartość .
Często w obie strony można zastosować jedną metodę. Weźmy na przykład metodę wysokości.
// Used as a "setter" - will set the height $("#example").height(100); // Used as a "getter" - will return a value var theHeight = $("#example").height();Zobacz różnicę? Metoda ustawiająca przekazuje parametr, gdy używana jest metoda. Getter nic nie przekazuje . W ten sposób samo jQuery wie, co robić. Po prostu sprawdza, czy istnieje parametr, czy nie. Jeśli nie, zachowuje się jak getter. Jeśli tam jest, zachowuje się jak seter. Jest to po prostu przyjemna wygoda interfejsu API, zamiast oddzielnych metod, takich jak getHeight i setHeight.
Warto zauważyć, że sam getter nie robi nic.
// Useless $("#example").height();A jeśli ustawisz wartość zmiennej za pomocą metody ustawiającej, otrzymasz zwrócony obiekt jQuery.
// x will be a jQuery object containing #example var x = $("#example").height(100);Może to być mylące, ale także sprytna mała sztuczka do zapisywania kodu. Jeśli wiesz, że musisz zarówno buforować ten obiekt jQuery, jak i ustawić jego wysokość, równie dobrze możesz to zrobić w jednej linii kodu.
Zobacz pióro 8ff68485673396d452f650bfb437fb2a autorstwa Chrisa Coyiera (@chriscoyier) na CodePen
W artykule wspomniano również o box-sizing: border-box;. Rozmiar pudełka to bardzo przydatna właściwość CSS. Jestem wielkim zwolennikiem ustawiania go na wszystkich elementach, takich jak:
* ( box-sizing: border-box; )Jak zauważono na filmie, dzięki temu height()jQuery jest nieco bardziej przewidywalny i spójny. Bez ustawienia border-box height()jest równe właściwości height w CSS lub dowolnej naturalnej wysokości elementu, pomniejszonej o dopełnienie i obramowanie. W przypadku border-boxset określa height()dokładnie, jaką wysokość zajmuje ten element na ekranie, łącznie z wypełnieniem i obramowaniem. Bez border-boxzestawu, aby to uzyskać, musisz użyć outerHeight()w jQuery.