redrockjs/frontend-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update html css

Browse Source
This commit is contained in:
Valery Grunenko
2025-03-06 13:07:51 +03:00
parent c3c72fc22e
commit a9d2a5f182
10 changed files with 466 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
docs/html-css/01-position.md
View File

@@ -3,3 +3,49 @@ sidebar_position: 1
--- ---
# Position # Position
Источник: DeepSeek
Свойство position в CSS используется для определения способа позиционирования элемента на веб-странице. Оно позволяет управлять расположением элемента относительно его обычного положения в потоке документа или относительно других элементов.
Основные значения свойства position:
## Static
- Элемент позиционируется в соответствии с нормальным потоком документа.
- Свойства `top`, `right`, `bottom`, `left` и `z-index` не применяются.
- Это значение используется по умолчанию для всех элементов.
## Relative
- Свойство - по умолчанию
- Элемент позиционируется относительно своего нормального положения.
- Можно использовать свойства `top`, `right`, `bottom`, `left` для смещения элемента относительно его исходного положения.
- Остальные элементы на странице не изменяют своего положения, как если бы элемент оставался на своем месте.
## Absolute
- Элемент удаляется из нормального потока документа и позиционируется относительно ближайшего предка с позиционированием, отличным от `static` (например, `relative`, `absolute`, `fixed` или `sticky`).
- Если такого предка нет, элемент позиционируется относительно `<body>`.
- Можно использовать `top`, `right`, `bottom`, `left` для точного позиционирования.
## Fixed
- Элемент фиксируется относительно окна браузера и не перемещается при прокрутке страницы.
- Позиционируется относительно *viewport* (области просмотра).
- Часто используется для создания фиксированных навигационных панелей или кнопок.
## Sticky
- Элемент ведет себя как `relative`, пока не достигнет определенной точки прокрутки, после чего фиксируется на месте, как `fixed`.
- Полезно для создания "липких" заголовков или меню, которые остаются видимыми при прокрутке.
## Дополнительные свойства для позиционирования:
- `top`, `right`, `bottom`, `left`:
- Эти свойства используются для точного позиционирования элемента относительно его контейнера или *viewport*.
- Работают только с элементами, у которых `position` установлен в `relative`, `absolute`, `fixed` или `sticky`.
- `z-index`:
- Управляет порядком наложения элементов друг на друга (глубиной).
- Работает только с элементами, у которых `position` не `static`.
- Чем выше значение `z-index`, тем выше элемент находится в стеке.
## Важные моменты:
- Элементы с `position: absolute` или `fixed` не влияют на расположение других элементов в потоке документа.
- `z-index` работает только для элементов с позиционированием, отличным от `static`.
- `sticky` работает только если у родительского элемента есть высота, иначе поведение может быть непредсказуемым.
Использование свойства `position` позволяет гибко управлять расположением элементов на странице, создавая сложные макеты и интерактивные интерфейсы.

41
docs/html-css/02-flex-grid.md
View File

