Koncept getterů a setterů v JavaScriptu je jen jednou z věcí, kterým byste měli rozumět. Jsou hezké v jQuery, protože API je tak konzistentní, že jakmile to získáte, můžete docela dobře odhadnout, jak to bude fungovat pro různé metody. Na nejzákladnější úrovni…
Setři něco dělají .
Getters vrátí hodnotu .
Jedna metoda může být často použita oběma způsoby. Vezměme si například metodu 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íte ten rozdíl? Vypalovací předá parametr , pokud je použita metoda. Getter nic neprochází . Tak ví samotný jQuery, co má dělat. Pouze testuje, zda tam je parametr nebo ne. Pokud ne, chová se jako kariérista. Pokud tam je, chová se jako setr. Je to jen příjemné pohodlí API, spíše než mít samostatné metody jako getHeight a setHeight.
Stojí za zmínku, že getr použitý sám o sobě nedělá nic.
// Useless $("#example").height();A pokud nastavíte hodnotu proměnné pomocí setteru, dostanete objekt jQuery vrácen.
// x will be a jQuery object containing #example var x = $("#example").height(100);To může být vlasy matoucí, ale také šikovný malý trik pro uložení kódu. Pokud víte, že musíte objekt jQuery uložit do mezipaměti a nastavit jeho výšku, můžete to udělat také v jednom řádku kódu.
Podívejte se na pero 8ff68485673396d452f650bfb437fb2a od Chris Coyier (@chriscoyier) na CodePen
V článku je také uvedeno box-sizing: border-box;. Velikost krabice je velmi užitečná vlastnost CSS. Jsem velkým zastáncem nastavení všech prvků, například:
* ( box-sizing: border-box; )Jak je uvedeno ve videu, také to dělá height()v jQuery trochu předvídatelnější a konzistentnější. Bez sady rámečku height()je rovna vlastnosti výšky v CSS nebo jakékoli výšce, kterou prvek přirozeně je, bez polstrování a ohraničení. Se border-boxsadou height()je přesně to, jakou výšku tento prvek zabírá na obrazovce, včetně polstrování a ohraničení. Bez border-boxsady, abyste to získali, musíte použít outerHeight()v jQuery.