Das Konzept der Getter und Setter in JavaScript ist nur eines der Dinge, die Sie verstehen sollten. Sie sind in jQuery nett, weil die API so konsistent ist, dass Sie, sobald Sie sie erhalten haben, so ziemlich nur erraten können, wie sie für verschiedene Methoden funktionieren wird. Auf der einfachsten Ebene…
Setter machen etwas.
Getter geben einen Wert zurück .
Oft kann eine einzelne Methode so oder so verwendet werden. Nehmen Sie zum Beispiel die Höhenmethode.
// Used as a "setter" - will set the height $("#example").height(100); // Used as a "getter" - will return a value var theHeight = $("#example").height();Sieh den Unterschied? Der Setter übergibt einen Parameter, wenn die Methode verwendet wird. Der Getter geht nichts vorbei . So weiß jQuery selbst, was zu tun ist. Es wird nur getestet, ob dort ein Parameter vorhanden ist oder nicht. Wenn nicht, verhält es sich wie ein Getter. Wenn es da ist, verhält es sich wie ein Setter. Es ist lediglich eine nette API-Annehmlichkeit, anstatt separate Methoden wie getHeight und setHeight zu haben.
Es ist erwähnenswert, dass ein Getter, der alleine verwendet wird, nichts tut.
// Useless $("#example").height();Wenn Sie den Wert einer Variablen mit einem Setter festlegen, wird das jQuery-Objekt zurückgegeben.
// x will be a jQuery object containing #example var x = $("#example").height(100);Das kann ein Haar verwirrend sein, aber auch ein kleiner Trick zum Speichern von Code. Wenn Sie wissen, dass Sie das jQuery-Objekt zwischenspeichern und seine Höhe festlegen müssen, können Sie dies auch in einer Codezeile tun.
Siehe den Stift 8ff68485673396d452f650bfb437fb2a von Chris Coyier (@chriscoyier) auf CodePen
Ebenfalls im Artikel erwähnt ist box-sizing: border-box;. Die Boxgröße ist eine sehr nützliche CSS-Eigenschaft. Ich bin ein großer Befürworter der Einstellung auf alle Elemente, wie:
* ( box-sizing: border-box; )Wie im Video erwähnt, ist dies height()in jQuery auch etwas vorhersehbarer und konsistenter. Ist ohne Rahmen-Box-Set height()gleich der height-Eigenschaft in CSS oder der Höhe, die das Element natürlich hat, abzüglich der Auffüllung und des Rahmens. Mit border-boxset height()ist dies genau die Höhe, die das Element auf dem Bildschirm einnimmt, einschließlich Polsterung und Rand. Ohne border-boxset müssen Sie outerHeight()in jQuery verwenden, um dies zu erreichen.