@@ -3,3 +3,44 @@ sidebar_position: 2
--- ---
# Сетка flexbox, grid # Сетка flexbox, grid
Источник: DeepSeek
## Flexbox
Flexbox (Flexible Box Layout) — это мощная модульная система CSS, предназначенная для создания гибких и адаптивных макетов. Она позволяет легко выравнивать элементы, распределять пространство и управлять их поведением в контейнере, даже если размеры элементов неизвестны или динамически изменяются.
#### Основные концепции Flexbox
Flexbox работает с двумя основными сущностями:
1. **Flex Container** (контейнер) — элемент, который содержит дочерние элементы (flex items). Чтобы сделать элемент flex-контейнером, нужно задать ему свойство `display: flex` или `display: inline-flex`.
2. **Flex Items** (элементы) — дочерние элементы внутри flex-контейнера.
#### Преимущества Flexbox:
- Простое создание адаптивных макетов.
- Легкое выравнивание элементов по горизонтали и вертикали.
- Гибкость в управлении размерами и порядком элементов.
#### Когда использовать Flexbox:
- Для создания одномерных макетов (например, навигационные панели, карточки, списки).
- Когда нужно выравнивать элементы внутри контейнера.
- Для создания адаптивных интерфейсов.
## Grid
**CSS Grid Layout** (или просто **Grid**) — это мощная система для создания двумерных макетов в CSS. В отличие от Flexbox, который работает с одномерными макетами (либо строка, либо столбец), Grid позволяет управлять как строками, так и столбцами одновременно. Это делает Grid идеальным инструментом для создания сложных, адаптивных сеток.
#### Основные концепции Grid
1. **Grid Container** (контейнер) — элемент, который содержит дочерние элементы (grid items). Чтобы сделать элемент grid-контейнером, нужно задать ему свойство `display: grid` или `display: inline-grid`.
2. **Grid Items** (элементы) — дочерние элементы внутри grid-контейнера.
3. **Grid Lines** (линии) — линии, которые разделяют строки и столбцы. Они могут быть пронумерованы или названы.
4. **Grid Tracks** (дорожки) — пространство между двумя соседними линиями (строки или столбцы).
5. **Grid Cells** (ячейки) — пересечение строки и столбца (минимальная единица сетки).
6. **Grid Areas** (области) — прямоугольные области, состоящие из одной или нескольких ячеек.
#### Преимущества Grid:
- Полный контроль над строками и столбцами.
- Простое создание сложных макетов.
- Гибкость в управлении размерами и расположением элементов.
#### Когда использовать Grid:
- Для создания двумерных макетов (например, страницы с боковой панелью, заголовком и футером).
- Когда нужно точно контролировать расположение элементов.
- Для создания адаптивных интерфейсов с минимальным количеством медиазапросов.

61
docs/html-css/03-semantic-tags.md
View File

@@ -3,3 +3,64 @@ sidebar_position: 3
--- ---
# Семантические тэги # Семантические тэги
Источник: DeepSeek
Семантические теги HTML — это теги, которые четко описывают их содержимое и предназначение, делая код более понятным как для разработчиков, так и для поисковых систем. Они помогают улучшить структуру документа, упростить его чтение и повысить доступность для людей с ограниченными возможностями.
Основные семантические теги
1. `<header>`
- Используется для шапки сайта или раздела.
- Обычно содержит логотип, навигацию или заголовок.
2. `<nav>`
- Предназначен для навигационных ссылок.
- Может использоваться в `<header>`, `<footer>` или самостоятельно.
3. `<main>`
- Содержит основное содержимое страницы.
- На странице должен быть только один `<main>`.
4. `<article>`
- Используется для независимого, самодостаточного контента, например, статьи, поста в блоге или новости.
- Может содержать заголовки, текст, изображения и т.д.
5. `<section>`
- Определяет раздел документа, например, главу или часть страницы.
- Обычно содержит заголовок и связанный контент.
6. `<aside>`
- Используется для дополнительного контента, который связан с основным, но не является его частью (например, боковая панель).
7. `<footer>`
- Предназначен для подвала сайта или раздела.
- Обычно содержит информацию об авторских правах, контакты или ссылки.
8. `<figure>` и `<figcaption>`
- `<figure>` используется для группировки медиа (изображений, диаграмм, кода) с подписью.
- `<figcaption>` — подпись к медиа.
9. `<time>`
- Используется для обозначения даты или времени.
- Может включать атрибут datetime для машинного чтения.
10. `<mark>`
- Выделяет текст, который должен быть выделен (например, результаты поиска).
11. `<details>` и `<summary>`
- `<details>` создает раскрывающийся блок.
- `<summary>` — заголовок для этого блока.
12. `<address>`
- Используется для контактной информации, обычно в `<footer>`.
## Преимущества семантических тегов:
1. Улучшение доступности:
- Семантические теги помогают скринридерам и другим вспомогательным технологиям лучше понимать структуру страницы.
2. SEO-оптимизация:
- Поисковые системы лучше индексируют страницы с четкой структурой.
3. Читаемость кода:
- Код становится более понятным и поддерживаемым.
4. Упрощение стилизации:
- Семантические теги позволяют легко применять стили к определенным частям страницы.
## Когда использовать семантические теги:
- Для создания структурированных и понятных веб-страниц.
- Для улучшения доступности и SEO.
- Для упрощения работы с кодом в команде.

