A getterek és beállítók JavaScriptben való fogalma csak egy azok közül, amelyeket meg kell értenie. Nagyon jók a jQuery-ben, mert az API annyira következetes, hogy ha megszerzi, nagyjából csak kitalálhatja, hogyan fog működni a különféle módszereknél. A legalapvetőbb szinten…
A telepesek csinálnak valamit.
A Getters értéket ad vissza .
Gyakran egyetlen módszer használható mindkét irányban. Vegyük például a magasság módszerét.
// Used as a "setter" - will set the height $("#example").height(100); // Used as a "getter" - will return a value var theHeight = $("#example").height();Lásd a különbséget? A szetter átad egy paramétert a módszer használatakor. A getter semmit sem múlik . Így tudja maga a jQuery is, mit kell tennie. Csak azt teszteli, van-e ott paraméter vagy sem. Ha nem, úgy viselkedik, mint egy getter. Ha ott van, úgy viselkedik, mint egy szetter. Ez csupán egy jó API-kényelem, ahelyett, hogy különálló metódusai lennének, mint a getHeight és a setHeight.
Érdemes megjegyezni, hogy egy önmagában használt getter nem tesz semmit.
// Useless $("#example").height();És ha egy változó értékét egy szetter segítségével állítja be, akkor a jQuery objektumot visszaküldi.
// x will be a jQuery object containing #example var x = $("#example").height(100);Ez lehet egy hajzavaró, de remek apró trükk a kód mentésére. Ha tudja, hogy mind a jQuery objektumot gyorsítótárba kell állítania, mind pedig annak magasságát be kell állítania, akkor egy kódsorban is megteheti.
Lásd a Pen 8ff68485673396d452f650bfb437fb2a cikket, Chris Coyier (@chriscoyier) a CodePen-en
A cikkben is megemlítik box-sizing: border-box;. A doboz méretezése rendkívül hasznos CSS tulajdonság. Nagy támogatója vagyok annak, hogy minden elemre beállítsam, például:
* ( box-sizing: border-box; )Amint azt a videó megjegyezte, ez height()a jQuery-ben is egy kicsit kiszámíthatóbb és következetesebbé teszi. Border-box set nélkül height()megegyezik a CSS magasságtulajdonságával, vagy bármilyen magassággal rendelkezik az elem természetesen, levonva a párnázást és a szegélyt. A border-boxkészlet az height()pontosan, hogy mennyi magassága elem veszi fel a képernyőn, beleértve a padding és a határok. border-boxBeállítás nélkül outerHeight()a jQuery használatához .