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

Я смотрю на эту цифру и до сих пор не верю.

Когда я запускал этот проект, мне реально было страшно. Страшно, что ничего не получится. Что я и мой проект никому не нужен. Страшно, что все увидят, как я публично обосрался.

Я ставил планку в 300т рублей. В самом позитивном сценарии 1млн. Но про 5 миллионов… даже мысли не было. Уже в первые часы стало понятно, что кампания идет не по плану. Сайт краудфандинга не выдержал нашей нагрузки и лег 😁

Особенно в последние три дня — просто какой-то разрыв! Я ощущал, как будто ловлю попутный ветер. В последний час не хватало 50к до 5 млн, и я уже думал сам их докинуть, чтобы красиво закрыть 😁

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

Я чувствую огромную ответственность и нервничаю из-за высоких ожиданий. А вдруг что-то пойдёт не так? А вдруг на релизе кому-то что-то не понравится? Именно поэтому я рад, что могу честно выйти на новый этап и без давления от левых инвесторов.

В такие моменты вспоминаю, с чего всё начиналось. Как 2 года назад я писал свои первые посты на 500 человек о том, как учу программирование. Как записывал первое видео на YouTube про поиск работы. Как пилил первую версию easyoffer, вообще без понимания, что из этого выйдет.

И сейчас я думаю — может, эта история вдохновит кого-то из вас. Может, кто-то запустит свой айтишный проект, найдёт поддержку и соберёт бабки на развитие. Было бы круто

Спасибо за невероятную и колосальную поддержку ❤️
О такой аудитории как вы я не мог мечтать

👍8

2.79K views06:35

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

🤔 Зачем нам разбивать приложение отдельно на backend и frontend?

Разделение на Frontend (клиент) и Backend (сервер) – это стандартный подход в современной веб-разработке. Это делает приложение гибче, масштабируемее и удобнее в разработке.

🚩

Почему лучше разделять?

🟠

Гибкость и масштабируемость
Можно менять Frontend и Backend независимо.
Можно использовать разные технологии (например, Vue.js + Django).
Можно легко разделить команды разработчиков.

🟠

Повышенная безопасность
Frontend не имеет доступа к базе данных.
Все важные вычисления, авторизация, хранение данных происходят на сервере.
API можно защитить токенами (JWT, OAuth).

🟠

Уменьшение нагрузки на клиент
Логика обработки данных выполняется на сервере.
Клиент получает уже готовые данные, а не загружает огромные файлы.

🟠

Легче разрабатывать и тестировать
Можно разрабатывать Frontend и Backend независимо.
Можно подменять сервер на mock-данные во время разработки.

🚩

Как они общаются? (REST API & GraphQL)
Разделённые приложения общаются через API:
REST API (GET, POST, PUT, DELETE)
GraphQL API (запросы только нужных данных)
WebSockets (реальное время, чаты, онлайн-игры)

GET https://api.example.com/users

Ответ от Backend

