Поняття геттерів та сетерів у JavaScript - це лише одне з тих речей, які ви повинні розуміти. Вони приємні в jQuery, оскільки API настільки послідовний, що, отримавши його, ви можете майже вгадати, як це буде працювати для різних методів. На найпростішому рівні ...
Сетери щось роблять .
Геттери повертають значення .
Часто один метод може бути використаний у будь-який спосіб. Візьмемо для прикладу метод висоти.
// Used as a "setter" - will set the height $("#example").height(100); // Used as a "getter" - will return a value var theHeight = $("#example").height();Бачите різницю? Установник передає параметр, коли використовується метод. Геттер нічого не передає . Ось як jQuery сам знає, що робити. Він просто перевіряє, є там параметр чи ні. Якщо ні, то він поводиться як здобувач. Якщо він є там, він поводиться як сетер. Це просто приємна зручність API, а не наявність окремих методів, таких як getHeight та setHeight.
Варто зазначити, що використовуваний сам геттер нічого не робить.
// Useless $("#example").height();І якщо ви встановите значення змінної за допомогою сеттера, ви отримаєте повернутий об'єкт jQuery.
// x will be a jQuery object containing #example var x = $("#example").height(100);Це може заплутати волосся, але також чудова маленька хитрість для збереження коду. Якщо ви знаєте, що вам потрібно як кешувати цей об’єкт jQuery, так і встановити його висоту, ви можете зробити це в одному рядку коду.
Дивіться Перо 8ff68485673396d452f650bfb437fb2a Кріса Койєра (@chriscoyier) на CodePen
Також в статті згадується box-sizing: border-box;. Розмір коробки - надзвичайно корисна властивість CSS. Я є великим прихильником встановлення його на всіх елементах, таких як:
* ( box-sizing: border-box; )Як зазначено у відео, це також робить height()jQuery трохи більш передбачуваним та послідовним. Без набору рамки-межі height()дорівнює властивості висоти в CSS або будь-якій висоті елемента, природно, мінус відступ та рамка. Якщо border-boxвстановити set, height()це саме стільки висоти, яку цей елемент займає на екрані, включаючи відступ та облямівку. Без border-boxнабору, щоб отримати це, вам потрібно використовувати outerHeight()в jQuery.