-
- - - \n- \n- \n- \n- \n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-04-17T16:10:36Z","dateModified":"2026-04-17T16:10:36Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1829},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2543","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2543","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2543","headline":"🤔 Как уничтожить объект web worker? В JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать…","articleBody":"🤔 Как уничтожить объект web worker?\n\nВ JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован.\n\n🚩Зачем уничтожать Web Worker?\n\nWeb Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется.\n\n🚩Как использовать `terminate()`?\n\nВы вызываете метод terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.\n// Создаем worker\nconst myWorker = new Worker('worker.js');\n\n// Выполняем какие-то операции через worker\nmyWorker.postMessage('Hello, worker!');\n\n// Завершаем работу worker, когда он больше не нужен\nmyWorker.terminate();\n\n🚩Важно помнить\n\n1⃣После вызова terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения.\n2⃣Если есть обработчики событий, привязанные к worker (например, onmessage), они автоматически удаляются.\n3⃣Доступ к worker после вызова terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.\nconst worker = new Worker('worker.js');\n\n// Отправляем сообщение\nworker.postMessage('Start working');\n\n// Завершаем работу worker\nworker.terminate();\n\n// Попытка отправить сообщение после уничтожения worker\nworker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен\n\n🚩 Когда еще уничтожается worker?\n\nЕсли вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-04-17T09:05:41Z","dateModified":"2026-04-17T09:05:41Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2128},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2542","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2542","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2542","headline":"🤔 Как браузер парсит HTML-файл? HTML читается построчно, из него создаётся дерево DOM, параллельно анализирую…","articleBody":"🤔 Как браузер парсит HTML-файл?\n\nHTML читается построчно, из него создаётся дерево DOM, параллельно анализируются стили и скрипты. Скрипты могут блокировать парсинг, если не имеют async или defer.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-04-16T16:10:37Z","dateModified":"2026-04-16T16:10:37Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1956},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2541","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2541","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2541","headline":"🤔 Что такое dispatch? В контексте Frontend-разработки, dispatch — это метод, который отправляет (диспатчит) с…","articleBody":"🤔 Что такое dispatch?\n\nВ контексте Frontend-разработки, dispatch — это метод, который отправляет (диспатчит) событие или действие. В зависимости от технологии dispatch может использоваться в Redux, EventTarget или React. \n\n🟠`dispatch` в Redux \nВ Redux dispatch(action) используется для отправки (диспатча) действий (actions) в хранилище (store). \nimport { useDispatch } from 'react-redux';\n\nconst Counter = () => {\n const dispatch = useDispatch();\n\n return (\n dispatch({ type: 'INCREMENT' })}>\n Увеличить\n \n );\n};\n\n🟠`dispatchEvent` в JavaScript (EventTarget API) \nВ нативном JavaScript метод dispatchEvent() используется для генерации пользовательских событий на DOM-элементах. \nconst button = document.querySelector(\"button\");\n\n// Создаём событие\nconst event = new Event(\"myCustomEvent\");\n\n// Добавляем слушатель событий\nbutton.addEventListener(\"myCustomEvent\", () => {\n console.log(\"Событие вызвано!\");\n});\n\n// Диспатчим событие\nbutton.dispatchEvent(event); // Выведет: \"Событие вызвано!\"\n\n🟠`dispatch` в React (useReducer)\nВ React-хуке useReducer dispatch используется для изменения состояния компонента. \nimport { useReducer } from 'react';\n\nconst reducer = (state, action) => {\n switch (action.type) {\n case 'increment':\n return { count: state.count + 1 };\n default:\n return state;\n }\n};\n\nconst Counter = () => {\n const [state, dispatch] = useReducer(reducer, { count: 0 });\n\n return (\n dispatch({ type: 'increment' })}>\n {state.count}\n \n );\n};\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-04-16T09:05:36Z","dateModified":"2026-04-16T09:05:36Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2126},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2540","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2540","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2540","headline":"🤔 Какие известны способы центрирования? 1. Текстовое выравнивание: text-align: center;. 2. Flexbox: display:…","articleBody":"🤔 Какие известны способы центрирования?\n\n1. Текстовое выравнивание: text-align: center;.\n2. Flexbox: display: flex; justify-content: center; align-items: center;.\n3. Grid: display: grid; place-items: center;.\n4. Абсолютное позиционирование: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);.\n5. Вертикальное центрирование: line-height для текста.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-04-15T16:10:41Z","dateModified":"2026-04-15T16:10:41Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1951},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":15}]}}]}🤔
Что такое ES-модули?
ES-модули (ECMAScript Modules) — это стандартная система модулей в JavaScript. Позволяют экспортировать и импортировать переменные, функции, классы между файлами с помощью export и import. Они поддерживаются нативно в современных браузерах и Node.js.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний 🤔 Для чего нужна методология в html?
Методология в HTML (и в веб-разработке в целом) нужна для организации и структурирования кода так, чтобы он был понятным, поддерживаемым и масштабируемым. Она помогает разработчикам работать в команде, избегать хаоса в проекте и ускоряет развитие продукта, делая код простым для чтения и изменения.
🚩Зачем это нужно
🟠
Понятность кода
Без единого подхода код может стать "кашей" из классов и тегов. Методология помогает дать элементы структуры, которые легко понять не только автору кода, но и другим разработчикам.
🟠
Снижение ошибок
Если есть четкие правила, уменьшается риск дублирования, неправильных имен или конфликтов стилей.
🟠
Упрощение масштабирования
В больших проектах количество HTML-структур растет, и без системного подхода будет сложно добавлять новые элементы, не нарушая старые.
🟠
Легкость сопровождения
С методологией легко найти нужные элементы и вносить изменения.
🚩Примеры популярных методологий
🟠
БЭМ (Блок, Элемент, Модификатор)
Одна из самых популярных методологий для HTML и CSS.
- Она предлагает структурировать классы так:
- Блок: независимый компонент (например,
menu).
- Элемент: часть блока (например,
menu__item).
- Модификатор: вариант блока или элемента (например,
menu__item--active).
Пример кода
<div class="menu">
<div class="menu__item menu__item--active">Главная</div>
<div class="menu__item">О нас</div>
<div class="menu__item">Контакты</div>
</div>
🟠
Atomic Design
Основана на создании интерфейсов из "атомов" (простейшие элементы, например, кнопки), "молекул" (комбинации атомов, например, форма) и "организмов" (сложные компоненты, например, шапка сайта).
Пример
<!-- Атом -->
<button class="button">Клик</button>
<!-- Молекула -->
<div class="form">
<label class="form__label">Имя</label>
<input class="form__input" type="text">
</div>
🟠
SMACSS (Scalable and Modular Architecture for CSS)
Делит код на модули (например, глобальные стили, компоненты, утилиты) и предлагает поддерживать независимость и минимизацию дублирования кода.
Ставь 👍 и забирай 📚 Базу знаний 🤔 Как строить сетку сайта?
Сетку можно строить несколькими способами:
1. CSS Flexbox — для одномерной разметки (по строке или колонке).
2. display: flex;
3. flex-direction: row;
4. justify-content: space-between;
5. CSS Grid — для двумерных сеток (и строки, и колонки).
6. display: grid;
7. grid-template-columns: repeat(3, 1fr);
8. gap: 20px;
9. CSS-фреймворки — Bootstrap, Tailwind и др. предлагают готовые сетки и классы (col-, grid-cols- и пр.).
10. Media Queries — адаптивные сетки с изменением структуры под разные экраны.
Сетки — основа современного responsive-дизайна. Grid используется всё чаще из-за гибкости и контроля.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний 🤔
Как изменить стили кнопок с атрибутом disabled?
C атрибутом
disabled, используя селекторы атрибутов. Селектор
[disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор
:disabled позволяет выбрать все элементы, которые находятся в состоянии
disabled.
🚩Пример использования
🟠Селектора [disabled]
Этот селектор выбирает все элементы, у которых присутствует атрибут
disabled.
button[disabled] {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */
opacity: 0.6; /* Уменьшает непрозрачность */
}
🟠
Псевдокласса :disabled
Этот селектор выбирает все элементы, которые находятся в состоянии
disabled.
button:disabled {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}🚩Полные примеры
С HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabled Button Styling</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button>Active Button</button>
<button disabled>Disabled Button</button>
</body>
</html>
С CSS
/* Стили для активных кнопок */
button {
background-color: blue;
color: white;
border: 1px solid #000;
padding: 10px 20px;
cursor: pointer;
}
/* Стили для кнопок с атрибутом disabled */
button[disabled] {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}
/* Альтернативный способ с использованием псевдокласса :disabled */
button:disabled {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}
🟠
Комбинированный подход
Вы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей.
/* Стили для кнопок с классом .special, которые имеют атрибут disabled */
button.special[disabled] {
background-color: darkgray;
color: black;
border: 1px dashed #999;
cursor: not-allowed;
opacity: 0.7;
}Ставь 👍 и забирай 📚 Базу знаний 🤔 Зачем нужна семантика?
Семантическая разметка улучшает:
- SEO – поисковики лучше понимают контент (<article>, <section>, <nav> и т.д.).
- Доступность (Accessibility) – помогает экранным читалкам понимать смысл элементов.
- Читаемость кода – упрощает поддержку и понимание структуры.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний 🤔 Как уничтожить объект web worker?
В JavaScript, чтобы уничтожить объект
Web Worker, необходимо использовать метод
terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова
terminate() объект worker больше не может быть использован.
🚩
Зачем уничтожать Web Worker?
Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется.
🚩
Как использовать `terminate()`?
Вы вызываете метод
terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.
// Создаем worker
const myWorker = new Worker('worker.js');
// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');
// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();
🚩
Важно помнить
1⃣После вызова
terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения.
2⃣Если есть обработчики событий, привязанные к worker (например,
onmessage), они автоматически удаляются.
3⃣Доступ к worker после вызова
terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.
const worker = new Worker('worker.js');
// Отправляем сообщение
worker.postMessage('Start working');
// Завершаем работу worker
worker.terminate();
// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен🚩 Когда еще уничтожается worker?
Если вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике.
Ставь 👍 и забирай 📚 Базу знаний 🤔 Как получается, что на всех элементах есть одни и те же свойства (class, id, и т.д.)?
Потому что все элементы в DOM наследуют от общего прототипа — Element, Node, EventTarget, и имеют общее API. Это часть архитектуры DOM и браузерной реализации.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний Ad
Как frontend-разработчику вырасти в ЗП?
День сурка frontend-разработчика выглядит так
Зарплата замерла, задачи — бесконечный повтор, растет только кол-во бессмысленных созвонов
Откликаешься на вакансии — отвечают только ноунеймы, на собесах закидывают странными алгоритмами «на скорость».
И самое бесящее — пока буксуешь, кто-то вокруг спокойно забирает офферы в Яндекс и VK...
Ты тоже можешь получить оффер в компанию, в которой тебя будут ценить и хорошо платить.
👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.
В своем канале:
👉Объясняю,
как проходить HR-фильтр и превращать отклики в реальные приглашения
👉Помогаю найти мотивацию, борюсь
убеждениями, которые мешают развиваться
👉На примерах объясняю
как проходить собеседования, включая техничку
👉
Разбираю резюме и делюсь лайфхаками, например
как аккуратно “пинговать” рекрутеров
А еще регулярно публикую полезные материалы:
▪️ Задачи, на которых валяться кандидаты
▪️База по микрофронтам
▪️ Подборка из 100+ каналов с вакансиями для разработчиков
▪️100 вопросов, которые точно помогут тебе на собеседовании
▪️ Чек лист проверки своего резюме
А еще у меня множество успешных кейсов и трогательных отзывов, найти их можно
в канале.
Реклама, erid: 2W5zFGM7M3o ИП Галактионов Тихон Витальевич, ИНН 771618975809 🤔
В чем различие методов call apply bind?
Методы call, apply и bind принадлежат к функциональному объекту
Function и используются для указания контекста
this при вызове функции. Хотя все три метода позволяют контролировать значение
this внутри функции, между ними существуют ключевые различия в способе использования и поведении.
🚩
Сall
Вызывает функцию, явно устанавливая
this в первом аргументе. Остальные аргументы передаются в вызываемую функцию как есть.
function greet(message, name) {
console.log(${message}, ${name}. This is ${this});
}
greet.call("Earth", "Hello", "Alice"); // "Hello, Alice. This is Earth"
🚩
Apply
Очень похож на
call, но принимает аргументы в виде массива, а не по отдельности.
function greet(message, name) {
console.log(
${message}, ${name}. This is ${this}
);
}
greet.apply("Earth", ["Hello", "Alice"]); // "Hello, Alice. This is Earth"
🚩
Bind
Создаёт новую функцию, которая, когда она вызывается, имеет установленный контекст
this, указанный в первом аргументе. В отличие от
call и
apply,
bind не вызывает функцию сразу, а возвращает новую функцию, которую можно вызвать позже.
function greet(message, name) {
console.log(
${message}, ${name}. This is ${this}
);
}
const greetEarth = greet.bind("Earth", "Hello", "Alice");
greetEarth(); // "Hello, Alice. This is Earth"Ставь 👍 и забирай 📚 Базу знаний 🤔 Что такое семантика?
Семантика — это значение или смысл, который несет элемент или структура кода, указывая на её предназначение. В HTML семантические теги (например, <header>, <footer>, <article>) улучшают читаемость кода и помогают поисковым системам и браузерам лучше интерпретировать его. Семантика кода улучшает доступность и упрощает его поддержку.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний 🤔 Как мы будем через js анимировать что либо?
В JavaScript есть три основных способа создания анимаций:
CSS-анимации (
transition,
@keyframes) + изменение классов через JS
Метод
requestAnimationFrame()
Использование библиотек (GSAP, Anime.js, Velocity.js)
🟠
CSS-анимации + управление через JS
Самый простой способ — использовать CSS-анимации, а в JS только добавлять или убирать классы.
<button onclick="toggleBox()">Анимировать</button>
<div id="box"></div>
<style>
#box {
width: 100px;
height: 100px;
background: red;
transition: transform 0.5s ease-in-out;
}
.move {
transform: translateX(200px);
}
</style>
<script>
function toggleBox() {
document.getElementById("box").classList.toggle("move");
}
</script>
🟠
`requestAnimationFrame()` — лучший способ в чистом JS
Если нужно более гибкое управление анимацией, используем
requestAnimationFrame().
<button onclick="startAnimation()">Старт</button>
<div id="box"></div>
<style>
#box {
width: 50px;
height: 50px;
background: blue;
position: absolute;
}
</style>
<script>
let position = 0;
let animationId;
function animate() {
position += 5; // Двигаем на 5px за кадр
document.getElementById("box").style.transform = `translateX(${position}px)`;
if (position < 300) { // Останавливаем, когда достигнет 300px
animationId = requestAnimationFrame(animate);
}
}
function startAnimation() {
cancelAnimationFrame(animationId); // Останавливаем предыдущую анимацию
position = 0;
animate();
}
</script>
🟠
Библиотеки (GSAP, Anime.js, Velocity.js)
Если нужно делать мощные анимации с минимальным кодом, лучше использовать библиотеку.
<button onclick="animateBox()">Анимировать</button>
<div id="box"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
function animateBox() {
gsap.to("#box", { x: 300, rotation: 360, duration: 2, ease: "elastic.out(1,0.3)" });
}
</script>Ставь 👍 и забирай 📚 Базу знаний 🤔 Arrow functions — to avoid using bind — чем от обычной отличается?
Стрелочные функции автоматически "привязывают" this к контексту, в котором были объявлены. В отличие от обычных функций, где this зависит от вызова, стрелочная берёт его из лексического окружения.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний 🤔 Что такое элемент datalist в html 5? <datalist> — это тег в HTML5, который позволяет создать выпадающий список вариантов для
<input>. Он помогает пользователям быстрее вводить данные, предлагая автодополнение, но в отличие от
<select>, список остаётся необязательным — пользователь может ввести своё значение.
🚩
Как работает `<datalist>`?
Пример: автодополнение города
<label for="city">Выберите город:</label>
<input list="cities" id="city" name="city">
<datalist id="cities">
<option value="Москва">
<option value="Санкт-Петербург">
<option value="Казань">
<option value="Новосибирск">
</datalist>
🚩
Можно ли использовать с `type="number"`?
Нет,
<datalist> не работает с
type="number".
Но с
type="text" и
type="email" — работает отлично.
<input type="number" list="numbers">
<datalist id="numbers">
<option value="10">
<option value="20">
</datalist>
Рабочий вариант
<input type="text" list="numbers">Ставь 👍 и забирай 📚 Базу знаний 🤔 С помощью чего можно рассчитать идентификатор в JS?
Можно использовать:
- Счётчики (let id = 1);
- UUID-библиотеки (например, uuid);
- Временные метки ( Date.now ());
- Хеш-функции от строки или состояния объекта.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний 🤔
Зачем нужен ref?
В React
ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React.
🚩
Основные случаи использования `ref`
Доступ к DOM-элементам:
Использование в сторонних библиотеках:
Сохранение состояния вне дерева компонентов:
🚩
Примеры использования `ref`
Доступ к DOM-элементам
Установка фокуса на элемент
import React, { useRef, useEffect } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// Установить фокус на текстовое поле
inputEl.current.focus();
};
return (
<div>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Установить фокус</button>
</div>
);
}
export default TextInputWithFocusButton;
Получение размеров элемента
Измерение элемента:
import React, { useRef, useEffect, useState } from 'react';
function MeasureDiv() {
const divRef = useRef(null);
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
useEffect(() => {
if (divRef.current) {
const { width, height } = divRef.current.getBoundingClientRect();
setDimensions({ width, height });
}
}, []);
return (
<div>
<div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
Измеряемый элемент
</div>
<p>Ширина: {dimensions.width}px, Высота: {dimensions.height}px</p>
</div>
);
}
export default MeasureDiv;
Использование в классовых компонентах
Доступ к методам компонента:
import React, { Component } from 'react';
class CustomComponent extends Component {
customMethod() {
console.log('Метод компонента вызван');
}
render() {
return <div>Custom Component</div>;
}
}
class ParentComponent extends Component {
constructor(props) {
super(props);
this.customComponentRef = React.createRef();
}
handleClick = () => {
this.customComponentRef.current.customMethod();
};
render() {
return (
<div>
<CustomComponent ref={this.customComponentRef} />
<button onClick={this.handleClick}>Вызвать метод компонента</button>
</div>
);
}
}
export default ParentComponent;
🚩
Важно помнить
Прямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо.
Когда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам.
Состояние приложения и его логика должны по возможности управляться через состояния и пропсы React.
ref следует использовать для случаев, которые не могут быть решены этим способом.
Ставь 👍 и забирай 📚 Базу знаний 🤔 Перечислите блочные элементы, которые вам известны (хотя бы 5).
- <div>
- <p>
- <section>
- <article>
- <header>
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний 🤔 Как уничтожить объект web worker?
В JavaScript, чтобы уничтожить объект
Web Worker, необходимо использовать метод
terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова
terminate() объект worker больше не может быть использован.
🚩
Зачем уничтожать Web Worker?
Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется.
🚩
Как использовать `terminate()`?
Вы вызываете метод
terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.
// Создаем worker
const myWorker = new Worker('worker.js');
// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');
// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();
🚩
Важно помнить
1⃣После вызова
terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения.
2⃣Если есть обработчики событий, привязанные к worker (например,
onmessage), они автоматически удаляются.
3⃣Доступ к worker после вызова
terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.
const worker = new Worker('worker.js');
// Отправляем сообщение
worker.postMessage('Start working');
// Завершаем работу worker
worker.terminate();
// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен🚩 Когда еще уничтожается worker?
Если вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике.
Ставь 👍 и забирай 📚 Базу знаний 🤔 Как браузер парсит HTML-файл?
HTML читается построчно, из него создаётся дерево DOM, параллельно анализируются стили и скрипты. Скрипты могут блокировать парсинг, если не имеют async или defer.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний 🤔
Что такое dispatch?
В контексте Frontend-разработки,
dispatch — это метод, который отправляет (диспатчит) событие или действие. В зависимости от технологии
dispatch может использоваться в Redux, EventTarget или React.
🟠
`dispatch` в Redux
В Redux
dispatch(action) используется для отправки (диспатча) действий (actions) в хранилище (store).
import { useDispatch } from 'react-redux';
const Counter = () => {
const dispatch = useDispatch();
return (
<button onClick={() => dispatch({ type: 'INCREMENT' })}>
Увеличить
</button>
);
};
🟠
`dispatchEvent` в JavaScript (EventTarget API)
В нативном JavaScript метод
dispatchEvent() используется для генерации пользовательских событий на DOM-элементах.
const button = document.querySelector("button");
// Создаём событие
const event = new Event("myCustomEvent");
// Добавляем слушатель событий
button.addEventListener("myCustomEvent", () => {
console.log("Событие вызвано!");
});
// Диспатчим событие
button.dispatchEvent(event); // Выведет: "Событие вызвано!"
🟠
`dispatch` в React (useReducer)
В React-хуке
useReducer dispatch используется для изменения состояния компонента.
import { useReducer } from 'react';
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
default:
return state;
}
};
const Counter = () => {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<button onClick={() => dispatch({ type: 'increment' })}>
{state.count}
</button>
);
};Ставь 👍 и забирай 📚 Базу знаний 🤔
Какие известны способы центрирования?
1. Текстовое выравнивание: text-align: center;.
2. Flexbox: display: flex; justify-content: center; align-items: center;.
3. Grid: display: grid; place-items: center;.
4. Абсолютное позиционирование: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);.
5. Вертикальное центрирование: line-height для текста.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний نمایش بیشتر
شبکه: