Frontend | Вопросы собесов

Відкрити в Telegram

Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @easyoffer_adv

Сітка:easyoffer Росія36 813 Технології та додатки7 135...

📈 Аналітичний огляд Telegram-каналу Frontend | Вопросы собесов

Канал Frontend | Вопросы собесов (@easy_javascript_ru) у мовному сегменті Російська є активним учасником. На даний момент спільнота об'єднує 17 873 підписників, посідаючи 7 135 місце в категорії Технології та додатки та 36 813 місце у регіоні Росія.

📊 Показники аудиторії та динаміка

З моменту свого створення невідомо, проект продемонстрував стрімке зростання, зібравши аудиторію у 17 873 підписників.

За останніми даними від 27 серпня, 2026, канал демонструє стабільну активність. Хоча за останні 30 днів спостерігається зміна кількості учасників на -162, а за останні 24 години на -8, загальне охоплення залишається високим.

Статус верифікації: Не верифікований
Рівень залученості (ER): Середній показник залученості аудиторії становить 6.80%. Протягом перших 24 годин після публікації контент зазвичай збирає 4.51% реакцій від загальної кількості підписників.
Охоплення публікацій: В середньому кожен допис отримує 1 216 переглядів. Протягом першої доби публікація в середньому набирає 806 переглядів.
Реакції та взаємодія: Аудиторія активно підтримує контент: середня кількість реакцій на один пост – 4.
Тематичні інтереси: Контент зосереджений навколо ключових тем, таких як ставь, браузер, html, border, flex.

📝 Опис та контентна політика

Автор описує ресурс як майданчик для висловлення суб'єктивної думки:
“Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @easyoffer_adv”

Завдяки високій частоті оновлень (останні дані отримано 28 серпня, 2026), канал підтримує актуальність та високий рівень охоплення публікацій. Аналітика показує, що аудиторія активно взаємодіє з контентом, що робить його важливою точкою впливу в категорії Технології та додатки.

17 873

Підписники

-824 години

-437 днів

-16230 день

1 216

Перегляди допису

~ 80624 години

~ 91948 годин

6.80%

Коефіцієнт залучення

~ 3

Дописів на день

Ads index

beta

Архів дописів