55
docs/html-css/04-block-model.md
View File

@@ -3,3 +3,58 @@ sidebar_position: 4
--- ---
# Блочная модель # Блочная модель
Источник: DeepSeek
**Блочная модель CSS** (или **Box Model**) — это фундаментальная концепция, которая описывает, как элементы HTML отображаются на веб-странице. Каждый элемент на странице рассматривается как прямоугольный блок, который состоит из нескольких частей: содержимого, отступов, границ и внешних отступов. Понимание блочной модели важно для управления размерами, расположением и отступами элементов.
## Компоненты блочной модели
1. **Содержимое (Content):**
- Это внутренняя часть элемента, где отображается текст, изображения или другие элементы.
- Размеры содержимого определяются свойствами `width` (ширина) и `height` (высота).
2. **Внутренний отступ (Padding):**
- Это пространство между содержимым и границей элемента.
- Управляется свойствами `padding-top`, `padding-right`, `padding-bottom`, `padding-left` или сокращенным свойством `padding`.
3. **Граница (Border):**
- Это рамка вокруг элемента, которая находится между внутренним отступом и внешним отступом.
- Управляется свойствами `border-width`, `border-style`, `border-color` или сокращенным свойством `border`.
4. **Внешний отступ (Margin):**
- Это пространство между границей элемента и соседними элементами.
- Управляется свойствами `margin-top`, `margin-right`, `margin-bottom`, `margin-left` или сокращенным свойством `margin`.
## Схема блочной модели
```
+---------------------------+
| Margin |
| +---------------------+ |
| | Border | |
| | +--------------+ | |
| | | Padding | | |
| | | +--------+ | | |
| | | | Content| | | |
| | | +--------+ | | |
| | +--------------+ | |
| +---------------------+ |
+---------------------------+
```
## Размеры элемента
Общий размер элемента складывается из:
- Ширина: `width` + `padding-left` + `padding-right` + `border-left` + `border-right`.
- Высота: `height` + `padding-top` + `padding-bottom` + `border-top` + `border-bottom`.
## Свойство box-sizing
По умолчанию размеры элемента (`width` и `height`) относятся только к содержимому. Это может быть неудобно, так как добавление отступов и границ увеличивает общий размер элемента. Чтобы изменить это поведение, используется свойство `box-sizing`.
1. `content-box` (по умолчанию):
- Размеры элемента (`width` и `height`) относятся только к содержимому.
- Отступы и границы добавляются к общему размеру.
2. `border-box`:
- Размеры элемента включают содержимое, отступы и границы.
- Это упрощает расчеты и делает поведение более предсказуемым.
## Вывод:
- Блочная модель CSS состоит из **содержимого**, **внутренних отступов**, **границ** и **внешних отступов**.
- Свойство `box-sizing` позволяет управлять тем, как учитываются отступы и границы в размерах элемента.
- Понимание блочной модели важно для создания точных и предсказуемых макетов.

48
docs/html-css/05-selectors.md
View File

