JavaScript заметки

Динамические импорты Инструкции экспорта и импорта, которые мы рассматривали в предыдущем посте, называются «статическими». Синтаксис у них весьма простой и строгий. Во-первых, мы не можем динамически задавать никакие из параметров import. Путь к модулю должен быть строковым примитивом и не может быть вызовом функции. Вот так работать не будет: Во-вторых, мы не можем делать импорт в зависимости от условий или в процессе выполнения. Все эти проблемы решает выражение import(module). Выражение import() Выражение import(module) загружает модуль и возвращает промис, результатом которого становится объект модуля, содержащий все его экспорты. Использовать его мы можем динамически в любом месте кода, как показано на скрине выше. #динамический_импорт #модули

​​Готов проверить насколько ты крут во фронтенде? На канале Frontend Tests & Tasks мы собираем для Вас самые интересные вопросы и  задачи по фронтенду. Если вдруг не сможешь решить задачу - не беда, мы подробно объясним её решение. Готов? Тогда поехали 👉 @frontend_tests

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

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

CSS-фича, это новый канал для верстальщика и фронтенд-разработчика. Здесь всегда можно найти что то нужное для себя! - слайдеры - чекбоксы - кнопки с hover-эффектами - только годные сервисы - так же у нас найдете шпаргалки по css grid и flexbox - викторины, для изучения чего то нового - формы и т.д. Заходи на канал CSS-фичи , забирай код и внедряй себе в проект !

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

🔥 CodeCamp - книжный лагерь для IT специалистов любого уровня и направления. На канале мы публикуем самые свежие и интересные книги по Python, Java, С++ и другим языкам программирования. Все в формате PDF и доступно для скачивания в два клика. Подписывайтесь, чтобы не потерять: @campcode

Копирование объектов Одним из фундаментальных отличий объектов от примитивных типов данных является то, что они хранятся и копируются «по ссылке». Примитивные типы: строки, числа, логические значения – присваиваются и копируются «по значению». Переменная хранит не сам объект, а его «адрес в памяти», другими словами «ссылку» на него. Чтобы реально скопировать объект, нам нужно создать новый объект и повторить структуру дублируемого объекта, перебирая его свойства и копируя их. #object #основы

💰 Получи оффер от 150к На канале Frontend Interview постят актуальные вопросы с собеседований по JS, CSS, HTML. А главное - разбирают их и дают ответы, которые точно впечатлят интервьюера. Хочешь в Тинькофф или Яндекс? Подписывайся

Опциональная цепочка '?.' Опциональная цепочка ?. — это безопасный способ доступа к свойствам вложенных объектов, даже если какое-либо из промежуточных свойств не существует. Опциональная цепочка ?. останавливает вычисление и возвращает undefined, если часть перед ?. имеет значение undefined или null. P.S. Эта возможность была добавлена в язык недавно. В старых браузерах может понадобиться полифил. #опциональная_цепочка #основы

Может уже хватит писать код самому? За окном 2021 — век технологий. Перестань изобретать велосипед. Просто возьми код — и примени для своего проекта. @web_features — библиотека программиста, в которой мы пишем код за тебя. Креативная анимация, готовые карточки, варианты стильного интерфейса и др. Не будь crazy, подпишись — @web_features

XMLHttpRequest XMLHttpRequest – это встроенный в браузер объект, который даёт возможность делать HTTP-запросы к серверу без перезагрузки страницы. Несмотря на наличие слова «XML» в названии, XMLHttpRequest может работать с любыми данными, а не только с XML. Мы можем загружать/скачивать файлы, отслеживать прогресс и многое другое. Алгоритм работы: 1) Создать XMLHttpRequest; 2) Инициализировать его; 3) Послать запрос; 4) Слушать события на xhr, чтобы получить ответ. P.S. На сегодняшний день не обязательно использовать XMLHttpRequest, так как существует другой, более современный метод fetch. #xhr #сетевые_запросы