\n\n🚩Какие события есть в Drag and Drop? \n\nОсновные события: \ndragstart — когда начали тянуть элемент. \ndrag — когда элемент двигается (срабатывает много раз). \ndragenter — когда курсор заходит в зону сброса. \ndragover — когда элемент находится над зоной (нужно preventDefault()). \ndragleave — когда курсор покидает зону сброса. \ndrop — когда элемент отпущен в зоне сброса. \ndragend — когда перетаскивание завершено (даже если не сбросили). \n\n🚩Где используется Drag and Drop? \n\n- Перетаскивание файлов в (например, загрузка изображений). \n- Канбан-доски, как в Trello. \n- Онлайн-редакторы, как Figma. \n- Игры, где можно перемещать предметы. \n\n🚩Можно ли сделать Drag and Drop без HTML5 API? \n\nДа, можно использовать другие методы: \nЧерез события мыши (mousedown, mousemove, mouseup). \nЧерез CSS position: absolute и transform. \nЧерез JS-библиотеки (Sortable.js, React DnD, Draggable.js). \nНапример, в мобильных браузерах стандартный Drag and Drop API плохо работает, и там лучше использовать события touchstart, touchmove, touchend.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-03-11T09:05:41Z","dateModified":"2026-03-11T09:05:41Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":2381},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":16},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":22}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2453","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2453","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2453","headline":"🤔 Как мониторить ошибки JS? - Через консоль браузера (DevTools); - Используя системы логирования: Sentry, Log…","articleBody":"🤔 Как мониторить ошибки JS?\n\n- Через консоль браузера (DevTools);\n- Используя системы логирования: Sentry, LogRocket, Bugsnag;\n- Локальный лог с console.error и передачей на сервер;\n- Performance API, window.onerror, unhandledrejection.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-03-10T16:10:40Z","dateModified":"2026-03-10T16:10:40Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":2192},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2452","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2452","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2452","headline":"🤔 Расскажи про операторы сравнения Операторы сравнения в JavaScript позволяют сравнивать значения и возвращаю…","articleBody":"🤔 Расскажи про операторы сравнения\n\nОператоры сравнения в JavaScript позволяют сравнивать значения и возвращают true или false. Они часто используются в условиях (if, while) и тернарных операторах. \n\n🚩Разница между `==` и `===` \n\n🟠`==` (нестрогое сравнение)\nПри == JavaScript приводит типы перед сравнением. \nconsole.log(5 == \"5\"); // true (строка \"5\" приводится к числу)\nconsole.log(0 == false); // true (false → 0)\nconsole.log(null == undefined); // true (особый случай)\n\n🟠`===` (строгое сравнение)\nПри === сравниваются и значение, и тип.\nconsole.log(5 === \"5\"); // false (разные типы)\nconsole.log(0 === false); // false (число !== логический тип)\nconsole.log(null === undefined); // false (разные типы)\n\n🚩🔹 Логические значения в сравнении \n\nJavaScript приводит значения к true или false \nconsole.log(1 == true); // true (1 → true)\nconsole.log(0 == false); // true (0 → false)\nconsole.log(\"\" == false); // true (\"\" → false)\nconsole.log([] == false); // true (пустой массив → false)\nconsole.log(null == false); // false (null не приводится к false)\n\n🚩Особые случаи \n\n- null == undefined → true (они считаются \"похожими\"). \n- null === undefined → false (разные типы). \n- null >= 0 → true (null превращается в 0). \n- null > 0 → false (но null >= 0 – true, странно, да?). \nconsole.log(null == undefined); // true\nconsole.log(null >= 0); // true\nconsole.log(null > 0); // false (WTF?)\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-03-10T09:05:38Z","dateModified":"2026-03-10T09:05:38Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":2451},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2451","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2451","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2451","headline":"Покупайте Samsung Galaxy A серию на Яндекс Маркете Узнать больше #реклама market.yandex.ru О рекламодателе","articleBody":"Покупайте Samsung Galaxy A серию\n\nна Яндекс Маркете \n\nУзнать больше\n\n#реклама \nmarket.yandex.ru\nО рекламодателе","datePublished":"2026-03-10T03:11:22Z","dateModified":"2026-03-12T01:11:38Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/5296329464004416052?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1506},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2450","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2450","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2450","headline":"🤔 Для чего необходим атрибут rel тега ? Атрибут rel (relationship) указывает тип связи между текущим до…","articleBody":"🤔 Для чего необходим атрибут rel тега ?\n\nАтрибут rel (relationship) указывает тип связи между текущим документом и подключаемым ресурсом. Примеры:\n- stylesheet — для подключения CSS;\n- icon — для favicon;\n- preload, dns-prefetch — для оптимизации загрузки.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-03-09T16:10:39Z","dateModified":"2026-03-09T16:10:39Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":2250},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":15},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2449","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2449","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2449","headline":"🤔 Что делает omit? omit – это функция, которая удаляет указанные ключи из объекта и возвращает новый объект б…","articleBody":"🤔 Что делает omit?\n\nomit – это функция, которая удаляет указанные ключи из объекта и возвращает новый объект без этих ключей. \n\nВ JavaScript нет встроенного omit, но его можно реализовать с помощью деструктуризации и методов Object.fromEntries() или reduce(). \n\nРеализация omit с Object.fromEntries() (современный способ)\nfunction omit(obj, keys) {\n return Object.fromEntries(\n Object.entries(obj).filter(([key]) => !keys.includes(key))\n );\n}\n\nconst user = { name: \"Alice\", age: 25, password: \"123456\" };\nconst safeUser = omit(user, [\"password\"]); \n\nconsole.log(safeUser); // { name: \"Alice\", age: 25 }\n\nРеализация omit с reduce() (альтернативный способ)\nfunction omit(obj, keys) {\n return Object.keys(obj).reduce((acc, key) => {\n if (!keys.includes(key)) acc[key] = obj[key];\n return acc;\n }, {});\n}\n\nconst data = { a: 1, b: 2, c: 3 };\nconsole.log(omit(data, [\"b\"])); // { a: 1, c: 3 }\n\nЕсли используете Lodash, можно просто вызвать \nimport { omit } from \"lodash\";\n\nconst user = { name: \"Alice\", age: 25, password: \"123456\" };\nconst safeUser = omit(user, [\"password\"]);\n\nconsole.log(safeUser); // { name: \"Alice\", age: 25 }\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-03-09T09:05:38Z","dateModified":"2026-03-09T09:05:38Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":2463},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":17}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2448","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2448","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2448","headline":"IT-магистратура ИТМО, МИФИ в партнёрстве с Яндексом Освойте высокооплачиваемую IT-профессию. Актуальные прогр…","articleBody":"IT-магистратура ИТМО, МИФИ в партнёрстве с Яндексом\n\nОсвойте высокооплачиваемую IT-профессию. Актуальные программы ИТМО и МФТИ 2026 года, диплом гособразца, много практики от Яндекса. Гибкий график, обучение полностью онлайн, господдержка оплаты, отсрочка от армии \n\nУзнать больше\n\n#реклама 16+\npracticum.yandex.ru\nО рекламодателе","datePublished":"2026-03-08T23:15:36Z","dateModified":"2026-03-10T21:27:16Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n2.tlmtr.cc/p/5291825864377048243?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1540}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2447","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2447","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2447","headline":"🤔 Что известно о жизненном цикле компонента Vue? Жизненный цикл включает этапы: инициализация (создание и нас…","articleBody":"🤔 Что известно о жизненном цикле компонента Vue? \n\nЖизненный цикл включает этапы: инициализация (создание и настройка компонента), монтирование (рендеринг в DOM), обновление (перерисовка при изменении данных) и уничтожение (удаление из DOM). Методы жизненного цикла (mounted, updated, destroyed) позволяют выполнять действия на каждом этапе.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-03-08T16:10:38Z","dateModified":"2026-03-08T16:10:38Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":2166},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2446","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2446","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2446","headline":"🤔 Как общаться между iframe и самой страницой? Общение между iframe и родительской страницей может происходит…","articleBody":"🤔 Как общаться между iframe и самой страницой?\n\nОбщение между iframe и родительской страницей может происходить с помощью: \nМетода postMessage (лучший способ) \nДоступа к window.frames или window.parent (если тот же домен) \nПередачи данных через localStorage или cookies \n\n🟠`postMessage` – безопасный способ для разных доменов \nМетод window.postMessage() позволяет передавать сообщения между разными окнами (iframe, popup, другие вкладки) даже если они на разных доменах.\n\n🚩Передача данных из `iframe` в родительскую страницу \n\n*Код в iframe (child.html) \n// Отправляем сообщение родительскому окну\nwindow.parent.postMessage({ type: \"hello\", data: \"Привет, родитель!\" }, \"*\");\n\nКод в родительской странице (index.html) \nwindow.addEventListener(\"message\", (event) => {\n console.log(\"Получено сообщение от iframe:\", event.data);\n});\n\n* в postMessage означает, что сообщение отправляется любому домену. Лучше указывать конкретный, например: \nwindow.parent.postMessage({ type: \"hello\" }, \"https://example.com\");\n\n🚩Передача данных из родителя в `iframe` \n\nКод в родительской странице (index.html) \nconst iframe = document.getElementById(\"myIframe\");\n\n// Ждём, когда iframe загрузится\niframe.onload = () => {\n iframe.contentWindow.postMessage({ type: \"greeting\", data: \"Привет, iframe!\" }, \"*\");\n};\n\nКод в iframe (child.html) \nwindow.addEventListener(\"message\", (event) => {\n console.log(\"Получено сообщение от родителя:\", event.data);\n});\n\n🚩Доступ к `window.frames` и `window.parent` (только если тот же домен!) \n\nЕсли iframe и основная страница находятся на одном домене, можно обращаться к их window напрямую.\nРодительская страница → iframe \nconst iframe = document.getElementById(\"myIframe\");\n\n// Получаем объект `window` внутри `iframe`\niframe.contentWindow.document.body.style.backgroundColor = \"lightblue\";\n\niframe → Родительская страница \nconsole.log(window.parent.document.title); // Доступ к заголовку страницы\n\n🚩`localStorage` или `cookies` (если оба окна на одном домене) \n\nМожно сохранять данные в localStorage или cookies, а другая сторона будет их читать. \nЗапись в localStorage из iframe \nlocalStorage.setItem(\"message\", \"Привет от iframe!\");\n\nЧтение localStorage в родительской странице \nconsole.log(localStorage.getItem(\"message\")); // \"Привет от iframe!\"\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-03-08T09:05:38Z","dateModified":"2026-03-08T09:05:38Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":2243},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":15},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":19}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2445","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2445","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2445","headline":"🤔 В каком случае важен порядок: при копировании объекта или массива? - Для массива порядок важен всегда, так…","articleBody":"🤔 В каком случае важен порядок: при копировании объекта или массива?\n\n- Для массива порядок важен всегда, так как позиции имеют смысл (это индексированная структура).\n- Для объекта порядок чаще не имеет значения, но в некоторых случаях (например, при сериализации) он может быть важен, особенно если зависит от порядка вставки.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-03-07T16:10:39Z","dateModified":"2026-03-07T16:10:39Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":1878},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2444","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2444","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2444","headline":"🤔 Какие преимущества у di? Dependency Injection (DI) – это паттерн проектирования, который помогает разделять…","articleBody":"🤔 Какие преимущества у di?\n\nDependency Injection (DI) – это паттерн проектирования, который помогает разделять зависимости и делает код гибче, тестируемее и поддерживаемее. Вместо того чтобы создавать зависимости внутри класса, они передаются (инъектируются) извне. \n\n🚩Почему DI полезен? \n\n🟠Уменьшает связность кода (Loose Coupling) \nВместо того чтобы жестко привязывать один модуль к другому, DI передает зависимости снаружи. \nclass UserService {\n constructor() {\n this.db = new Database(); // Прямо создаем зависимость\n }\n\n getUser(id) {\n return this.db.findUserById(id);\n }\n}\n\nС DI (гибкость) \nclass UserService {\n constructor(db) {\n this.db = db; // DI передает зависимость извне\n }\n\n getUser(id) {\n return this.db.findUserById(id);\n }\n}\n\n// Передаем нужную зависимость\nconst database = new Database();\nconst userService = new UserService(database);\n\n🟠Улучшает тестируемость (Unit-тесты проще) \nС DI можно подменять зависимости на заглушки (mock, fake, stub). \nconst userService = new UserService(); // Всегда использует реальную Database\nuserService.getUser(1); // Как протестировать без реальной БД? 🤔\n\nС DI (можно подменить зависимость) \nclass FakeDatabase {\n findUserById(id) {\n return { id, name: \"Тестовый пользователь\" };\n }\n}\n\nconst fakeDb = new FakeDatabase();\nconst userService = new UserService(fakeDb);\n\nconsole.log(userService.getUser(1)); // ✅ Тест без реальной БД\n\n🟠Улучшает расширяемость (легко менять зависимости) \nДопустим, сначала использовали MySQLDatabase, но решили перейти на MongoDatabase. \nclass UserService {\n constructor() {\n this.db = new MySQLDatabase(); // Нужно менять здесь\n }\n}\n\nС DI (добавляем новую зависимость без изменения кода UserService) \nconst db = new MongoDatabase(); // Просто передаем другую зависимость\nconst userService = new UserService(db);\n\n🟠Упрощает управление зависимостями (через DI-контейнеры) \nВ крупных приложениях удобно использовать DI-контейнер (например, InversifyJS для JavaScript/TypeScript). \nimport \"reflect-metadata\";\nimport { Container, injectable, inject } from \"inversify\";\n\n@injectable()\nclass Database {\n findUserById(id) {\n return { id, name: \"База данных\" };\n }\n}\n\n@injectable()\nclass UserService {\n constructor(@inject(Database) db) {\n this.db = db;\n }\n\n getUser(id) {\n return this.db.findUserById(id);\n }\n}\n\n// Настраиваем DI-контейнер\nconst container = new Container();\ncontainer.bind(Database).toSelf();\ncontainer.bind(UserService).toSelf();\n\n// Получаем объект с нужными зависимостями\nconst userService = container.get(UserService);\nconsole.log(userService.getUser(1));\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-03-07T09:05:35Z","dateModified":"2026-03-07T09:05:35Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":1966},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":16}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2443","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2443","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2443","headline":"Нужны 12 человек для работы с искусственным интеллектом Требования: 18-45 лет Работа из дома. График свободны…","articleBody":"Нужны 12 человек для работы с искусственным интеллектом\n\nТребования: 18-45 лет\n\nРабота из дома. График свободный.\n\nПришло задание — изучили — выполнили — получили свои деньги.\n\nДеньги вы получаете в зависимости от сложности задания. Например:\n\nЗа задание могут платить 500-10.000 рублей. \n500 рублей — это около 5-30 минут. \n10 000 руб. это 5-6 часов.\n\nРабота может быть разной: Оживить фото, создать видео, реставрировать старое фото и т.д.\n\n💰 В среднем новичок получает до 150.000 руб в месяц. А опытный может и 300-500т.\n\nМы обучим вас сами:\n\n✅ 3 дня уроков по 30 минут\n✅ Домашки с проверкой и оплатой бонусами\n✅ Платим 10 тыс за каждую выполненную домашку\n\n⚡ Набор заканчивается завтра.\n\nДля регистрации жмите кнопку \"Зарегистрироваться\": \n\nЗарегистрироваться\n\n#реклама 16+\nneuromachina.ru\nО рекламодателе","datePublished":"2026-03-07T03:00:34Z","dateModified":"2026-03-09T01:08:26Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n2.tlmtr.cc/p/5287566768647901699?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1270},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2442","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2442","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2442","headline":"🤔 Какие методы общения имеются в протоколе HTTP? - GET — получение данных; - POST — отправка/создание; - PUT…","articleBody":"🤔 Какие методы общения имеются в протоколе HTTP?\n\n- GET — получение данных;\n- POST — отправка/создание;\n- PUT — обновление;\n- PATCH — частичное обновление;\n- DELETE — удаление;\n- OPTIONS, HEAD, CONNECT, TRACE — вспомогательные методы.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-03-06T16:10:38Z","dateModified":"2026-03-06T16:10:38Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":1921},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":18},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":12}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2441","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2441","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2441","headline":"🤔 Как работают плавающие элементы (floats)? float – это CSS-свойство, которое позволяет \"выплывать\" элементу…","articleBody":"🤔 Как работают плавающие элементы (floats)?\n\nfloat – это CSS-свойство, которое позволяет \"выплывать\" элементу из обычного потока документа и обтекаться другими элементами (например, текстом). \n\nОсновные значения float \n