[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍18

3.54K views09:10

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

🤔 Разным ролям нужно по-разному предоставить dataset. Как бы это сделал?

- Через разграничение прав (RBAC) — фильтровать данные на сервере в зависимости от роли пользователя.
- Использовать view-модели или DTO, в которых отфильтровано содержимое.
- Настроить фильтрацию SQL-запросов (например, WHERE role = ?).
- В UI можно скрывать/показывать поля, но не полагаться только на фронт.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥6👍1

3.6K views16:10

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

🤔 Как добавить слушатель события?

Это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий.

🚩

Почему это нужно?

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

🚩

Как это используется?

Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery.

🟠

Чистый JavaScript
Для добавления слушателя события используется метод addEventListener.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    const button = document.getElementById('myButton');
    
    button.addEventListener('click', () => {
      alert('Button was clicked!');
    });
  </script>
</body>
</html>

🟠

React
Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как onClick, onChange и т.д.

import React from 'react';

function App() {
  const handleClick = () => {
    alert('Button was clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default App;

🟠

jQuery
Если вы используете его, добавление слушателей событий также очень просто и удобно.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    $(document).ready(function() {
      $('#myButton').on('click', function() {
        alert('Button was clicked!');
      });
    });
  </script>
</body>
</html>

🚩

Почему это удобно и важно

🟠

Интерактивность
Позволяет создавать динамичные и отзывчивые интерфейсы.

🟠

Гибкость
Возможность реагировать на различные действия пользователей.

🟠

Удобство
В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍12

3.95K views09:10

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

🤔 Как работает Event Loop в Web API?

Event Loop отвечает за выполнение кода, управление очередями микротасков и макротасков. Он поочерёдно берёт задачи из очереди и выполняет их, не блокируя UI.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍12🔥3🤔1💊1

3.57K views16:10

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

🤔 Как изменить направление оси flexbox контейнера?

Чтобы изменить направление оси flexbox-контейнера, нужно использовать свойство CSS flex-direction. Это свойство определяет основную ось контейнера и направление размещения flex-элементов.

🚩

Возможных значения flex-direction

🟠

row:
Основная ось — горизонтальная, элементы располагаются слева направо. Это значение по умолчанию.

🟠

row-reverse:
Основная ось — горизонтальная, элементы располагаются справа налево.

🟠

column:
Основная ось — вертикальная, элементы располагаются сверху вниз.

🟠

column-reverse:
Основная ось — вертикальная, элементы располагаются снизу вверх.

🚩

Примеры использования:

Горизонтальное направление (слева направо):

.container {
    display: flex;
    flex-direction: row; /* или просто не указывать, так как это значение по умолчанию */
}

Горизонтальное направление (справа налево):

.container {
    display: flex;
    flex-direction: row-reverse;
}

Вертикальное направление (сверху вниз):

.container {
    display: flex;
    flex-direction: column;
}

Вертикальное направление (снизу вверх):

.container {
    display: flex;
    flex-direction: column-reverse;
}

Пример HTML и CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Direction</title>
    <style>
        .container {
            display: flex;
            flex-direction: row; /* Измените значение на row-reverse, column, или column-reverse для проверки разных направлений */
            border: 1px solid #000;
            height: 200px;
        }
        .item {
            flex: 1;
            border: 1px solid #ccc;
            padding: 10px;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍11

3.53K views09:05

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

🤔

Что такое макро и микро задачи?

Макро-задачи (macro-tasks) — это крупные задачи, такие как события ввода-вывода, таймеры или сетевые запросы, которые планируются в основной очереди событий. Микро-задачи (micro-tasks) — это задачи меньшего приоритета, которые выполняются сразу после завершения текущего блока кода, но до выполнения следующих макро-задач (например, Promise или MutationObserver). Микро-задачи всегда выполняются перед макро-задачами, что позволяет им завершаться быстрее. Это важное отличие в управлении асинхронным кодом и приоритизацией событий.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥16👍10🤔2

3.78K views16:10

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

🤔 Как с помощью js можно передвигать вперед/назад по истории браузера?

В JavaScript можно перемещаться вперед и назад по истории браузера с помощью объекта window.history.

🟠

Использование `history.back()` и `history.forward()`
Эти методы аналогичны кнопкам "Назад" и "Вперед" в браузере.

history.back();    // Перемещение на одну страницу назад
history.forward(); // Перемещение на одну страницу вперед

Пример кнопок "Назад" и "Вперед"

<button onclick="history.back()">⬅️ Назад</button>
<button onclick="history.forward()">Вперед ➡️</button>

🟠

Использование `history.go(n)`
Этот метод позволяет перемещаться на определенное количество шагов:
history.go(-1) – назад на 1 страницу
history.go(1) – вперед на 1 страницу
history.go(-2) – назад на 2 страницы

history.go(-2); // Перейти на две страницы назад
history.go(3);  // Перейти на три страницы вперед

🟠

Получение длины истории `history.length`
Если нужно узнать, сколько страниц в истории текущей сессии:

console.log(history.length); // Количество записей в истории

🟠

Манипуляции с историей: `pushState()` и `replaceState()`
Если нужно изменить URL без перезагрузки страницы, можно использовать:
history.pushState(state, title, url)
Добавляет новый URL в историю (как будто пользователь перешел по ссылке).

history.pushState({ page: 1 }, "Title 1", "/page1");

history.replaceState(state, title, url)
Заменяет текущий URL (не добавляет новую запись в историю).

history.replaceState({ page: 2 }, "Title 2", "/page2");

Пример динамического изменения истории:

document.querySelector("button").addEventListener("click", () => {
  history.pushState({ page: "about" }, "About Page", "/about");
});

🟠

Отслеживание изменений истории `popstate`
Когда пользователь нажимает "Назад" или "Вперед", можно реагировать с помощью события popstate

window.addEventListener("popstate", (event) => {
  console.log("Текущий state:", event.state);
});

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍16

4.21K views09:05

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

🤔 Зачем нужны сокеты?

Сокеты используются для установки устойчивой двусторонней связи между клиентом и сервером в режиме реального времени, например, для чатов, игр или обновлений данных.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍12🔥5

3.61K views16:10

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

🤔

В чём разница между тегами div, img, p?

Все три тега (<div>, <img>, <p>) используются в HTML, но у них разные предназначения и свойства.

🚩

Тег `<div>` (контейнер)

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

<div class="container">
  <p>Привет, мир!</p>
  <img src="image.jpg" alt="Картинка">
</div>

Особенности <div>
- Не несёт семантического значения (просто контейнер).
- По умолчанию блочный (занимает всю ширину).
- Используется для группировки и стилизации через CSS.

🚩

Тег `<img>` (изображение)

Строчно-замещающий элемент, предназначен для вставки картинок.

<img src="logo.png" alt="Логотип">

Особенности <img>
- Не имеет закрывающего тега (<img> – одиночный тег).
- Строчно-замещающий (ведёт себя как inline, но может иметь размеры).
- Заменяется на картинку при отображении страницы.
- Требует alt для доступности и SEO.

🚩

Тег `<p>` (абзац)

Блочный элемент, предназначен для разметки текста.

<p>Это текст в абзаце.</p>

Особенности <p>
- Блочный (начинается с новой строки).
- Используется только для текста.
- Внутри нельзя размещать другие блочные элементы (<div>, <p>).
Ошибка

<p>Привет, мир!</p>
<p>Второй абзац</p> <!-- Это правильно -->
<p><div>Ошибка!</div></p> <!-- ❌ Нельзя вставлять <div> внутрь <p> -->

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍7💊6

3.98K views09:05

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

🤔 В чём отличие box-sizing: border-box от box-sizing: content-box?

- border-box включает padding и border в размер элемента — проще контролировать итоговую ширину.
- content-box — по умолчанию: ширина задаётся только для содержимого, а padding и border добавляются отдельно.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍17🔥1

3.75K views16:10

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

🤔 Что выбираешь ооп или функции?

Выбор между объектно-ориентированным программированием (ООП) и функциональным программированием (ФП) зависит от задачи, которую нужно решить. Оба подхода имеют свои плюсы и минусы.

🚩

Когда использовать ООП?

Объектно-ориентированное программирование подходит, когда:
Нужно моделировать реальные объекты и их поведение
Приложение состоит из множества взаимодействующих сущностей
Важно инкапсулировать данные и защитить их от прямого изменения
Требуется повторное использование кода через наследование и полиморфизм

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} издает звук`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} лает`);
  }
}

const dog = new Dog("Бобик");
dog.speak(); // "Бобик лает"

🚩

Когда использовать функциональное программирование?

Функциональный подход хорош, если
Код должен быть чистым и предсказуемым
Нужно избегать изменений состояния (иммутабельность)
Требуется много работы с массивами, коллекциями данных
Нужно легко писать асинхронный код

const double = num => num * 2;

const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map(double);

console.log(doubledNumbers); // [2, 4, 6, 8]

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍19🤔2

4.45K views09:05

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

🤔 Что такое операторы or и and?

Это логические операторы, которые используются для проверки условий:
- or (||) — возвращает true, если хотя бы одно из условий истинно.
- and (&&) — возвращает true, только если все условия истинны.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍27💊8

3.66K views16:10

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

🤔

Что такое относительная ссылка?

Это ссылка, которая указывает путь к ресурсу относительно текущей страницы или корневого каталога веб-сайта, вместо указания полного пути (абсолютной ссылки).

Относительная ссылка

<a href="../contact.html">Контакты</a>

Абсолютная ссылка

<a href="https://example.com/contact.html">Контакты</a>

🚩

Типы относительных ссылок

🟠

Простые относительные ссылки
Указывают путь к ресурсу, который находится в текущем каталоге или подкаталоге.

<a href="page.html">Страница</a> <!-- Ресурс в текущем каталоге -->

🟠

Ссылки с подъемом вверх по дереву файловой структуры
Используются два символа точки (..) для перехода на уровень выше.

   <a href="../folder/page.html">Страница</a> <!-- Подъем на один уровень вверх -->

🟠

Корневые ссылки
Указывают путь относительно корня веб-сайта, начиная с /.

<a href="/images/photo.jpg">Фото</a> <!-- Начало пути от корня сайта -->

🚩

Зачем нужны относительные ссылки?

🟠

Удобство при локальной разработке
Относительные ссылки работают независимо от домена. Если вы разрабатываете сайт локально (например, через localhost), вам не нужно указывать абсолютный путь с доменом.

🟠

Проще поддерживать сайт
Если домен или структура сайта меняется, относительные ссылки автоматически адаптируются, если структура каталогов остается прежней.

🟠

Экономия времени
Меньше текста в коде, особенно если проект содержит множество ссылок.

🚩

Примеры использования относительных ссылок

Ссылка на файл в текущей папке

<a href="file.html">Файл в текущей папке</a>

Ссылка на файл в подкаталоге

<a href="subfolder/file.html">Файл в подкаталоге</a>

Ссылка на файл в родительской папке

<a href="../file.html">Файл в родительской папке</a>

Ссылка на файл относительно корня сайта

<a href="/folder/file.html">Файл в папке от корня</a>

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍12

3.45K views09:05

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

🤔 С помощью чего можно создать асинхронные callback?

Асинхронные callback можно создать через:
1. Промисы — основной способ в современных браузерах:
2. fetch('/api').then(response => callback(response));
3. async/await — оборачиваем функцию в async, а внутри можно использовать await:
4. const callback = async () => {
5. const result = await fetch(...);
6. // обработка
7. };
8. Таймеры и события — классические способы:
9. setTimeout(() => callback(), 1000);
10. element.addEventListener('click', () => callback());
Callback вызывается по завершении асинхронной операции, и важно учитывать задержку выполнения (event loop).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍9🔥6

3.39K views16:10

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

🤔 Чем em отличается от rem?

🟠

Как работает `em`?
em зависит от размера шрифта родителя (font-size).

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
}

