update modules

This commit is contained in:
2025-03-05 16:38:24 +03:00
parent b4f0c9b803
commit c3c72fc22e
6 changed files with 165 additions and 0 deletions

View File

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

View File

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

View File

@@ -0,0 +1,39 @@
---
sidebar_position: 1
---
# Модули
Основные понятия:
1. Модуль это файл. Чтобы работал `import/export`, нужно для браузеров указывать атрибут `<script type="module"`>. У модулей есть ряд особенностей:
- Отложенное (deferred) выполнение по умолчанию.
- Атрибут async работает во встроенных скриптах.
- Для загрузки внешних модулей с другого источника, он должен ставить заголовки CORS.
- Дублирующиеся внешние скрипты игнорируются.
2. У модулей есть своя область видимости, обмениваться функциональностью можно через `import/export`.
3. В модулях всегда включена директива `use strict`.
4. Код в модулях выполняется только один раз. Экспортируемая функциональность создаётся один раз и передаётся всем импортёрам.
Когда мы используем модули, каждый модуль реализует свою функциональность и экспортирует её. Затем мы используем `import`, чтобы напрямую импортировать её туда, куда необходимо. Браузер загружает и анализирует скрипты автоматически.
В реальной жизни часто используется сборщик Webpack, чтобы объединить модули: для производительности и других «плюшек».
Библиотеки для динамической подгрузки модулей.
- **AMD** одна из самых старых модульных систем, изначально реализована библиотекой require.js.
- **CommonJS** модульная система, созданная для сервера Node.js.
- **UMD** ещё одна модульная система, предлагается как универсальная, совместима с AMD и CommonJS.
## Что такое модуль?
Модуль это просто файл. Один скрипт это один модуль.
Модули могут загружать друг друга и использовать директивы `export` и `import`, чтобы обмениваться функциональностью, вызывать функции одного модуля из другого:
- export отмечает переменные и функции, которые должны быть доступны вне текущего модуля.
- import позволяет импортировать функциональность из других модулей.
## Основные возможности модулей
- В модулях всегда используется режим use strict.
- Каждый модуль имеет свою собственную область видимости.
- Если один и тот же модуль используется в нескольких местах, то его код выполнится только один раз, после чего экспортируемая функциональность передаётся всем импортёрам.
- Объект import.meta содержит информацию о текущем модуле. Содержимое зависит от окружения.
- В модуле на верхнем уровне this не определён (undefined).
-

View File

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