Это текст, который будет обтекать картинку.

\n.float-img {\n float: left;\n margin-right: 10px;\n}\n\n🟠Почему родитель \"схлопывается\" при `float`? \nКогда внутри div есть только float-элементы, браузер считает, что он пустой, потому что float убирает элемент из потока. \n

Текст обтекает картинку.

\n.container {\n background: lightgray;\n}\n.float-img {\n float: left;\n}\n\nРешение 1: overflow: hidden; \n.container {\n overflow: hidden; /* Контейнер теперь учитывает float-элементы */\n}\n\nРешение 2: clearfix (старый способ) \n.container::after {\n content: \"\";\n display: block;\n clear: both;\n}\n\n🟠Как остановить обтекание (`clear`)? \nЧтобы отменить обтекание, используется clear. \n

Этот текст обтекает картинку.

Этот текст пойдёт на новую строку.

\n.float-img {\n float: left;\n margin-right: 10px;\n}\n.clear {\n clear: both;\n}\n\n🚩Почему `float` устарел и что использовать вместо него? \nРаньше float использовали для создания колонок и сеток, но сегодня его заменили: \nFlexbox (display: flex;) – лучше для адаптивных макетов. \nCSS Grid (display: grid;) – мощный инструмент для сложных сеток. \n.container {\n display: flex;\n align-items: center;\n}\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-03-06T09:05:36Z","dateModified":"2026-03-06T09:05:36Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":2187},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}}]}

17 873

🤔 Можем ли мы получить картинку по HTTP? Да, браузер может получить картинку по HTTP, если сервер отдаёт правильный Content-Type (например, image/jpeg). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 873

Бесплатный онлайн-марафон для руководителей Два дня практических онлайн-встреч с топ-экспертами в области управления — на них расскажем, как выстроить слаженную работу сотрудников и забыть о хаосе с помощью автоматизации. Спикеры Битрикс24, SETTERS EDUCATION, «ВкусВилл» и Максим Батырев расскажут: — как обеспечить рост команды без регламентов и ручного управления — как мотивировать сотрудников и давать обратную связь — как управлять большим потоком задач и контролировать их выполнение — как выстраивать эффективную коммуникацию с командой Бонусы для всех участников: — чек-лист: «Как обезопасить команду от кибермошенников?» — бесплатная консультация по автоматизации командной работы Бесплатно. 17–18 марта. Подробная программа мероприятия и регистрация — на сайте. Узнать больше #реклама 16+ marathon.bitrix24.works О рекламодателе

17 873

Найти работу фронтендера трудно? Ты просто не там ищешь! @job_webdev – огромная база вакансий фронтендеров, пополняющаяся ежедневно Не трать время зря! Подписывайся и ищи заказы уже сейчас🧑‍💻

17 873

Яндекс Практикум: 8 суперсил Руководителя - бесплатно Пройдите бесплатный интенсив Руководитель будущего от Яндекс Практикума и соберите 8 ключевых суперсил современного лидера. Каждый день — одно практическое задание в Telegram-боте, всего 20 минут. Вас ждут кейсы и опыт экспертов из Яндекса, Ozon, СберЗдоровья и других компаний. Прокачайте: - ИИ - Антихрупкость - Мышление роста - Навыки саморазвития - Работа с поколениями - Эффективная обратная связь - Кризисное лидерство - Биохакинг Подойдёт специалистам и действующим руководителям, готовым к новому уровню. Узнать больше #реклама 16+ practicum.yandex.ru О рекламодателе

17 873

🤔 Примеры того, что можно использовать в useEffect помимо запросов на сервер: - Слежение за размерами окна (event listener); - Установка таймера или интервала; - Работа с локальным хранилищем (localStorage); - Изменение мета-тегов или заголовков документа; - Анимации, интеграции с библиотеками (например, chart.js). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 873

🤔 Является ли, drag and drop частью спецификации? Да! Drag and Drop (перетаскивание) — это часть спецификации HTML5. В браузерах есть встроенный API, который позволяет делать перетаскивание элементов без дополнительных библиотек. 🚩Как работает Drag and Drop API? В HTML5 можно сделать элемент перетаскиваемым, добавив ему атрибут draggable="true". Затем срабатывают специальные события, такие как dragstart, drop, dragover и другие.

<div id="drag-item" draggable="true">Перетащи меня</div>
<div id="drop-zone">Сюда можно сбросить</div>

<script>
  const dragItem = document.getElementById("drag-item");
  const dropZone = document.getElementById("drop-zone");

  dragItem.addEventListener("dragstart", (event) => {
    event.dataTransfer.setData("text/plain", "Данные элемента");
  });

  dropZone.addEventListener("dragover", (event) => {
    event.preventDefault(); // Нужно, чтобы разрешить сброс
  });

  dropZone.addEventListener("drop", (event) => {
    event.preventDefault();
    const data = event.dataTransfer.getData("text/plain");
    alert("Элемент сброшен: " + data);
  });
</script>

🚩Какие события есть в Drag and Drop? Основные события: dragstart — когда начали тянуть элемент. drag — когда элемент двигается (срабатывает много раз). dragenter — когда курсор заходит в зону сброса. dragover — когда элемент находится над зоной (нужно preventDefault()). dragleave — когда курсор покидает зону сброса. drop — когда элемент отпущен в зоне сброса. dragend — когда перетаскивание завершено (даже если не сбросили). 🚩Где используется Drag and Drop? - Перетаскивание файлов в <input type="file"> (например, загрузка изображений). - Канбан-доски, как в Trello. - Онлайн-редакторы, как Figma. - Игры, где можно перемещать предметы. 🚩Можно ли сделать Drag and Drop без HTML5 API? Да, можно использовать другие методы: Через события мыши (mousedown, mousemove, mouseup). Через CSS position: absolute и transform. Через JS-библиотеки (Sortable.js, React DnD, Draggable.js). Например, в мобильных браузерах стандартный Drag and Drop API плохо работает, и там лучше использовать события touchstart, touchmove, touchend. Ставь 👍 и забирай 📚 Базу знаний

17 873

🤔 Как мониторить ошибки JS? - Через консоль браузера (DevTools); - Используя системы логирования: Sentry, LogRocket, Bugsnag; - Локальный лог с console.error и передачей на сервер; - Performance API, window.onerror, unhandledrejection. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 873

🤔 Расскажи про операторы сравнения Операторы сравнения в JavaScript позволяют сравнивать значения и возвращают true или false. Они часто используются в условиях (if, while) и тернарных операторах. 🚩Разница между `==` и `===` 🟠`==` (нестрогое сравнение) При == JavaScript приводит типы перед сравнением.

console.log(5 == "5");  // true (строка "5" приводится к числу)
console.log(0 == false); // true (false → 0)
console.log(null == undefined); // true (особый случай)

🟠`===` (строгое сравнение) При === сравниваются и значение, и тип.

console.log(5 === "5"); // false (разные типы)
console.log(0 === false); // false (число !== логический тип)
console.log(null === undefined); // false (разные типы)

🚩🔹 Логические значения в сравнении JavaScript приводит значения к true или false

console.log(1 == true);  // true (1 → true)
console.log(0 == false); // true (0 → false)
console.log("" == false); // true ("" → false)
console.log([] == false); // true (пустой массив → false)
console.log(null == false); // false (null не приводится к false)

🚩Особые случаи - null == undefined → true (они считаются "похожими"). - null === undefined → false (разные типы). - null >= 0 → true (null превращается в 0). - null > 0 → false (но null >= 0 – true, странно, да?).

console.log(null == undefined); // true
console.log(null >= 0); // true
console.log(null > 0);  // false (WTF?)

Ставь 👍 и забирай 📚 Базу знаний

17 873

Покупайте Samsung Galaxy A серию на Яндекс Маркете Узнать больше #реклама market.yandex.ru О рекламодателе

17 873

🤔 Для чего необходим атрибут rel тега <link>? Атрибут rel (relationship) указывает тип связи между текущим документом и подключаемым ресурсом. Примеры: - stylesheet — для подключения CSS; - icon — для favicon; - preload, dns-prefetch — для оптимизации загрузки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 873

🤔 Что делает omit? omit – это функция, которая удаляет указанные ключи из объекта и возвращает новый объект без этих ключей. В JavaScript нет встроенного omit, но его можно реализовать с помощью деструктуризации и методов Object.fromEntries() или reduce(). Реализация omit с Object.fromEntries() (современный способ)

function omit(obj, keys) {
    return Object.fromEntries(
        Object.entries(obj).filter(([key]) => !keys.includes(key))
    );
}

const user = { name: "Alice", age: 25, password: "123456" };
const safeUser = omit(user, ["password"]); 

console.log(safeUser); // { name: "Alice", age: 25 }

Реализация omit с reduce() (альтернативный способ)

function omit(obj, keys) {
    return Object.keys(obj).reduce((acc, key) => {
        if (!keys.includes(key)) acc[key] = obj[key];
        return acc;
    }, {});
}

const data = { a: 1, b: 2, c: 3 };
console.log(omit(data, ["b"])); // { a: 1, c: 3 }

Если используете Lodash, можно просто вызвать

import { omit } from "lodash";

const user = { name: "Alice", age: 25, password: "123456" };
const safeUser = omit(user, ["password"]);

console.log(safeUser); // { name: "Alice", age: 25 }

Ставь 👍 и забирай 📚 Базу знаний

17 873

IT-магистратура ИТМО, МИФИ в партнёрстве с Яндексом Освойте высокооплачиваемую IT-профессию. Актуальные программы ИТМО и МФТИ 2026 года, диплом гособразца, много практики от Яндекса. Гибкий график, обучение полностью онлайн, господдержка оплаты, отсрочка от армии Узнать больше #реклама 16+ practicum.yandex.ru О рекламодателе

17 873

🤔 Что известно о жизненном цикле компонента Vue? Жизненный цикл включает этапы: инициализация (создание и настройка компонента), монтирование (рендеринг в DOM), обновление (перерисовка при изменении данных) и уничтожение (удаление из DOM). Методы жизненного цикла (mounted, updated, destroyed) позволяют выполнять действия на каждом этапе. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 873

🤔 Как общаться между iframe и самой страницой? Общение между iframe и родительской страницей может происходить с помощью: Метода postMessage (лучший способ) Доступа к window.frames или window.parent (если тот же домен) Передачи данных через localStorage или cookies 🟠`postMessage` – безопасный способ для разных доменов Метод window.postMessage() позволяет передавать сообщения между разными окнами (iframe, popup, другие вкладки) даже если они на разных доменах. 🚩Передача данных из `iframe` в родительскую страницу *Код в iframe (child.html)

// Отправляем сообщение родительскому окну
window.parent.postMessage({ type: "hello", data: "Привет, родитель!" }, "*");

Код в родительской странице (index.html)

window.addEventListener("message", (event) => {
    console.log("Получено сообщение от iframe:", event.data);
});

* в postMessage означает, что сообщение отправляется любому домену. Лучше указывать конкретный, например:

window.parent.postMessage({ type: "hello" }, "https://example.com");

🚩Передача данных из родителя в `iframe` Код в родительской странице (index.html)

const iframe = document.getElementById("myIframe");

// Ждём, когда iframe загрузится
iframe.onload = () => {
    iframe.contentWindow.postMessage({ type: "greeting", data: "Привет, iframe!" }, "*");
};

Код в iframe (child.html)

window.addEventListener("message", (event) => {
    console.log("Получено сообщение от родителя:", event.data);
});

🚩Доступ к `window.frames` и `window.parent` (только если тот же домен!) Если iframe и основная страница находятся на одном домене, можно обращаться к их window напрямую. Родительская страница → iframe

const iframe = document.getElementById("myIframe");

// Получаем объект `window` внутри `iframe`
iframe.contentWindow.document.body.style.backgroundColor = "lightblue";

iframe → Родительская страница

console.log(window.parent.document.title); // Доступ к заголовку страницы

🚩`localStorage` или `cookies` (если оба окна на одном домене) Можно сохранять данные в localStorage или cookies, а другая сторона будет их читать. Запись в localStorage из iframe

localStorage.setItem("message", "Привет от iframe!");

Чтение localStorage в родительской странице

console.log(localStorage.getItem("message")); // "Привет от iframe!"

Ставь 👍 и забирай 📚 Базу знаний

17 873

🤔 В каком случае важен порядок: при копировании объекта или массива? - Для массива порядок важен всегда, так как позиции имеют смысл (это индексированная структура). - Для объекта порядок чаще не имеет значения, но в некоторых случаях (например, при сериализации) он может быть важен, особенно если зависит от порядка вставки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 873

🤔 Какие преимущества у di? Dependency Injection (DI) – это паттерн проектирования, который помогает разделять зависимости и делает код гибче, тестируемее и поддерживаемее. Вместо того чтобы создавать зависимости внутри класса, они передаются (инъектируются) извне. 🚩Почему DI полезен? 🟠Уменьшает связность кода (Loose Coupling) Вместо того чтобы жестко привязывать один модуль к другому, DI передает зависимости снаружи.

class UserService {
  constructor() {
    this.db = new Database(); // Прямо создаем зависимость
  }

  getUser(id) {
    return this.db.findUserById(id);
  }
}

С DI (гибкость)

class UserService {
  constructor(db) {
    this.db = db; // DI передает зависимость извне
  }

  getUser(id) {
    return this.db.findUserById(id);
  }
}

// Передаем нужную зависимость
const database = new Database();
const userService = new UserService(database);

🟠Улучшает тестируемость (Unit-тесты проще) С DI можно подменять зависимости на заглушки (mock, fake, stub).

const userService = new UserService(); // Всегда использует реальную Database
userService.getUser(1); // Как протестировать без реальной БД? 🤔

С DI (можно подменить зависимость)

class FakeDatabase {
  findUserById(id) {
    return { id, name: "Тестовый пользователь" };
  }
}

const fakeDb = new FakeDatabase();
const userService = new UserService(fakeDb);

console.log(userService.getUser(1)); // ✅ Тест без реальной БД

🟠Улучшает расширяемость (легко менять зависимости) Допустим, сначала использовали MySQLDatabase, но решили перейти на MongoDatabase.

class UserService {
  constructor() {
    this.db = new MySQLDatabase(); // Нужно менять здесь
  }
}

С DI (добавляем новую зависимость без изменения кода UserService)

const db = new MongoDatabase(); // Просто передаем другую зависимость
const userService = new UserService(db);

🟠Упрощает управление зависимостями (через DI-контейнеры) В крупных приложениях удобно использовать DI-контейнер (например, InversifyJS для JavaScript/TypeScript).

import "reflect-metadata";
import { Container, injectable, inject } from "inversify";

@injectable()
class Database {
  findUserById(id) {
    return { id, name: "База данных" };
  }
}

@injectable()
class UserService {
  constructor(@inject(Database) db) {
    this.db = db;
  }

  getUser(id) {
    return this.db.findUserById(id);
  }
}

// Настраиваем DI-контейнер
const container = new Container();
container.bind(Database).toSelf();
container.bind(UserService).toSelf();

// Получаем объект с нужными зависимостями
const userService = container.get(UserService);
console.log(userService.getUser(1));

Ставь 👍 и забирай 📚 Базу знаний

17 873

Нужны 12 человек для работы с искусственным интеллектом Требования: 18-45 лет Работа из дома. График свободный. Пришло задание — изучили — выполнили — получили свои деньги. Деньги вы получаете в зависимости от сложности задания. Например: За задание могут платить 500-10.000 рублей. 500 рублей — это около 5-30 минут. 10 000 руб. это 5-6 часов. Работа может быть разной: Оживить фото, создать видео, реставрировать старое фото и т.д. 💰 В среднем новичок получает до 150.000 руб в месяц. А опытный может и 300-500т. Мы обучим вас сами: ✅ 3 дня уроков по 30 минут ✅ Домашки с проверкой и оплатой бонусами ✅ Платим 10 тыс за каждую выполненную домашку ⚡ Набор заканчивается завтра. Для регистрации жмите кнопку "Зарегистрироваться": Зарегистрироваться #реклама 16+ neuromachina.ru О рекламодателе

17 873

🤔 Какие методы общения имеются в протоколе HTTP? - GET — получение данных; - POST — отправка/создание; - PUT — обновление; - PATCH — частичное обновление; - DELETE — удаление; - OPTIONS, HEAD, CONNECT, TRACE — вспомогательные методы. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 873

🤔 Как работают плавающие элементы (floats)? float – это CSS-свойство, которое позволяет "выплывать" элементу из обычного потока документа и обтекаться другими элементами (например, текстом). Основные значения float

<img src="image.jpg" class="float-img">
<p>Это текст, который будет обтекать картинку.</p>

.float-img {
  float: left;
  margin-right: 10px;
}

🟠Почему родитель "схлопывается" при `float`? Когда внутри div есть только float-элементы, браузер считает, что он пустой, потому что float убирает элемент из потока.

<div class="container">
  <img src="image.jpg" class="float-img">
  <p>Текст обтекает картинку.</p>
</div>

.container {
  background: lightgray;
}
.float-img {
  float: left;
}

Решение 1: overflow: hidden;

.container {
  overflow: hidden; /* Контейнер теперь учитывает float-элементы */
}

Решение 2: clearfix (старый способ)

.container::after {
  content: "";
  display: block;
  clear: both;
}

🟠Как остановить обтекание (`clear`)? Чтобы отменить обтекание, используется clear.

<img src="image.jpg" class="float-img">
<p>Этот текст обтекает картинку.</p>
<div class="clear"></div>
<p>Этот текст пойдёт на новую строку.</p>

.float-img {
  float: left;
  margin-right: 10px;
}
.clear {
  clear: both;
}

🚩Почему `float` устарел и что использовать вместо него? Раньше float использовали для создания колонок и сеток, но сегодня его заменили: Flexbox (display: flex;) – лучше для адаптивных макетов. CSS Grid (display: grid;) – мощный инструмент для сложных сеток.

.container {
  display: flex;
  align-items: center;
}

Ставь 👍 и забирай 📚 Базу знаний