Koncept vyhľadávačov a nastavovačov v JavaScripte je len jednou z vecí, ktorým by ste mali rozumieť. Sú pekné v jQuery, pretože API je také konzistentné, že akonáhle ho získate, môžete hádať, ako to bude fungovať pri rôznych metódach. Na najzákladnejšej úrovni ...
Stavači niečo robia .
Získávatelia vrátia hodnotu .
Jedna metóda môže byť často použitá jedným alebo druhým spôsobom. Vezmime si napríklad metódu výšky.
// Used as a "setter" - will set the height $("#example").height(100); // Used as a "getter" - will return a value var theHeight = $("#example").height();Vidíš ten rozdiel? Nastavovač odovzdá parameter, keď sa použije metóda. Getter nič neprejde . Takto vie samotný jQuery, čo má robiť. Iba testuje, či tam parameter je alebo nie. Ak nie, správa sa ako getter. Ak tam je, správa sa ako stavač. Je to iba príjemné pohodlie rozhrania API, a nie samostatné metódy ako getHeight a setHeight.
Stojí za zmienku, že samotný getter, ktorý sám používa, nič nerobí.
// Useless $("#example").height();A ak nastavíte hodnotu premennej pomocou nastavovacieho nástroja, dostanete späť objekt jQuery.
// x will be a jQuery object containing #example var x = $("#example").height(100);To môže byť vlasy mätúce, ale tiež šikovný malý trik na uloženie kódu. Ak viete, že musíte objekt jQuery uložiť do medzipamäte a nastaviť jeho výšku, môžete to urobiť v jednom riadku kódu.
Pozrite si pero 8ff68485673396d452f650bfb437fb2a od Chrisa Coyiera (@chriscoyier) na CodePen
V článku je tiež uvedené box-sizing: border-box;. Box sizing je veľmi užitočná vlastnosť CSS. Som veľkým zástancom nastavovania všetkých prvkov, napríklad:
* ( box-sizing: border-box; )Ako je uvedené vo videu, vďaka tomu je program height()jQuery tiež o niečo predvídateľnejší a konzistentnejší. Bez sady border-box height()sa rovná vlastnosti height v CSS alebo akejkoľvek výške, ktorou element prirodzene je, mínus polstrovanie a orámovanie. So border-boxsadou height()je to, koľko presne tento prvok zaberá na obrazovke, vrátane polstrovania a orámovania. Bez border-boxsady, aby ste to dosiahli, musíte použiť outerHeight()v jQuery.