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

\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/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru/posts/2453","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2453","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru/posts/2452","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2452","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru/posts/2451","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2451","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru/posts/2450","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2450","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru/posts/2449","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2449","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru/posts/2448","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2448","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru/posts/2447","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2447","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru/posts/2446","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2446","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru/posts/2445","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2445","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru/posts/2444","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2444","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru/posts/2443","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2443","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru/posts/2442","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2442","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru/posts/2441","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2441","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2441","headline":"🤔 Как работают плавающие элементы (floats)? float – это CSS-свойство, которое позволяет \"выплывать\" элементу…","articleBody":"🤔 Как работают плавающие элементы (floats)?\n\nfloat – это CSS-свойство, которое позволяет \"выплывать\" элементу из обычного потока документа и обтекаться другими элементами (например, текстом). \n\nОсновные значения float \n\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

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

\n\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/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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}]}}]}