Статистика ВК сообщества "JavaScript"

Основные методы для работы с коллекцией Map:
set(ключ, значение) — устанавливает значение;
get(ключ) — возвращает значение;
has(ключ) — проверяет наличие переданного ключа;
values() — возвращает итератор всех значений коллекции;
keys() — возвращает итератор всех ключей коллекции;
entries() — возвращает  итератор  пар  [ключ, значение];
delete(ключ) — удаляет конкретное значение;
clear() — полностью очищает коллекцию;
forEach(колбэк) — перебирает ключи и значения коллекции.

Содержит свойство size для получения количества значений в коллекции.

​​Кэширование длины массива в цикле

Когда мы только начинаем изучение JavaScript, то обычно используем стандартную конструкцию цикла for: for (let i = 0; i < array.length; i++) {}

Но такой шаблон не совсем оптимален. На каждой итерации цикла длина массива array будет высчитываться заново. Иногда это полезно, но в большинстве случаев эффективнее будет ее кэшировать. Для этого создадим переменную length вместе с определением счетчика цикла. for (let i = 0, length = array.length; i < length; i++) {}

Такой цикл будет работать немного эффективнее.

Структура каталогов React приложения

Структура каталогов верхнего уровня будет следующей:

assets — глобальные статические assets, такие как изображения, SVG, логотип компании и т. д.
components — глобальные общие/повторно используемые компоненты, такие как макет (оболочки, навигация), компоненты формы, кнопки
services — модули JavaScript
store – глобальное хранилище Redux
utils — Утилиты, помощники, константы и т. д.
views — также могут называться «страницами», здесь будет содержаться большая часть приложения.

Подготовка окружения React-приложения: VSCode, Prettier, ESLint, Stylelint, Husky

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

concat()
метод concat() позволяет объединить две или несколько строк.

Применение для fixed позиционирования

Чаще всего нам нужны координаты для позиционирования чего-либо.

Чтобы показать что-то около нужного элемента, мы можем вызвать getBoundingClientRect, чтобы получить его координаты элемента, а затем использовать CSS-свойство position вместе с left/top (или right/bottom).

Например, функция createMessageUnder(elem, html) выше показывает сообщение под элементом elem.

#браузер #документ #координаты

Всем привет, в этих урокам мы разберемся с концепциями работы JavaScript, а также узнаем как: работать с консолью браузера, создать правильную структуру, работать с переменными и рассмотрим некоторые типы данных.

На канале регулярно появляются новые уроки 2-3 раза в неделю, в том числе и по JavaScript )

Отмена анимации

Чтобы отменить вызов requestAnimationFrame, тебе нужен идентификатор, который он вернул при последнем вызове. Это параметр, который ты используешь для cancelAnimationFrame. В данном примере запускается некоторая гипотетическая анимация, которая приостанавливается через одну секунду.

addEventListener

Метод EventTarget.addEventListener() регистрирует определённый обработчик события, вызванного на EventTarget.

Данный метод позволяет "вешать" несколько обработчиков одного и того же события на один элемент. Именно благодаря этому является более предпочтительным вариантом обработки событий.

#браузер #документ #события

Навигация только по элементам

Навигационные свойства, описанные выше, относятся ко всем узлам в документе. В частности, в childNodes находятся и текстовые узлы и узлы-элементы и узлы-комментарии, если они есть.

Но для большинства задач текстовые узлы и узлы-комментарии нам не нужны. Мы хотим манипулировать узлами-элементами, которые представляют собой теги и формируют структуру страницы.

Поэтому давайте рассмотрим дополнительный набор ссылок, которые учитывают только узлы-элементы.

Эти ссылки похожи на те, что раньше, только в ряде мест стоит слово Element:
- children – коллекция детей, которые являются элементами.
- firstElementChild, lastElementChild – первый и последний дочерний элемент.
- previousElementSibling, nextElementSibling – соседи-элементы.
- parentElement – родитель-элемент.