JavaScriptiä käsittelevät getters ja setters ovat vain yksi niistä asioista, jotka sinun pitäisi ymmärtää. Ne ovat mukavia jQueryssä, koska sovellusliittymä on niin johdonmukainen, että kun saat sen, voit melkein vain arvata, miten se toimii erilaisilla menetelmillä. Perustasolla…
Setters tekevät jotain.
Getters palauttaa arvon .
Usein yhtä menetelmää voidaan käyttää kumpaankin suuntaan. Ota esimerkiksi korkeusmenetelmä.
// Used as a "setter" - will set the height $("#example").height(100); // Used as a "getter" - will return a value var theHeight = $("#example").height();Näetkö eron? Asettaja välittää parametrin, kun menetelmää käytetään. Getter ei läpäise mitään . Näin jQuery itse tietää mitä tehdä. Se vain testaa, onko parametria siellä vai ei. Jos ei, se käyttäytyy kuin getter. Jos se on siellä, se käyttäytyy kuin asettaja. Se on vain mukava API-käyttömukavuus sen sijaan, että sillä olisi erillisiä menetelmiä, kuten getHeight ja setHeight.
On syytä huomata, että itsessään käytetty getter ei tee mitään.
// Useless $("#example").height();Ja jos asetat muuttujan arvon setterin avulla, jQuery-objekti palautetaan.
// x will be a jQuery object containing #example var x = $("#example").height(100);Se voi olla hämmentävä, mutta myös hieno pieni temppu koodin tallentamiseen. Jos tiedät, että sinun täytyy sekä tallentaa välimuisti että jQuery-objekti että asettaa sen korkeus, voi yhtä hyvin tehdä sen yhdellä koodirivillä.
Katso Chris Coyierin (@chriscoyier) kynä 8ff68485673396d452f650bfb437fb2a CodePeniltä
Mainittu myös artikkelissa on box-sizing: border-box;. Laatikon mitoitus on erittäin hyödyllinen CSS-ominaisuus. Olen suuri kannattaja asettaa se kaikille elementeille, kuten:
* ( box-sizing: border-box; )Kuten videossa todettiin, tämä tekee height()jQuerystä myös hieman ennakoitavamman ja johdonmukaisemman. Ilman reunaruutujoukkoa height()on yhtä suuri kuin CSS: n korkeusominaisuus tai mikä tahansa elementin korkeus luonnollisesti on, miinus täyte ja reunus. Kanssa border-boxasettaa, height()on kuinka paljon korkeus, joka elementti vie näytölle, mukaan lukien pehmusteet ja raja. Ilman border-boxasetusta sinun täytyy käyttää outerHeight()sitä jQueryssä.