@@ -3,3 +3,51 @@ sidebar_position: 5
--- ---
# Селекторы, специфичность # Селекторы, специфичность
Источник: DeepSeek
**Специфичность селекторов** в CSS — это механизм, который определяет, какие стили будут применены к элементу, если на него влияют несколько конфликтующих правил. Специфичность рассчитывается на основе типа селекторов, и чем выше специфичность, тем выше приоритет стиля.
## Как работает специфичность?
Специфичность рассчитывается как числовое значение, состоящее из четырех частей: `a, b, c, d,` где:
- `a` — стили, указанные в атрибуте `style` (инлайновые стили).
- `b` — количество ID-селекторов.
- `c` — количество классов, псевдоклассов и атрибутов.
- `d` — количество элементов и псевдоэлементов.
Чем больше значение в каждой части, тем выше специфичность. Например:
- Селектор `#id` имеет специфичность `0, 1, 0, 0`.
- Селектор `.class` имеет специфичность `0, 0, 1, 0`.
- Селектор `div` имеет специфичность `0, 0, 0, 1`.
## Правила расчета специфичности
1. **Инлайновые стили** (в атрибуте `style`) имеют наивысшую специфичность: `1, 0, 0, 0`.
2. **ID-селекторы** (`#id`) имеют специфичность: `0, 1, 0, 0`.
3. **Классы, псевдоклассы и атрибуты** (`.class`, `:hover`, `[type="text"]`) имеют специфичность: `0, 0, 1, 0`.
4. **Элементы и псевдоэлементы** (`div`, `::before`) имеют специфичность: `0, 0, 0, 1`.
5. **Универсальный селектор** (`*`) и комбинаторы (например, `>`, `+`, `~`) не увеличивают специфичность.
## Приоритеты
1. **Инлайновые стили** (`style="..."`) всегда имеют наивысший приоритет.
2. **Селекторы с `!important`:**
- Если к стилю добавлено !important, он переопределяет все остальные правила, независимо от специфичности.
- Пример: `color: red !important;`.
3. **Специфичность:**
- Если нет `!important`, применяется правило с наибольшей специфичностью.
4. **Порядок в коде:**
- Если специфичность одинакова, применяется последнее объявленное правило.
## Как управлять специфичностью?
1. **Избегайте избыточных селекторов:**
- Используйте минимально необходимую специфичность.
- Например, вместо div#content используйте #content.
2. **Используйте классы:**
- Классы имеют умеренную специфичность и легко переопределяются.
3. **Осторожно с `!important`:**
- Используйте !important только в крайних случаях, так как это усложняет поддержку кода.
4. **Порядок объявления:**
- Если специфичность одинакова, последнее объявленное правило имеет приоритет.
## Вывод
- Специфичность определяет приоритет CSS-правил.
- Инлайновые стили и !important имеют наивысший приоритет.
- Используйте классы и избегайте избыточной специфичности для поддержания чистоты кода.

70
docs/html-css/06-preprocessors.md
View File

