FormData

FormData - это объект, представляющий данные HTML формы.

Если передать в конструктор элемент HTML-формы form, то создаваемый объект автоматически прочитает из неё поля.

Его особенность заключается в том, что методы для работы с сетью, например fetch, позволяют указать объект FormData в свойстве тела запроса body.

Он будет соответствующим образом закодирован и отправлен с заголовком Content-Type: form/multipart.

То есть, для сервера это выглядит как обычная отправка формы.

P.S. на картинке выше пример отправки данных простой HTML формы с помощью fetch.

#formData #сетевые_запросы

WebSocket

Протокол WebSocket, описанный в спецификации RFC 6455, обеспечивает возможность обмена данными между браузером и сервером через постоянное соединение. Данные передаются по нему в обоих направлениях в виде «пакетов», без разрыва соединения и дополнительных HTTP-запросов.

WebSocket особенно хорош для сервисов, которые нуждаются в постоянном обмене данными, например онлайн игры, торговые площадки, работающие в реальном времени, и т.д.

В JavaScript WebSocket генерирует 4 события, с помощью которых и строится всё взаимодействие:
- open – соединение установлено;
- message – получены данные;
- error – ошибка;
- close – соединение закрыто.

#WebSocket #сетевые_запросы

Server Sent Events

Спецификация Server-Sent Events описывает встроенный класс EventSource, который позволяет поддерживать соединение с сервером и получать от него события.
Как и в случае с WebSocket, соединение постоянно.

Работа с потоком данных:
- Текст сообщения указывается после data:, пробел после двоеточия необязателен;
- Сообщения разделяются двойным переносом строки \n\n;
- Чтобы разделить сообщение на несколько строк, мы можем отправить несколько data: подряд (третье сообщение).

Про сравнение SSE с WS.
Протокол SSE одновременно похож на WebSocket, но также сильно отличается. Например, данные отправляются лишь с сервера на клиент и могут иметь только текстовой формат. Однако это не делает SSE ненужным, напротив, у него своя ниша.
Основное преимущество в простоте использования, что делает SSE более привлекательным для проектов, где вся мощь WS абсолютно не требуется.

#sse #сетевые_запросы

Long Polling (длинные опросы)

Длинные опросы – это самый простой способ поддерживать постоянное соединение с сервером, не используя при этом никаких специфических протоколов (типа WebSocket или Server Sent Events).
Его очень легко реализовать, и он хорошо подходит для многих задач.

Как это происходит:
- Запрос отправляется на сервер;
- Сервер не закрывает соединение, пока у него не возникнет сообщение для отсылки;
- Когда появляется сообщение – сервер отвечает на запрос, посылая его;
- Браузер немедленно делает новый запрос.

P.S. на картинке примерный код клиентской функции subscribe, которая реализует длинные опросы.

#LongPolling #сетевые_запросы

XMLHttpRequest

XMLHttpRequest – это встроенный в браузер объект, который даёт возможность делать HTTP-запросы к серверу без перезагрузки страницы.

Несмотря на наличие слова «XML» в названии, XMLHttpRequest может работать с любыми данными, а не только с XML. Мы можем загружать/скачивать файлы, отслеживать прогресс и многое другое.

Алгоритм работы:
1) Создать XMLHttpRequest;
2) Инициализировать его;
3) Послать запрос;
4) Слушать события на xhr, чтобы получить ответ.

P.S. На сегодняшний день не обязательно использовать XMLHttpRequest, так как существует другой, более современный метод fetch.

#xhr #сетевые_запросы

Опциональная цепочка '?.'

Опциональная цепочка ?. — это безопасный способ доступа к свойствам вложенных объектов, даже если какое-либо из промежуточных свойств не существует.

Опциональная цепочка ?. останавливает вычисление и возвращает undefined, если часть перед ?. имеет значение undefined или null.

P.S. Эта возможность была добавлена в язык недавно. В старых браузерах может понадобиться полифил.

#опциональная_цепочка #основы

Копирование объектов

Одним из фундаментальных отличий объектов от примитивных типов данных является то, что они хранятся и копируются «по ссылке».

Примитивные типы: строки, числа, логические значения – присваиваются и копируются «по значению».