На канале ProgNote вы найдёте много статей на тему Web-разработки, операционных системах и в целом о программирование в разных сферах. Ещё имеются интересные учебники для изучения различных языков и фреймворков, например таких, как Python, PHP, и JavaScript с Express.js. Также периодически выходят новости из мира IT, и в раз неделю выкладывают интересные книги и какие-нибудь JS или HTML скрипты, или PSD, Figma макеты. Поэтому подписываетесь на канал ProgNote, и начинаете изучать программирование прямо сейчас.

Long Polling (длинные опросы) Длинные опросы – это самый простой способ поддерживать постоянное соединение с сервером, не используя при этом никаких специфических протоколов (типа WebSocket или Server Sent Events). Его очень легко реализовать, и он хорошо подходит для многих задач. Как это происходит: - Запрос отправляется на сервер; - Сервер не закрывает соединение, пока у него не возникнет сообщение для отсылки; - Когда появляется сообщение – сервер отвечает на запрос, посылая его; - Браузер немедленно делает новый запрос. P.S. на картинке примерный код клиентской функции subscribe, которая реализует длинные опросы. #LongPolling #сетевые_запросы

«Писать код надо, но тааак лень..» Расслабься, айтишник. Его уже написали за тебя и выложили на канале Frontended Libs. Это сборник удобных библиотек с готовым кодом под твои задачи. Открываешь – находишь нужную либу – выполняешь задачу в 5 раз быстрее. Подписывайся, сэкономим тебе время: @sWebDev

Server Sent Events Спецификация Server-Sent Events описывает встроенный класс EventSource, который позволяет поддерживать соединение с сервером и получать от него события. Как и в случае с WebSocket, соединение постоянно. Работа с потоком данных: - Текст сообщения указывается после data:, пробел после двоеточия необязателен; - Сообщения разделяются двойным переносом строки \n\n; - Чтобы разделить сообщение на несколько строк, мы можем отправить несколько data: подряд (третье сообщение). Про сравнение SSE с WS. Протокол SSE одновременно похож на WebSocket, но также сильно отличается. Например, данные отправляются лишь с сервера на клиент и могут иметь только текстовой формат. Однако это не делает SSE ненужным, напротив, у него своя ниша. Основное преимущество в простоте использования, что делает SSE более привлекательным для проектов, где вся мощь WS абсолютно не требуется. #sse #сетевые_запросы

Более 1540 русскоязычных книг по программированию и технологиям можно найти на канале @it_boooks Навигация всегда в закрепе.

WebSocket Протокол WebSocket, описанный в спецификации RFC 6455, обеспечивает возможность обмена данными между браузером и сервером через постоянное соединение. Данные передаются по нему в обоих направлениях в виде «пакетов», без разрыва соединения и дополнительных HTTP-запросов. WebSocket особенно хорош для сервисов, которые нуждаются в постоянном обмене данными, например онлайн игры, торговые площадки, работающие в реальном времени, и т.д. В JavaScript WebSocket генерирует 4 события, с помощью которых и строится всё взаимодействие: - open – соединение установлено; - message – получены данные; - error – ошибка; - close – соединение закрыто. #WebSocket #сетевые_запросы

Frontend Planet - канал с самыми передовыми онлайн-инструментами, без которых не обойдется ни один разработчик.   Подписывайся и верстай в ускоренном режиме.

FormData FormData - это объект, представляющий данные HTML формы. Если передать в конструктор элемент HTML-формы form, то создаваемый объект автоматически прочитает из неё поля. Его особенность заключается в том, что методы для работы с сетью, например fetch, позволяют указать объект FormData в свойстве тела запроса body. Он будет соответствующим образом закодирован и отправлен с заголовком Content-Type: form/multipart. То есть, для сервера это выглядит как обычная отправка формы. P.S. на картинке выше пример отправки данных простой HTML формы с помощью fetch. #formData #сетевые_запросы