@@ -3,3 +3,73 @@ sidebar_position: 6
--- ---
# Препроцессоры # Препроцессоры
Источник: DeepSeek
**Препроцессоры CSS** — это инструменты, которые расширяют возможности стандартного CSS, добавляя такие функции, как переменные, вложенность, миксины, функции и многое другое. Они позволяют писать более структурированный, поддерживаемый и удобный код, который затем компилируется в стандартный CSS. Если вы работаете над большим проектом, использование препроцессора может сэкономить время и усилия. Наиболее популярные препроцессоры: **Sass**, **Less** и **Stylus**.
## Зачем использовать препроцессоры?
1. **Переменные:**
- Позволяют хранить значения (например, цвета, размеры шрифтов) для повторного использования.
- Упрощают поддержку и изменение стилей.
2. **Вложенность:**
- Позволяют вкладывать селекторы, что делает код более читаемым и структурированным.
3. **Миксины (Mixins):**
- Позволяют создавать переиспользуемые блоки кода с параметрами.
4. **Функции:**
- Позволяют выполнять вычисления и возвращать значения.
5. **Импорт:**
- Позволяют разбивать код на несколько файлов и подключать их в основной файл.
6. **Наследование:**
- Позволяют наследовать стили от одного селектора другому.
7. **Операции:**
- Позволяют выполнять математические операции с числами, цветами и другими значениями.
## Популярные препроцессоры
1. **Sass** (Syntactically Awesome Style Sheets)
- Самый популярный препроцессор.
- Поддерживает два синтаксиса:
- **SCSS** (Sassy CSS) — синтаксис, похожий на стандартный CSS.
- **Sass** — более лаконичный синтаксис без фигурных скобок и точек с запятой.
- Возможности:
- Переменные.
- Вложенность.
- Миксины.
- Наследование.
- Функции.
- Логические операторы и циклы.
2. **Less**
- Похож на Sass, но использует синтаксис, более близкий к стандартному CSS.
- Легко интегрируется с JavaScript.
- Возможности:
- Переменные.
- Вложенность.
- Миксины.
- Функции.
- Операции.
3. **Stylus**
- Более гибкий синтаксис, который позволяет писать код без фигурных скобок, точек с запятой и даже двоеточий.
- Возможности:
- Переменные.
- Вложенность.
- Миксины.
- Функции.
- Логические операторы и циклы.
## Преимущества препроцессоров
1. **Удобство:**
- Код становится более читаемым и структурированным.
2. **Повторное использование:**
- Переменные, миксины и функции позволяют избежать дублирования кода.
3. **Поддержка:**
- Упрощают поддержку и обновление стилей.
4. **Расширяемость:**
- Добавляют мощные функции, недоступные в стандартном CSS.
## Недостатки препроцессоров
1. **Компиляция:**
- Требуется дополнительный шаг компиляции.
2. **Кривая обучения:**
- Необходимо изучить новый синтаксис и возможности.
3. **Сложность отладки:**
- Скомпилированный CSS может быть сложнее отлаживать.

109
docs/html-css/07-size-units.md
View File