Переменная хранит не сам объект, а его «адрес в памяти», другими словами «ссылку» на него.

Чтобы реально скопировать объект, нам нужно создать новый объект и повторить структуру дублируемого объекта, перебирая его свойства и копируя их.

#object #основы

Наследование классов

Наследование extends пришло в JS с ES6 синтаксисом.

Ключевое слово extends работает, используя прототипы. Оно устанавливает Rabbit.prototype.[[Prototype]] в Animal.prototype. Так что если метод не найден в Rabbit.prototype, JavaScript берёт его из Animal.prototype.

#наследование #классы

Решайте практические тесты из собеседований на нашем втором канале @tests_js

Экспорт и импорт

С помощью ключевых слов import и export мы можем соответственно импортировать и экспортировать переменные, функции, классы и другие сущности языка.

На картинке показан пример экспорта и импорта простых функций из файла say.js в main.js.

#export #import #модули

Динамические импорты

Инструкции экспорта и импорта, которые мы рассматривали в предыдущем посте, называются «статическими». Синтаксис у них весьма простой и строгий.

Во-первых, мы не можем динамически задавать никакие из параметров import.
Путь к модулю должен быть строковым примитивом и не может быть вызовом функции. Вот так работать не будет:

Во-вторых, мы не можем делать импорт в зависимости от условий или в процессе выполнения.

Все эти проблемы решает выражение import(module).

Выражение import()

Выражение import(module) загружает модуль и возвращает промис, результатом которого становится объект модуля, содержащий все его экспорты.
Использовать его мы можем динамически в любом месте кода, как показано на скрине выше.

#динамический_импорт #модули

Eval: выполнение строки кода

Встроенная функция eval позволяет выполнять строку кода.

Синтаксис:
let result = eval(code);

Строка кода может быть большой, содержать переводы строк, объявления функций, переменные и т.п.
Результатом eval будет результат выполнения последней инструкции.

Использование

В современной разработке на JavaScript eval используется весьма редко. Есть даже известное выражение – «eval is evil» («eval – это зло»).

Причина такого отношения достаточно проста: давным-давно JavaScript был не очень развитым языком, и многие вещи можно было сделать только с помощью eval. Но та эпоха закончилась более десяти лет назад.

Промисификация

Промисификация – это длинное слово для простого преобразования. Мы берём функцию, которая принимает колбэк и меняем её, чтобы она вместо этого возвращала промис.

Такие преобразования часто необходимы в реальной жизни, так как многие функции и библиотеки основаны на колбэках, а использование промисов более удобно, поэтому есть смысл «промисифицировать» их.

Например, у нас есть loadScript(src, callback) (см. левую часть картинки)

Давайте промисифицируем её. Новая функция loadScriptPromise(src) будет делать то же самое, но будет принимать только src (не callback) и возвращать промис (см. правую часть картинки)

#promise #продвинутый

Callbacks (Колбэки)

Колбэк функция - это такая функция, которая вызывается после выполнения какой-то асинхронности.

В данном примере описана функция динамической подгрузки скриптов с колбеком, после загрузки. Функция callback выполнится, когда скрипт будет полностью загружен на странице.

Колбэки используются повсеместно, не только в JavaScript.

#callback #колбэк #продвинутый

Микрозадачи

Асинхронные задачи требуют правильного управления. Для этого стандарт предусматривает внутреннюю очередь PromiseJobs, более известную как «очередь микрозадач (microtask queue)» (термин V8).

Как сказано в спецификации:
- Очередь определяется как первым-пришёл-первым-ушёл (FIFO): задачи, попавшие в очередь первыми, выполняются тоже первыми.
- Выполнение задачи происходит только в том случае, если ничего больше не запущено.

Или, проще говоря, когда промис выполнен, его обработчики .then/catch/finally попадают в очередь. Они пока не выполняются. Движок JavaScript берёт задачу из очереди и выполняет её, когда он освободится от выполнения текущего кода.

Вот почему сообщение «код выполнен» в примере выше будет показано первым.

#микрозадачи #промисы

Цепочка промисов

Идея состоит в том, что результат первого промиса передаётся по цепочке обработчиков .then.

