Het concept van getters en setters in JavaScript is slechts een van die dingen die u moet begrijpen. Ze zijn leuk in jQuery omdat de API zo consistent is dat je, als je het eenmaal hebt, vrijwel kunt raden hoe het gaat werken voor verschillende methoden. Op het meest basale niveau ...
Setters doen iets.
Getters geven een waarde terug .
Vaak kan een enkele methode op beide manieren worden gebruikt. Neem bijvoorbeeld de hoogtemethode.
// Used as a "setter" - will set the height $("#example").height(100); // Used as a "getter" - will return a value var theHeight = $("#example").height();Zie het verschil? De setter geeft een parameter door als de methode wordt gebruikt. De getter geeft niets door . Dat is hoe jQuery zelf weet wat te doen. Het test gewoon of er een parameter is of niet. Zo niet, dan gedraagt het zich als een getter. Als het er is, gedraagt het zich als een setter. Het is gewoon een prettig API-gemak, in plaats van afzonderlijke methoden zoals getHeight en setHeight te hebben.
Het is vermeldenswaard dat een getter die op zichzelf wordt gebruikt, niets doet.
// Useless $("#example").height();En als u de waarde van een variabele instelt met een setter, krijgt u het jQuery-object geretourneerd.
// x will be a jQuery object containing #example var x = $("#example").height(100);Dat kan een haar verwarrend zijn, maar ook een handig trucje om code op te slaan. Als je weet dat je dat jQuery-object zowel in de cache moet plaatsen als de hoogte ervan moet instellen, kun je het net zo goed in één regel code doen.
Zie de pen 8ff68485673396d452f650bfb437fb2a door Chris Coyier (@chriscoyier) op CodePen
Ook genoemd in het artikel is box-sizing: border-box;. Het formaat van dozen is een superhandige CSS-eigenschap. Ik ben een groot voorstander van het instellen van alle elementen, zoals:
* ( box-sizing: border-box; )Zoals opgemerkt in de video, maakt dit height()in jQuery ook een beetje meer voorspelbaar en consistent. Zonder border-box set, height()is gelijk aan de eigenschap height in CSS, of welke hoogte het element natuurlijk ook is, minus de opvulling en de rand. Met border-boxset height()is het precies hoeveel hoogte dat element op het scherm inneemt, inclusief opvulling en rand. Zonder border-boxset, om dat te krijgen, moet je outerHeight()in jQuery gebruiken.