# 09: Getters ja setters - CSS-trikid

Anonim

JavaScripti kontseptsioon getters ja setters on vaid üks neist asjadest, mida peaksite mõistma. Nad on jQuery's toredad, kuna API on nii järjepidev, et kui selle kätte saate, võite üsna lihtsalt arvata, kuidas see erinevate meetodite puhul töötab. Kõige põhilisemal tasemel ...

Setterid teevad midagi.
Getters tagastab väärtuse .

Sageli saab ühte meetodit kasutada mõlemal viisil. Võtame näiteks kõrguse meetodi.

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

Kas näete erinevust? Setter edastab parameetri, kui meetodit kasutatakse. Getter ei möödu midagi . Nii teab jQuery ise, mida teha. See lihtsalt testib, kas seal on parameeter või mitte. Kui ei, siis käitub see nagu getter. Kui see seal on, siis käitub ta setterina. See on lihtsalt kena API mugavus, selle asemel et kasutada eraldi meetodeid nagu getHeight ja setHeight.

Väärib märkimist, et iseenesest kasutatav getter ei tee midagi.

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

Ja kui määrate muutuja väärtuse setteri abil, tagastatakse objekt jQuery.

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

See võib olla juuksekarva segane, aga ka suurepärane nipp koodi salvestamiseks. Kui teate, et peate nii jQuery objekti vahemällu salvestama kui ka selle kõrguse määrama, võiksite seda teha ka ühes koodireas.

Vaadake Code Cenilt Chris Coyieri (@chriscoyier) pliiatsi 8ff68485673396d452f650bfb437fb2a

Artiklis on mainitud ka box-sizing: border-box;. Kasti suurus on ülikasulik CSS-i vara. Olen suur pooldaja selle kõigile elementidele seadmisel, näiteks:

* ( box-sizing: border-box; )

Nagu videos märgitud, muudab see ka height()jQuery's natuke prognoositavamaks ja järjepidevamaks. Ilma piirikarbikomplektita height()võrdub CSS-i atribuudi kõrgus või mis tahes elementi kõrgusega loomulikult, miinus polster ja piir. Mis border-boxmääratud, height()on täpselt, kui palju kõrgust, et element kulub ekraanil polstrit ja piiri. Ilma border-boxkomplektita peate selle saamiseks kasutama outerHeight()jQuery.