Концепция геттеров и сеттеров в 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, так и установить его высоту, можно сделать это в одной строке кода.
См. Pen 8ff68485673396d452f650bfb437fb2a Криса Койера (@chriscoyier) на CodePen
Также в статье упоминается box-sizing: border-box;. Размер блока - это очень полезное свойство CSS. Я большой сторонник установки его для всех элементов, например:
* ( box-sizing: border-box; )Как отмечено в видео, это также делает height()jQuery более предсказуемым и последовательным. Без набора border-box height()равно свойству height в CSS или любой другой естественной высоте, за вычетом отступов и границы. При border-boxустановке height()это именно то, какую высоту этот элемент занимает на экране, включая отступы и границу. Без border-boxнабора, чтобы получить это, вам нужно использовать outerHeight()в jQuery.