@@ -3,3 +3,112 @@ sidebar_position: 7
--- ---
# Единицы измерения в CSS # Единицы измерения в CSS
Источник: DeepSeek
В CSS существует множество единиц измерения, которые используются для задания размеров, отступов, шрифтов и других свойств элементов. Эти единицы можно разделить на несколько категорий: **абсолютные**, **относительные** и **специальные**.
- **Абсолютные единицы** (например, `px`, `in`) используются для фиксированных размеров.
- **Относительные единицы** (например, `em`, `rem`, `%`, `vw`, `vh`) помогают создавать адаптивные и гибкие макеты.
- **Специальные единицы** (например, `deg`, `s`, `Hz`) используются для трансформаций, анимаций и других специфических задач.
## Абсолютные
Абсолютные единицы фиксированы и не зависят от других параметров, таких как размер экрана или шрифта. Они используются реже, так как не всегда подходят для создания адаптивных макетов.
**Основные абсолютные единицы:**
- `px` **(пиксели):**
- Наиболее распространенная единица.
- 1px соответствует одному пикселю на экране.
- Пример: `width: 200px;`.
- `in` **(дюймы):**
- 1in = 2.54cm.
- Используется редко, в основном для печати.
- Пример: `width: 2in;`.
- `cm` **(сантиметры):**
- Используется для печати.
- Пример: `width: 5cm;`.
- `mm` **(миллиметры):**
- Используется для печати.
- Пример: `width: 50mm;`.
- `pt` **(пункты):**
- 1pt = 1/72 дюйма.
- Часто используется для печати.
- Пример: `font-size: 12pt;`.
- `pc` **(пики):**
- 1pc = 12pt.
- Используется редко.
- Пример: `font-size: 1.5pc;`.
## Относительные
Относительные единицы зависят от других параметров, таких как размер шрифта или размер родительского элемента. Они чаще используются для создания адаптивных и гибких макетов.
**Основные относительные единицы:**
- `em`:
- Зависит от размера шрифта текущего элемента.
- 1em = текущий размер шрифта.
- Если размер шрифта элемента равен 16px, то `2em = 32px`.
- Пример: `font-size: 1.5em;`.
- `rem` **(root em):**
- Зависит от размера шрифта корневого элемента (`<html>`).
- 1rem = размер шрифта корневого элемента (обычно 16px).
- Пример: `font-size: 1.2rem;`.
- `%` **(проценты):**
- Зависит от размера родительского элемента.
- Пример: `width: 50%;` (ширина элемента будет 50% от ширины родителя).
- `vw` **(viewport width):**
- 1vw = 1% ширины области просмотра (viewport).
- Пример: `width: 50vw;` (ширина элемента будет 50% от ширины окна браузера).
- `vh` **(viewport height):**
- 1vh = 1% высоты области просмотра (viewport).
- Пример: `height: 100vh;` (высота элемента будет равна высоте окна браузера).
- `vmin`:
- 1vmin = 1% от меньшего из размеров (ширины или высоты) области просмотра.
- Пример: `font-size: 5vmin;`.
- `vmax`:
- 1vmax = 1% от большего из размеров (ширины или высоты) области просмотра.
- Пример: `font-size: 5vmax;`.
- `ch`:
- Зависит от ширины символа "0" текущего шрифта.
- Пример: `width: 20ch;` (ширина элемента будет равна ширине 20 символов "0").
- `ex`:
- Зависит от высоты символа "x" текущего шрифта.
- Используется редко.
- Пример: `font-size: 2ex;`.
## Специальные единицы измерения
Эти единицы используются для специфических задач, таких как работа с цветами или углами.
- `deg` **(градусы):**
- Используется для задания углов (например, в трансформациях).
- Пример: `transform: rotate(45deg);`.
- `rad` **(радианы):**
- Используется для задания углов в радианах.
- Пример: `transform: rotate(1rad);`.
- `turn` **(обороты):**
- 1turn = 360deg.
- Пример: `transform: rotate(0.5turn);`.
- `s` **(секунды)** и `ms` **(миллисекунды):**
- Используются для задания времени (например, в анимациях).
- Пример: `transition: all 0.5s;`.
- `Hz` **(герцы)** и `kHz` **(килогерцы):**
- Используются для задания частоты (например, в анимациях).
- Пример: `animation: pulse 2Hz;`.
## Единицы для работы с цветами
- `rgb()` и `rgba()`:
- Задают цвет в формате RGB (Red, Green, Blue) с возможностью указания прозрачности.
- Пример: `color: rgba(255, 0, 0, 0.5);`.
- `hsl()` и `hsla()`:
- Задают цвет в формате HSL (Hue, Saturation, Lightness) с возможностью указания прозрачности.
- Пример: `background-color: hsla(120, 100%, 50%, 0.3);`.
- **Шестнадцатеричные значения**:
- Задают цвет в формате HEX.
- Пример: `color: #ff0000;`.
### Когда какие единицы использовать?
- `px`: Для фиксированных размеров (например, границы, тени).
- `em` и `rem`: Для размеров шрифтов и отступов, чтобы обеспечить масштабируемость.
- `%`: Для создания адаптивных макетов (например, ширина элемента).
- `vw` и `vh`: Для создания полноэкранных блоков или адаптивных шрифтов.
- `ch`: Для работы с текстом (например, ограничение ширины текстового поля).
- `deg`, `rad`, `turn`: Для трансформаций и анимаций.

12
docs/javascript/09-generators/01-generators.md
View File

