#09: Getters und Setters

Das Konzept von Getters und Setters in JavaScript ist nur eines dieser Dinge, die man verstehen sollte. Sie sind in jQuery nett, weil die API so konsistent ist, dass man, sobald man sie verstanden hat, so ziemlich erraten kann, wie sie für verschiedene Methoden funktionieren wird. Auf der grundlegendsten Ebene…

Setters **tun** etwas.
Getters geben einen **Wert** zurück.

Oft kann eine einzelne Methode auf beide Arten verwendet werden. Nehmen wir zum Beispiel die height-Methode.

// Used as a "setter" - will set the height
$("#example").height(100);

// Used as a "getter" - will return a value
var theHeight = $("#example").height();

Sehen Sie den Unterschied? Der Setter **übergibt einen Parameter**, wenn die Methode verwendet wird. Der Getter **übergibt nichts**. So weiß jQuery selbst, was zu tun ist. Es prüft einfach, ob ein Parameter vorhanden ist oder nicht. Wenn nicht, verhält es sich wie ein Getter. Wenn er vorhanden ist, verhält es sich wie ein Setter. Es ist lediglich ein netter API-Komfort, anstatt separate Methoden wie getHeight und setHeight zu haben.

Es ist erwähnenswert, dass ein einzelner Getter nichts tut.

// Useless
$("#example").height();

Und wenn Sie den Wert einer Variablen mit einem Setter setzen, erhalten Sie das jQuery-Objekt zurück.

// x will be a jQuery object containing #example
var x  = $("#example").height(100);

Das kann etwas verwirrend sein, aber auch ein raffinierter kleiner Trick zum Sparen von Code. Wenn Sie wissen, dass Sie sowohl dieses jQuery-Objekt cachen als auch seine Höhe einstellen müssen, können Sie es auch in einer einzigen Codezeile erledigen.

Siehe den Pen 8ff68485673396d452f650bfb437fb2a von Chris Coyier (@chriscoyier) auf CodePen

Im Artikel wird auch box-sizing: border-box; erwähnt. Box sizing ist eine super nützliche CSS-Eigenschaft. Ich bin ein großer Verfechter davon, sie auf allen Elementen zu setzen, wie z.B.

* {
  box-sizing: border-box;
}

Wie im Video erwähnt, macht dies auch die height()-Methode in jQuery etwas vorhersehbarer und konsistenter. Ohne gesetztes border-box entspricht height() der height-Eigenschaft in CSS oder der natürlichen Höhe des Elements, abzüglich des Innenabstands und des Rahmens. Mit gesetztem border-box entspricht die height() genau der Höhe, die das Element auf dem Bildschirm einnimmt, einschließlich Innenabstand und Rahmen. Ohne gesetztes border-box benötigen Sie outerHeight() in jQuery, um dies zu erreichen.