Но если .child вложен в .parent, то он наследует font-size, а его em вычисляется относительно родителя.

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 30px */
}

.grandchild {
  font-size: 2em; /* 2 * 30px = 60px */
}

🟠

Как работает `rem`?
rem всегда зависит от font-size у <html>.

html {
  font-size: 16px;
}

.container {
  font-size: 2rem; /* 2 * 16px = 32px */
}

🟠

Когда использовать `em`, а когда `rem`?
Используйте rem, если нужно, чтобы шрифты и размеры были предсказуемыми
Используйте em, если хотите, чтобы элементы зависели от родителя

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍14🔥4💊2

3.76K views09:05

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

🤔 Пример архитектурных решений для проектов на Node.js?

- Layered architecture — с разделением на controller, service, repository;
- Hexagonal architecture — с портами/адаптерами;
- Microservices с gRPC/REST;
- GraphQL gateway с Apollo;
- Event-driven через Kafka/RabbitMQ;
- Serverless архитектура (AWS Lambda, Firebase Functions).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥12👍3

3.42K views16:10

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

🤔

Зачем нужен 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 следует использовать для случаев, которые не могут быть решены этим способом.

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍8💊5

3.41K views09:05

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

🤔 Для чего нужно сравнивать ссылки при мемоизации?

Мемоизация (React.memo, useMemo, useCallback) основана на сравнении входных данных. Для объектов и функций сравнение происходит по ссылке.
Если ссылка на объект или функцию изменилась — React считает, что данные изменились. Даже если внутренности одинаковые.
Поэтому важно сохранять одну и ту же ссылку, если значение не изменилось, иначе мемоизация не сработает и будет лишняя перерисовка.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥15👍3

3.58K views16:10

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

🤔 Какие преимущества у 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));

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍13

4.44K views09:05

About

Blog

Apps

Platform