@@ -8,7 +8,7 @@ sidebar_position: 1
Генераторы могут порождать (yield) множество значений одно за другим, по мере необходимости. Генераторы отлично работают с перебираемыми объектами и позволяют легко создавать потоки данных. Генераторы могут порождать (yield) множество значений одно за другим, по мере необходимости. Генераторы отлично работают с перебираемыми объектами и позволяют легко создавать потоки данных.
- Генераторы создаются при помощи функций-генераторов function* f(…) \{…}. - Генераторы создаются при помощи функций-генераторов `function* f(…) {…}`.
- Внутри генераторов и только внутри них существует оператор yield. - Внутри генераторов и только внутри них существует оператор yield.
- Внешний код и генератор обмениваются промежуточными результатами посредством вызовов next/yield. - Внешний код и генератор обмениваются промежуточными результатами посредством вызовов next/yield.
@@ -18,11 +18,11 @@ sidebar_position: 1
Источник: [https://learn.javascript.ru/generators](https://learn.javascript.ru/generators) Источник: [https://learn.javascript.ru/generators](https://learn.javascript.ru/generators)
Для объявления генератора используется специальная синтаксическая конструкция: function*, которая называется «функция-генератор». Для объявления генератора используется специальная синтаксическая конструкция: function*, которая называется «функция-генератор».
Основным методом генератора является next(). При вызове он запускает выполнение кода до ближайшей инструкции yield <значение> (значение может отсутствовать, в этом случае оно предполагается равным undefined). По достижении yield выполнение функции приостанавливается, а соответствующее значение – возвращается во внешний код: Основным методом генератора является next(). При вызове он запускает выполнение кода до ближайшей инструкции `yield <значение>` (значение может отсутствовать, в этом случае оно предполагается равным undefined). По достижении yield выполнение функции приостанавливается, а соответствующее значение – возвращается во внешний код:
Результатом метода next() всегда является объект с двумя свойствами: Результатом метода next() всегда является объект с двумя свойствами:
- value: значение из yield. - **value**: значение из `yield`.
- done: true, если выполнение функции завершено, иначе false. - **done**: `true`, если выполнение функции завершено, иначе `false`.
```js ```js
function* generateSequence() { function* generateSequence() {
yield 1; yield 1;
@@ -42,8 +42,8 @@ alert(JSON.stringify(one)); // {value: 1, done: false}
## Перебор генераторов ## Перебор генераторов
Как вы, наверное, уже догадались по наличию метода next(), генераторы являются перебираемыми объектами. Как вы, наверное, уже догадались по наличию метода next(), генераторы являются перебираемыми объектами.
Возвращаемые ими значения можно перебирать через for..of Возвращаемые ими значения можно перебирать через `for..of`
Это из-за того, что перебор через for..of игнорирует последнее значение, при котором done: true. Поэтому, если мы хотим, чтобы были все значения при переборе через for..of, то надо возвращать их через yield: Это из-за того, что перебор через `for..of` игнорирует последнее значение, при котором `done: true`. Поэтому, если мы хотим, чтобы были все значения при переборе через `for..of`, то надо возвращать их через `yield`:
```js ```js
function* generateSequence() { function* generateSequence() {
yield 1; yield 1;

20
docs/javascript/09-generators/02-async-iterators-generators.md
View File

@@ -8,23 +8,27 @@ sidebar_position: 2
Обычные итераторы и генераторы прекрасно работают с данными, которые не требуют времени для их создания или получения. Обычные итераторы и генераторы прекрасно работают с данными, которые не требуют времени для их создания или получения.
Когда мы ожидаем, что данные будут поступать асинхронно, с задержками, можно использовать их асинхронные аналоги и for Когда мы ожидаем, что данные будут поступать асинхронно, с задержками, можно использовать их асинхронные аналоги и
await..of вместоfor..of. `for await..of` вместо `for..of`.
Синтаксические различия между асинхронными и обычными итераторами: Синтаксические различия между асинхронными и обычными итераторами:
| | Перебираемый объект | Асинхронно перебираемый | | | Перебираемый объект | Асинхронно перебираемый |
|-------------------------------|-----------------------------|-----------------------------------------------------------| |-------------------------------|-------------------------------|-------------------------------------------------------------|
| Метод для получения итератора | Symbol.iterator | Symbol.asyncIterator | | Метод для получения итератора | Symbol.iterator | Symbol.asyncIterator |
| next() возвращает | {value:…, done: true/false} | промис, который завершается с {value:…, done: true/false} | | next() возвращает | `{value:…, done: true/false}` | промис, который завершается с `{value:…, done: true/false}` |
Синтаксические различия между асинхронными и обычными генераторами: Синтаксические различия между асинхронными и обычными генераторами:
| | Генераторы | Асинхронные генераторы | | | Генераторы | Асинхронные генераторы |
|-----------------------------|-----------------------------|-----------------------------------------------------------| |-----------------------------|-------------------------------|-------------------------------------------------------------|
| Объявление | function* | async function* | | Объявление | function* | async function* |
| generator.next() возвращает | {value:…, done: true/false} | промис, который завершается с {value:…, done: true/false} | | generator.next() возвращает | `{value:…, done: true/false}` | промис, который завершается с `{value:…, done: true/false}` |
В веб-разработке мы часто встречаемся с потоками данных, когда они поступают по частям. Например, загрузка или выгрузка большого файла. В веб-разработке мы часто встречаемся с потоками данных, когда они поступают по частям. Например, загрузка или выгрузка
большого файла.
Мы можем использовать асинхронные генераторы для обработки таких данных. Также заметим, что в некоторых окружениях, например, браузерах, есть и другое API, называемое Streams (потоки), который предоставляет специальные интерфейсы для работы с такими потоками данных, их преобразования и передачи из одного потока в другой (например, загрузка из одного источника и сразу отправка в другое место). Мы можем использовать асинхронные генераторы для обработки таких данных. Также заметим, что в некоторых окружениях,
например, браузерах, есть и другое API, называемое Streams (потоки), который предоставляет специальные интерфейсы для
работы с такими потоками данных, их преобразования и передачи из одного потока в другой (например, загрузка из одного
источника и сразу отправка в другое место).

14
docs/javascript/10-modules/02-import-export.md
View File

@@ -10,20 +10,20 @@ sidebar_position: 2
Вы можете проверить себя, читая их и вспоминая, что они означают: Вы можете проверить себя, читая их и вспоминая, что они означают:
- Перед объявлением класса/функции/…: - Перед объявлением класса/функции/…:
- export [default] class/function/variable ... - export `[default]` class/function/variable ...
- Отдельный экспорт: - Отдельный экспорт:
- export {x [as y], ...}. - export `{x [as y], ...}`.
- Реэкспорт: - Реэкспорт:
- export {x [as y], ...} from "module" - export `{x [as y], ...}` from "module"
- export * from "module" (не реэкспортирует export default). - export * from "module" (не реэкспортирует export default).
- export {default [as y]} from "module" (реэкспортирует только export default). - export `{default [as y]}` from "module" (реэкспортирует только export default).
Импорт: Импорт:
- Именованные экспорты из модуля: - Именованные экспорты из модуля:
- import {x [as y], ...} from "module" - import `{x [as y], ...}` from "module"
- Импорт по умолчанию: - Импорт по умолчанию:
- import x from "module" - import x from "module"
- import {default as x} from "module" - import `{default as x}` from "module"
- Всё сразу: - Всё сразу:
- import * as obj from "module" - import * as obj from "module"
- Только подключить модуль (его код запустится), но не присваивать его переменной: - Только подключить модуль (его код запустится), но не присваивать его переменной:
@@ -31,4 +31,4 @@ sidebar_position: 2
Мы можем поставить import/export в начало или в конец скрипта, это не имеет значения. Мы можем поставить import/export в начало или в конец скрипта, это не имеет значения.
💥 **Обратите внимание, что инструкции import/export не работают внутри \{...}.** 💥 **Обратите внимание, что инструкции import/export не работают внутри `{...}`.**