Поток выполнения такой:
- Начальный промис успешно выполняется через 1 секунду (*),
- Затем вызывается обработчик в .then (**).
- Возвращаемое им значение передаётся дальше в следующий обработчик .then (***)
- …и так далее.

В итоге результат передаётся по цепочке обработчиков, и мы видим несколько alert подряд, которые выводят: 1 → 2 → 4.

#промисы #цепочка_промисов

Асинхронные итераторы

Асинхронные итераторы похожи на обычные итераторы, но имеют некоторые синтаксические отличия.

Чтобы сделать объект итерируемым асинхронно:
1. Используется Symbol.asyncIterator вместо Symbol.iterator
2. next() должен возвращать промис.
3. Чтобы перебрать такой объект, используется цикл for await (let item of iterable).

На картинке выше вы можете увидеть итерируемый объект range.

#генераторы #асинхронные_итераторы

Proxy

Объект Proxy «оборачивается» вокруг другого объекта и может перехватывать (и, при желании, самостоятельно обрабатывать) разные действия с ним, например чтение/запись свойств и другие. Далее мы будем называть такие объекты «прокси».

Прокси используются во многих библиотеках и некоторых браузерных фреймворках.

Синтаксис:

let proxy = new Proxy(target, handler);

- target – это объект, для которого нужно сделать прокси, может быть чем угодно, включая функции.
- handler – конфигурация прокси: объект с «ловушками» («traps»): методами, которые перехватывают разные операции, например, ловушка get – для чтения свойства из target, ловушка set – для записи свойства в target и так далее.

При операциях над proxy, если в handler имеется соответствующая «ловушка», то она срабатывает, и прокси имеет возможность по-своему обработать её, иначе операция будет совершена над оригинальным объектом target.

#разное #proxy

Proxy: ловушки

Proxy – это особый объект, у него нет собственных свойств. С пустым handler он просто перенаправляет все операции на target.

Чтобы активировать другие его возможности, добавим ловушки.

Для большинства действий с объектами в спецификации JavaScript есть так называемый «внутренний метод», который на самом низком уровне описывает, как его выполнять. Например, [[Get]] – внутренний метод для чтения свойства, [[Set]] – для записи свойства, и так далее. Эти методы используются только в спецификации, мы не можем обратиться напрямую к ним по имени.

Ловушки как раз перехватывают вызовы этих внутренних методов. Полный список методов, которые можно перехватывать, перечислен в спецификации Proxy, а также в таблице ниже.

Для каждого внутреннего метода в этой таблице указана ловушка, то есть имя метода, который мы можем добавить в параметр handler при создании new Proxy, чтобы перехватывать данную операцию.

P.S. На картинке отображена таблица со всеми доступными ловушками.

#разное #proxy #ловушки

Proxy: Значение по умолчанию с ловушкой «get»

Чаще всего используются ловушки на чтение/запись свойств.

Чтобы перехватить операцию чтения, handler должен иметь метод get(target, property, receiver).

Он срабатывает при попытке прочитать свойство объекта, с аргументами:
- target – это оригинальный объект, который передавался первым аргументом в конструктор new Proxy,
- property – имя свойства,
- receiver – если свойство объекта является геттером, то receiver – это объект, который будет использован как this при его вызове. Обычно это сам объект прокси (или наследующий от него объект). Прямо сейчас нам не понадобится этот аргумент, подробнее разберём его позже.

Давайте применим ловушку get, чтобы реализовать «значения по умолчанию» для свойств объекта.
Например, сделаем числовой массив, так чтобы при чтении из него несуществующего элемента возвращался 0.

#разное #proxy #ловушки

Proxy: Валидация с ловушкой «set»

Допустим, мы хотим сделать массив исключительно для чисел. Если в него добавляется значение иного типа, то это должно приводить к ошибке.

Ловушка set срабатывает, когда происходит запись свойства.
- set(target, property, value, receiver):
- target – это оригинальный объект, который передавался первым аргументом в конструктор new Proxy,
- property – имя свойства,
- value – значение свойства,
- receiver – аналогично ловушке get, этот аргумент имеет значение, только если свойство – сеттер.

Ловушка set должна вернуть true, если запись прошла успешно, и false в противном случае (будет сгенерирована ошибка TypeError).

#разное #proxy #ловушки