-
Какие бывают значения
display
? Расскажите как ведёт себя каждое свойство.Свойство, которое определяет, как элемент должен быть показан в документе.
-
block Элемент показывается как блочный. Применение этого значения для строчных элементов, например
<span>
, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого. -
inline Элемент отображается как строчный. Использование блочных элементов, таких как
<div>
и<p>
, автоматически создаёт перенос и показывает их содержимое с новой строки. Значениеinline
отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент. -
inline-block Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде
). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный.
-
inline-table Определяет, что элемент является таблицей как при использовании
<table>
, но при этом таблица является строчным элементом и происходит её обтекание другими элементами, например, текстом. -
inline-flex Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.
-
flex Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели.
-
list-item Элемент выводится как блочный и добавляется маркер списка.
-
none Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было.
-
table Определяет, что элемент является блочной таблицей подобно использованию
<table>
. -
table-caption Задаёт заголовок таблицы подобно применению тэга
<caption>
. -
table-cell Указывает, что элемент представляет собой ячейку таблицы (
<td>
или<th>
). -
table-column Назначает элемент колонкой таблицы, словно был добавлен
<col>
. -
table-column-group Определяет, что элемент является группой одной или более колонок таблицы, как при использовании
<colgroup>
. -
table-footer-group Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой
<tfoot>
. -
table-header-group Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой
<thead>
. -
table-row Элемент отображается как строка таблицы (
<tr>
). -
table-row-group Создаёт структурный блок, состоящий из нескольких строк таблицы аналогично действию
<tbody>
.
-
-
Что вы знаете о весе селекторов? Каковы значения веса?
Все CSS-селекторы имеют свой вес, который определяет как взаимодействуют одинаковые свойства, заданные в разных местах кода одному и тому же элементу.
style 1, 0, 0, 0; id 0, 1, 0, 0; class 0, 0, 1, 0; attr 0, 0, 1, 0; tag 0, 0, 0, 1; * 0, 0, 0, 0;
-
Какие бывают значения у свойства
position
? Расскажите как ведёт себя каждое свойство.Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
-
absolute Абсолютное позиционирование. Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задаётся свойствами
left
,top
,right
иbottom
, также на положение влияет значение свойстваposition
родительского элемента. Так, если у родителя значениеposition
установлено какstatic
или родителя нет, то отсчёт координат ведётся от края окна браузера. Если у родителя значениеposition
задано какrelative
, то отсчёт координат ведётся от края родительского элемента. -
fixed Фиксированное позиционирование. По своему действию это значение близко к
absolute
, но в отличие от него привязывается к указанной свойствамиleft
,top
,right
иbottom
точке на экране и не меняет своего положения при прокрутке веб-страницы. -
relative Относительное позиционирование. Положение элемента устанавливается относительно его исходного места. Добавление свойств
left
,top
,right
иbottom
изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. -
static Статичное позиционирование. Элементы отображаются как обычно. Использование свойств
left
,top
,right
иbottom
не приводит к каким-либо результатам. -
stiky Это сочетание относительного и фиксированного позиционирования. Элемент рассматривается как позиционированный относительно, пока он не пересекает определённый порог, после чего рассматривается как фиксированный. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице.
-
-
Что будет если задать элементу с
position:relative
свойствоtop:10px
left: 10px
? Что будет если тоже самое задать элементу сposition: static
?Если элементу с
position: relative
задать свойстваtop: 10px
иleft: 10px
, то элемент сместится на 10px вниз и на 10px вправо. Со свойствомposition: static
top
иleft
не сработают, элемент останется на месте.
-
Что такое float?
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства
float
равноnone
, элемент выводится на странице как обычно.Свойство
float
имеет следующие значения:left
- прижимает элемент к левому краю, другие элементы обтекают его справа;right
- прижимает элементы к правому краю, другие элементы обтекают его слева;none
- отключает режим обтекания и возвращает элементу нормальное поведение.
-
Что такое
clearfix
? Из чего он состоит и для чего он?Это класс, который добавляется элементу внутри которого имеются флоатные колонки, предназначен он для того, чтобы
float
- элементы не выпадали из родительского. Состоитclearfix::after
из свойств:content: ''
,display: table
иclear: both
.
-
Как верстать html письма?
Для вёрстки писем используется табличная вёрстка.
inline
- стили; Некоторые почтовые клиенты вырезают<style>
из секцииhead
Нельзя использовать сокращения вcss-свойтсвах
Фон указывать для<table>
или для<td>
через атрибутbgcolor=""
иbackground=""
Плохо поддерживаются@media
-выражения, адаптивность реализовывать через инлайн блоки Использовать условные комментариии для Outlook
-
Из чего строится размер элемента?
Размер элемента строится из его ширины и высоты содержания, а ткаже внутренних и внешних отступов, ширниы рамок.
-
Что такое border-box?
Свойство
border-box
позволяет изменить алгоритм расчёта ширины элемента, чтобы свойствоwidth
задавало не ширину содержимого, а ширину элемента.У него есть два свойства:
- content-box значение по умолчанию, соответствует стандартной блочной модели.
- border-box
свойства
width
иheight
включают в себя значения внутренних отступов и рамок, но не внешних отступов.
-
Расскажите о различия
padding
иmargin
?padding
задает внутренние отступы элемента — отступы от внешней границы элемента до его содержания. Эти отступы еще иногда называют полями.margin
- задает внешние отступы элемента — отступы от внешней границы элемента до границ родительского элемента или до соседних элементов.
-
Как ведут себя
margin
у двух элементов по соседству?Вертикальный отступ между двумя соседними элементами равен максимальному отступу между ними. Если отступ одного элемента равен
20px
, а второго40px
, то отступ между ними будет40px
.Горизонтальные отступы между элементами просто складываются. Например, горизонтальный отступ между двумя элементами с отступами
30px
будет равен60px
.
-
Какие теги по умолчанию являются блочными, а какие строчными? Можно ли изменить их поведение и как?
К блочным элементам относятся такие теги как:
<p>
,<h1>
,<h2>
,<ul>
<div>
и так далее.Блочные элементы можно представлять как прямоугольные области на странице. Они имеют следующие особенности:
- До и после блочного элемента существует перенос строки.
- Блочным элементам можно задавать ширину, высоту, внутренние и внешние отступы.
- Занимают всё доступное пространство по горизонтали.
К строчным элементам относятся такие теги как:
<a>
,<strong>
,<em>
,<span>
и так далее.Особенности строчных элементов:
- До и после строчного элемента отсутствуют переносы строки.
- Ширина и высота строчного элемента зависит только от его содержания, задать размеры с помощью CSS нельзя.
- Можно задавать только горизонтальные отступы.
Строчные элементы предназначены для оформления текста на уровне небольших фраз и отдельных слов. Блочные же элементы предназначены для разметки крупных блоков текста (заголовки, абзацы, списки) и создания сетки.
-
Есть ли у тегов предопределённые стили?
Есть. К некоторым тегам таким как
<p>
,ul > li
,<a>
браузеры добавляют отступы, цвет, нижнее подчёркивание, маркер списка.
-
Как повлиять на вертикальное выравнивание строчного элемента?
Выравниванием текста по вертикали можно управлять с помощью свойства
vertical-align
. Его действие хорошо заметно в ячейках таблицы. Внутри текстовой строки «работа» этого свойства заметна, если в ней есть фрагменты разного размера.У данного свойства много значений, но самые часто используемые:
top
— выравнивание по верхнему краю строки;middle
— по середине;bottom
— по нижнему краю;baseline
— по базовой линии (значение по умолчанию);sub
- опускает базовую линию блока вниз для создания нижнего индекса. Не оказывает влияние на размер текста;super
- поднимает базовую линию блока вверх для создания верхнего индекса. Не оказывает влияние на размер текста;text-bottom
- нижняя граница элемента выравнивается по нижнему краю содержимого родителя;text-top
- верхняя граница элемента выравнивается по верхнему краю содержимого родителя.В качестве значения также можно использовать проценты, пиксели или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчёт ведётся от значения свойства
line-height
, при этом 0% аналогично значениюbaseline
.
-
Как браузер “читает” css?
Делает он это сверху вниз проходясь по каждой строчке, а селекторы CSS справа налево. Браузеру эффективней начинать читать с крайнего правого элемента и затем подниматься вверх по DOM-дереву.
-
Какие свойства браузеру отрисовать тяжелее всего?
Свойства, которые вызывают перерисовку страницы и перерасчёт. csstriggers
-
При изменении каких свойств браузер затратит больше всего ресурсов и почему?
margin position width height а так же свойства, которые будут влиять на layout и paint
-
Какие вы знаете псевдоэлементы и псевдоклассы? Где их используют?
Псевдоэлементы:
::before
::after
::first-letter
::first-line
Используется генерируемый контент для декорации и незначительного текста, но убедитесь, что он правильно обрабатывается скрин-ридерами, чтобы использующие эту технологию не отвлекались на него.
Псевдоклассы:
:active
:checked
:empty
:disabled
:first-child
:first-of-type
- находит первого потомка своего типа среди детей родителя.:focus
:hover
:invalid
:lang()
:last-child
:last-of-type
- находит последнего потомка с заданным тегом в списке детей родительского элемента.:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:required
:root
:target
:valid
:visited
-
Что такое инлайновые стили?
Стили, которые встроены в HTML-документ.
-
Инлайновые стили “сильнее” стилей в обычном файле css?
Да, они имют вес 1, 0, 0, 0 и переопределить их можно с помощью ключевого слова
!important
;
-
Что такое наследование стилей?
Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.
Стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно. Например, размер шрифта и его цвет достаточно применить к body, чтобы все элементы внутри имели те же свойства.
Наследование позволяет сократить размер таблицы стилей, но если стилей много, то отследить какой родительский элемент установил некоторое свойство, становится сложнее.
-
Что вы знаете об !important?
Ключевое слово, которое задаёт селектору усиленный приоритет.
-
Приходилось ли Вам сталкиваться с фоном в письмах? Расскажите о своём опыте.
Фон в письмах задаётся с помощью атрибута
bgcolor=""
иbackground=""
у тега<table>
, также можно задать фон у тега<td>
. Также фон можно задавать тегуbody
-
Как отцентровать элемент по горизонтали не зная ширину родительского блока?
Строчные элементы внутри родительского блочного можно центрировать так: .selector { text-align: center; }
Блочный элемент можно отцентровать, если задать ему свойство
margin: 0 auto
и задать ширинуwidth
Если блоков несколько, то родительскому задать свойсто
text-align: center
, а у вложенных элементов изменить значение свойстваdisplay
наinline-block
Так же можно отцентровать с помощюю флексбоксов.
-
Как отцентровать элемент по вертикали не зная высоту родительского блока? Перечислите все известные вам методы.
Для строчных и строчно-* элементов:
- Можно задать одинаковые поля;
- Если текст точно не будет переноситься на вторую строчну то можно выровнять с помощью свойства
line-height
; - Можно элемент стделать ячейкой таблицы и задать свойство
vertical-align
;
Для блочных элементов:
- с помощью абсолютного позиционирования и свойства
transform
; - flexbox;
-
Что такое “резиновая” вёрстка?
Резиновая вёрстка это когда блоки изменяют свою ширину в зависимости от ширины окна браузера. Размеры, отступы задаются в относительных единицах измерения.
-
Какие вы знаете значения размеров в “резиновой” вёрстке?
проценты, em, rem, vh, vw;
-
Какие бывают значения у свойства background-size? Расскажите о каждом из них.
Масштабирует фоновое изображение, в соответсвии с задаными значениями.
размер(px, em, cm)
задаёт размер в любых доступных в CSS единацах измерения;- '%' задаёт размер фоновой картинки в процентах от ширины и высоты элемента;
auto
если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.contain
масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.cover
масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
-
Что такое семантичная вёрстка? Для чего она? Улучшает ли она что-либо?
Это подход к созданию HTML-разметки основанный на использовании тэгов в соответсвии с их семантикой(предназначением), а также предпологающий логичную и последовательную иерархию страницы.
- Понятный читаемый код;
- Повышает доступность информации на сайте (для читалок, устройств для печати), навигация по сайту с помощью клавиатуры;
- Семантический код поддаётся лучшему анализу поисковых машин, что способствует хорошей позиции в выдаче поисковиков.
-
Чем отличается
article
отsection
?<section>
— более крупный логический контейнер, объединяющий содержание по смыслу. Например, блок «О компании», список товаров, раздел личной информации в профиле и так далее.<article>
— самостоятельный, цельный и независимый раздел документа. Этот раздел можно в неизменном виде использовать в различных местах, в том числе и на других сайтах. Примеры: статья, пост в блоге, сообщение на форуме и так далее.
-
Какие вы знаете способы организации CSS кода?
-
OOCSS - объектно-ориентированый CSS. В этот подход заложены две основные идеи:
- Разделение структуры и оформления;
- Разделение контейнера и контента; С помощью такой структуры появляются общие классы, котрые можно использовать в разных местах;
-
SMACSS - масштабируемая и модульная структура CSS в этом подходе стили разделяются на 5 частей:
- базовые стили - это стили основных элементов сайта (
body, input, button, ul и т.д
); - стили макета - здесь находятся стили глобальных элементов: размеры шапки, футера, сайдбара...;
- стили модулей - стили блоков, которые могут использоваться несколько раз на странице;
- стили состояния - в этом разделе прописываются различные состояния модулей;
- оформления - здесь описываются стили оформления;
- базовые стили - это стили основных элементов сайта (
-
БЭМ - блок, элемент, модификатор;
- блоки могут использоваться в нескольких местах сайта;
- элементы являются частью блока и не имеют функционального смысла вне блока;
- модификаторы представляют собой свойства блока или элмемента, которые меняют его внешний вид или поведение.
-
Atomic CSS
-
-
Что такое БЭМ?
БЭМ - компонентный подход в веб-разработке. В его основе лежит принцип резделения интерфейса на независимые блоки, что позволяет повторно использовать существующий код.
Блок функционально независимый элемент на странице, который может быть повторно использован. Особенности:
- Название блока характеризует смысл, а не состояние;
- Блок не должен влиять на своё окружение, т.е блоку не следует задавать внешнюю геометрию;
- В CSS не рекомендуется использовать селекторы по
#id
. Блоки можно вкладывать друг в друга, допустима любая вложенность блока.
Элемент составная часть блока, которая не может использоваться в отрыве от него. Осебенности:
-
Название элемента характеризует смысл, а не состояние;
-
Структура полного имени элемента соответствует схеме:
имя-блока__имя-элемента
. Имя элемента отделяется от имени блока двумя подчеркиваниями (__).Вложенность:
- Элементы можно вкладывать друг в друга;
- Допустима любая вложенность элемента;
- Элемент всегда часть блока, а не другого элемента. Это означает, что в названии элементов нельзя прописывать иерархию вида
block__elem1__elem2
.
Элемент не обязательный компонент блока. Блок может быть и без элементов.
Модификатор сущность, определяющая внешний вид, состояние или поведение блока, либо элемента.
Особенности:
- Название характеризует внешний вид, состояние и поведение;
- Имя модификатора отделяется двумя тире.
-
По БЭМ может ли быть блок внутри блока?
Да.
-
Какие из препроцессоров вы знаете? В чём их различия?
В синтаксисе...
-
Какие из инструментов сборки вам знакомы?
Gulp, Grunt, Webpack;
-
Что лучше Gulp или Grunt?
Кому что нравится
-
Как происходит “сборка” проекта в Gulp и Grunt?
Подключаются плагины необоходимые для сборки. Создаётся файл с настройками (gulpfile.js или Gruntfile.js)
-
Что лучше Less или Scss?
Кому что нравится.
-
Вы знакомы с Google Pagespeed?
Это сервис, который позволяет проанализировать скорость сайта, а также даёт рекомендаци, что можно улучшить на сайте.
-
Что такое gracefull degradation?
Постепенная деградация. Способность системы продолжать свою работаспособность при отказе некоторых её компонентов.
-
Как проверить html-код на валидность?
При помощи валидатора w3c
-
Что такое Bootstrap? Из чего состоит его сетка? На чём построен Bootstrap?
Фреймворк для быстрого создания и прототипирования сайта. Bootstrap построен на 12-колоночной сетке, шаблонах и компонентах.
-
Что такое размер viewport?
viewport - видимая область страницы в браузере, окно браузера включая полосу прокрутки.
Относительно вьюпорта рассчитываются размеры тега и относительные размеры его потомков.
-
Вертикальный скролл входит в размер viewport?
Да.
-
Какой размер вертикального скролла?
Примерно 16px, зависит от браузера и операционной системы.
-
Как правильно задать overflow для body чтобы сохранить вертикальный скролл?
Может быть auto???
-
Как сделать мобильную, планшетную и десктопную версию сайта?
При помощи медиа выражений и не забыть добавить мета тег
<meta name="viewport" content="width=device-width,initial-scale=1">
-
Что такое ретинизация?
Ретинизация - подготовка графики для экранов с повышенной плотностью пикселей.
-
Должны ли мы отдавать разные размеры картинок пользователям разных устройств? Если да, то как?
Должны. При помощи меда выражений и тёга
picture
и атрибутаsrcste
уimg
;
-
Как можно задавать размеры картинкам?
с помощью атрибута
width
иheight
с помощью стилей.
-
Что такое SVG?
SVG — это формат векторной графики. В отличие от растровой графики — PNG, GIF, JPEG — SVG может растягиваться и сжиматься без потери качества, то есть такие картинки будут одинаково чёткими и на обычных экранах, и на ретине.
Ещё одно из достоинств SVG — человекопонятный код: его можно не только прочитать, но и написать руками. Можно открыть файл и отредактировать его без использования графического редактора, можно самому написать простую картинку.
Также SVG-элементы можно оформить с помощью CSS и добавить им интерактивности с помощью JavaScript, а кроме того, SVG достаточно хорошо поддерживается всеми современными браузерами, и его уже можно активно использовать.
-
Что такое иконочные шрифты? Где их искать и как подключать?
Шрифт, который содержит в себе набор иконок. Есть генераторы иконочных шрифтов, один из них это fontello.com На нем выбираются нужные иконки и скачавется архив, в архиве находится шрифт в разных форматах (ttf, eot, svg, woff) стилевые файлы. Нужный стилевой файл копируем и вставляем в свой CSS (в этом файле правила подключения через @font-face). Выводим иконку по её коду через свойство
content
-
Что лучше, делать иконки через SVG или через иконочные шрифты?
SVG лучше, так как:
- позволяет использовать иконки с анимацией;
- Иконочный шрифт не поддерживается в Opera Mini и есть проблемы с поддержкой в некоторый современных браузерах.
- SVG-графику удобно использовать для иконок, при этом они не будут выглядеть мыльными на устройствах с ретиной и их можно растягивать без потери качества.
- SVG можно оптимизировать и вес снижается на 30-50%;
-
Какие вы знаете способы подключения шрифтов к странице?
- Обычная загрузка шрифтов с сервиса типа Google.Fonts или хранить шрифты у себя и подключать их с помощью правил
@font-face
;
Также есть простая и небольшая библиотека Font face observer, которая позволяет:
- Загружать группы шрифтов;
- Загружать шрифты с таймером;
- Загружать шрифты приоритетно. (Сначала загружаются шрифты которые нужны на первой половине экрана для максимально быстрой отрисовки);
- Добиться отображения текста запасным шрифтом, пока основной шрифт грузится. (Использовать FOUT вместо FOIT);
- Оптимизировать для кёширования.
- Обычная загрузка шрифтов с сервиса типа Google.Fonts или хранить шрифты у себя и подключать их с помощью правил
-
Какие есть способы вставки SVG в HTML? В чём между ними разница?
-
Спрайт (через свойство
background-image:
); Плюсы:- Короткий читабельный код;
- Картинка кэшируется;
- Хорошая поддержка браузерами; Минусы:
- запрос к серверу;
- проблемы в старых Opera;
- иконки в спрайте не доступны в стилях страницы.
-
Base64 в data URI Плюсы:
- Нет запроса к серверу;
- Хорошая поддержка браузерами; Минусы:
- Картинка не кэшируется;
- длинная строка в CSS;
- закодированная картинка может весить больше исходной;
- недоступность для CSS;
- Нужен дополнительный инструмент для кодирования и раскодирования;
-
SVG в data URI Плюсы:
- Нет запроса к серверу;
- Относительно читабельный код;
- Не тербует раскодирования;
- Поддерживается всеми современными браузерами; Минусы:
- Картинка не кэшируется;
- длинная строка в CSS;
- недоступность для CSS;
-
Use (переиспользование SVG-элементов) Плюсы:
- читабельный код;
- картинкам можно добавить
title
иdesc
; - символы доступны для стилей страницы. Также можно задать иконкам
fill="currentColor"
, и они будут краситься вместе с текстом. Минусы: - вставляется непосредственно в HTML. Перед использованием элементы должны быть объявлены вверху страницы в инлайновом SVG.
Также через img, iframe, embed(во внешних приложениях или интерактивном контенте) и object(лучший вариант, если нужно изменять SVG не встраивая его в HTML).
-
-
Как проверить кроссбраузерность тех или иных методов вёрстки?
Различные онлайн-сервисы Тестирование вертски в разных браузерах devTools
-
Что такое JQuery?
JQuery - это библиотека JavaScript, которая позволяет легко полуить доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов, манипулирвоать ими
-
Как найти элемент на странице с помощью JS и JQuery?
getElementById; getElementsByTagName; getElementsByName; querySelectorAll; querySelector;
$('.clasName');
-
Что вы знаете о замыканиях и областях видимости в JS?
Большинство языков программирования имеют что-то вроде области видимости или окружении, и этот механихм позволяет существовать замыканиям. Замыкание — это функция, которая запоминает внешние переменные, используемые внутри.
Рассмотрим следующий код:
const createPrinter = () => { const name = "King"; const printName = () => { console.log(name); } return printName; };
const myPrinter = createPrinter();
myPrinter(); // King
Функция
createPrinter
создаёт константуname
и затем функцию с именемprintName
. Обе они локальные для функцииcreatePrinter
, и доступны только внутриcreatePrinter
.У самой
printName
нет локальных компонентов, но у неё есть доступ к области видимости, где она сама находится, внешней области, где задана константаname
.Затем функция
createPrinter
возвращает функциюprintName
. Помните, определения функций — это описания запущенных функций, просто фрагменты информации, как числа или строки. Поэтому мы можем вернуть определение функции, как мы возвращаем число.Во внешней области видимости мы создаём константу
myPrinter
и задаём ей значение, которое возвращаетcreatePrinter
. Он возвращает функцию, так что теперьmyPrinter
это функция. Вызовите ее, и на экран выведется"King"
.Тут есть странная штука: эта константа
name
была создана внутри функцииcreatePrinter
. Функция была вызвана и исполнена. Как мы знаем, когда функция заканчивает работу, она больше не существует. Этот магический ящик исчезает со всеми своими внутренностями.НО он возвратил другую функцию, и уже она как-то запомнила константу
name
. Поэтому когда мы вызывалиmyPrinter
, она вывела"King"
— запомненное значение, при том, что область видимости, где оно было задано больше не существует.Функция, которая была возвращена из
createPrinter
, называется замыканием. Замыкание — это сочетание функции и окружения, где она была задана. Функция "замкнула" в себе некоторую информацию из области видимости.Это может выглядеть как JavaScript-фокус, но замыкания, когда их используют разумно, могут сделать код приятней, чище и проще для чтения. И сама идея возврата функций тем же способом, которым можно возвращать числа и строки, даёт больше возможностей и гибкости.
-
Что такое цикл событий?
Цикл событий (Event Loop) — это то, что позволяет среде выполнения (Node.js, Браузер) выполнять неблокирующие операции ввода/вывода (несмотря на то, что JavaScript является однопоточным) путем выгрузки операций в ядро системы, когда это возможно.
Дополнительно: Видео
-
Как работает ключевое слово this?
В большинстве случаев значение
this
определяется тем, каким образом вызвана функция. Значениеthis
не может быть установлено путем присваивания во время исполнения кода и может иметь разное значение при каждом вызове функции. В ES5 представлен методbind
, который используется для определения значения ключевого словаthis
независимо от того, как вызвана функция. Также в ES2015 представлены стрелочные функции, которые не создают привязки кthis
(они сохраняют значениеthis
лексического окружения, в котором были созданы).В глобальном контексте выполнения (за пределами каких-либо функций),
this
ссылается на глобальный объект вне зависимости от использования в строгом или нестрогом режиме.В пределах функции значение
this
зависит от того, каким образом вызвана функция:В случае вызова функции в нестрогом режиме значение
this
не устанавливается вызовом. Значениемthis
всегда должен быть объект, по умолчанию - глобальный объект.В строгом режиме, значение
this
остается тем значением, которое было установлено в контексте исполнения. Если такое значение не определено, оно остаетсяundefined
.В стрелочных функциях,
this
привязан к окружению, в котором была создана функция. В глобальной области видимости,this
будет указывать на глобальный объект.
-
Реализуйте функцию
isPrime()
, которая возвращает true или false, указывая, является ли переданное ей число простым.const isPrime = (number) => { if (number < 2) { return false; } for (let i = 2; i < number; i += 1) { if (number % i === 0) { return false; } } return true; };
-
Реализуйте функцию
factorial()
, которая возвращает факториал переданного ей числа.const factorial = num => { if (num <= 1) { return 1; } const iter = (count, acc) => { if (count === 1) { return acc; } return iter(count - 1, count * acc); }; return iter(num, 1); };
-
Реализуйте функцию
fib()
, возвращающую n-ное число Фибоначчи.const fib = n => n <= 1 ? n : fib(n - 1) + fib(n - 2);