🤔 Как можно работать с датами в js?
В JavaScript для работы с датами можно использовать:
Библиотеку
Библиотеки (
🚩Встроенный объект `Date`
Создание даты
Способы создания даты
Получение значений
Изменение даты
Форматирование даты
Форматирование с
🚩Библиотеки (более удобные способы)
Разница между датами
Ставь 👍 и забирай 📚 Базу знаний
В JavaScript для работы с датами можно использовать:
Date – встроенный объект Библиотеку
Intl.DateTimeFormat – для форматирования Библиотеки (
moment.js, date-fns, luxon) – для удобной работы 🚩Встроенный объект `Date`
Создание даты
const now = new Date(); // Текущая дата и время
console.log(now); // Например: 2025-02-25T12:34:56.789Z
Способы создания даты
new Date(); // Текущая дата
new Date(2025, 1, 25); // 25 февраля 2025 (месяцы с 0)
new Date("2025-02-25"); // ISO строка
new Date(1708850400000); // Unix timestamp (в мс)
Получение значений
const date = new Date();
console.log(date.getFullYear()); // 2025
console.log(date.getMonth()); // 1 (февраль, потому что январь — 0)
console.log(date.getDate()); // 25
console.log(date.getDay()); // 2 (вторник, потому что воскресенье — 0)
console.log(date.getHours()); // Часы
console.log(date.getMinutes()); // Минуты
console.log(date.getSeconds()); // Секунды
console.log(date.getTime()); // Время в миллисекундах (Unix timestamp)
Изменение даты
const date = new Date();
date.setFullYear(2030);
date.setMonth(11); // Декабрь
date.setDate(31);
console.log(date); // 31 декабря 2030
Форматирование даты
const date = new Date();
console.log(date.toDateString()); // "Tue Feb 25 2025"
console.log(date.toISOString()); // "2025-02-25T12:34:56.789Z"
console.log(date.toLocaleString()); // Локальное представление
console.log(date.toUTCString()); // "Tue, 25 Feb 2025 12:34:56 GMT"
Форматирование с
Intl.DateTimeFormatconst date = new Date();
const formatter = new Intl.DateTimeFormat("ru-RU", {
year: "numeric",
month: "long",
day: "numeric",
weekday: "long",
});
console.log(formatter.format(date)); // "вторник, 25 февраля 2025 г."
🚩Библиотеки (более удобные способы)
date-fns (легковесная альтернатива Moment.js) npm install date-fns
import { format, addDays } from "date-fns";
const now = new Date();
console.log(format(now, "dd.MM.yyyy HH:mm")); // 25.02.2025 15:30
console.log(addDays(now, 5)); // Дата + 5 днейmoment.js (устаревший, но популярный)npm install moment
import moment from "moment";
const now = moment();
console.log(now.format("DD.MM.YYYY HH:mm")); // 25.02.2025 15:30
console.log(now.add(5, "days").format("DD.MM.YYYY")); // +5 дней
luxon (современная альтернатива Moment.js)npm install luxon
import { DateTime } from "luxon";
const now = DateTime.now();
console.log(now.toFormat("dd.MM.yyyy HH:mm")); // 25.02.2025 15:30
console.log(now.plus({ days: 5 }).toFormat("dd.MM.yyyy")); // +5 днейРазница между датами
const date1 = new Date("2025-02-25");
const date2 = new Date("2025-03-01");
const diff = date2 - date1; // Разница в миллисекундах
console.log(diff / (1000 * 60 * 60 * 24)); // Разница в днях (4)Ставь 👍 и забирай 📚 Базу знаний
👍11
🤔 На чём строится HTML?
HTML — это язык разметки, основанный на иерархической структуре тегов. Он определяет структуру контента веб-страницы (заголовки, параграфы, списки, формы и т.д.).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
HTML — это язык разметки, основанный на иерархической структуре тегов. Он определяет структуру контента веб-страницы (заголовки, параграфы, списки, формы и т.д.).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
👍12🤔2
🤔 Что такое функциональное программирование?
Функциональное программирование (FP) — это парадигма программирования, в которой основной единицей кода являются функции. В FP функции работают с данными без изменения внешнего состояния и без побочных эффектов.
🚩Основные принципы функционального программирования
🟠Чистые функции (Pure Functions)
Функция называется чистой, если:
При одинаковых входных данных всегда возвращает одинаковый результат.
Не изменяет внешние переменные (нет побочных эффектов).
Нечистая функция (изменяет внешнюю переменную)
Чистая функция (зависит только от аргументов)
🟠Иммутабельность (Immutable Data)
Данные не изменяются, а создаются новые версии объектов.
Изменение объекта (нефункциональный подход)
Создание нового объекта (функциональный подход)
🟠Функции высшего порядка (Higher-Order Functions)
Функция, которая принимает другую функцию в аргумент или возвращает функцию.
Пример: Функция, возвращающая другую функцию
🟠Функциональные методы массивов (map, filter, reduce)
Функциональные методы позволяют не мутировать массив, а создавать новый.
Используем
Используем
Используем
🟠Каррирование (Currying)
Разделение функции на несколько функций, каждая принимает по одному аргументу.
Пример: Каррированная функция
Ставь 👍 и забирай 📚 Базу знаний
Функциональное программирование (FP) — это парадигма программирования, в которой основной единицей кода являются функции. В FP функции работают с данными без изменения внешнего состояния и без побочных эффектов.
🚩Основные принципы функционального программирования
🟠Чистые функции (Pure Functions)
Функция называется чистой, если:
При одинаковых входных данных всегда возвращает одинаковый результат.
Не изменяет внешние переменные (нет побочных эффектов).
Нечистая функция (изменяет внешнюю переменную)
let count = 0;
function increment() {
count += 1; // изменяет внешнюю переменную
return count;
}
Чистая функция (зависит только от аргументов)
function increment(num) {
return num + 1; // не меняет внешнее состояние
}
console.log(increment(5)); // 6
console.log(increment(5)); // 6 (всегда одинаковый результат)🟠Иммутабельность (Immutable Data)
Данные не изменяются, а создаются новые версии объектов.
Изменение объекта (нефункциональный подход)
const user = { name: "Alice", age: 25 };
user.age = 26; // изменяет объектСоздание нового объекта (функциональный подход)
const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 26 }; // создаём новый объект🟠Функции высшего порядка (Higher-Order Functions)
Функция, которая принимает другую функцию в аргумент или возвращает функцию.
const numbers = [1, 2, 3];
const squared = numbers.map(n => n * n); // [1, 4, 9]
Пример: Функция, возвращающая другую функцию
const multiplyBy = (factor) => (num) => num * factor;
const double = multiplyBy(2);
console.log(double(5)); // 10
🟠Функциональные методы массивов (map, filter, reduce)
Функциональные методы позволяют не мутировать массив, а создавать новый.
Используем
map() для изменения элементов const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]
Используем
filter() для фильтрации const words = ["apple", "banana", "kiwi"];
const shortWords = words.filter(word => word.length < 6); // ["kiwi"]
Используем
reduce() для вычислений const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0); // 10
🟠Каррирование (Currying)
Разделение функции на несколько функций, каждая принимает по одному аргументу.
function sum(a, b) {
return a + b;
}
console.log(sum(2, 3)); // 5Пример: Каррированная функция
const sum = (a) => (b) => a + b;
console.log(sum(2)(3)); // 5
Ставь 👍 и забирай 📚 Базу знаний
👍12
🤔 Что такое secure ("безопасные") cookies?
Secure-cookie — это cookie, которое отправляется только по защищённым HTTPS-соединениям. Оно защищает данные от перехвата, особенно при передаче конфиденциальной информации, например, сессионных токенов.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Secure-cookie — это cookie, которое отправляется только по защищённым HTTPS-соединениям. Оно защищает данные от перехвата, особенно при передаче конфиденциальной информации, например, сессионных токенов.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🔥8🤔3
🤔 Зачем нужен docker?
Это инструмент для создания, развертывания и управления контейнерами. Контейнер – это изолированная среда, которая содержит всё необходимое для работы приложения: код, зависимости, библиотеки, конфигурации.
🚩Почему нужен Docker?
🟠Решает проблему "работает у меня, но не у тебя"
В разных средах могут быть разные версии зависимостей (Node.js, Python, базы данных). С Docker всё упаковано в контейнер, и приложение работает одинаково на любом сервере.
🟠Автоматизирует развертывание
Без Docker развертывание – это настройка сервера, установка зависимостей, конфигурация окружения. С Docker – просто запускаем контейнер.
🟠Легко масштабировать
Docker-контейнеры можно клонировать и запускать на разных серверах (например, в Kubernetes).
🟠Разделяет зависимости
Каждое приложение работает в изолированной среде, и конфликты библиотек исключены.
🟠Работает везде (Windows, Mac, Linux, серверы, облако)
Контейнер можно запустить где угодно, где установлен Docker.
🚩Как работает Docker?
🟠Создаем `Dockerfile` (инструкция для сборки контейнера)
Пример для Node.js-приложения
Собираем образ Docker (создаем "упакованный" контейнер)
Запускаем контейнер
Ставь 👍 и забирай 📚 Базу знаний
Это инструмент для создания, развертывания и управления контейнерами. Контейнер – это изолированная среда, которая содержит всё необходимое для работы приложения: код, зависимости, библиотеки, конфигурации.
🚩Почему нужен Docker?
🟠Решает проблему "работает у меня, но не у тебя"
В разных средах могут быть разные версии зависимостей (Node.js, Python, базы данных). С Docker всё упаковано в контейнер, и приложение работает одинаково на любом сервере.
🟠Автоматизирует развертывание
Без Docker развертывание – это настройка сервера, установка зависимостей, конфигурация окружения. С Docker – просто запускаем контейнер.
🟠Легко масштабировать
Docker-контейнеры можно клонировать и запускать на разных серверах (например, в Kubernetes).
🟠Разделяет зависимости
Каждое приложение работает в изолированной среде, и конфликты библиотек исключены.
🟠Работает везде (Windows, Mac, Linux, серверы, облако)
Контейнер можно запустить где угодно, где установлен Docker.
🚩Как работает Docker?
🟠Создаем `Dockerfile` (инструкция для сборки контейнера)
Пример для Node.js-приложения
# Базовый образ с Node.js
FROM node:18
# Устанавливаем рабочую директорию
WORKDIR /app
# Копируем файлы проекта
COPY package.json ./
RUN npm install
COPY . .
# Запускаем приложение
CMD ["node", "server.js"]
Собираем образ Docker (создаем "упакованный" контейнер)
docker build -t my-app .
Запускаем контейнер
docker run -p 3000:3000 my-app
Ставь 👍 и забирай 📚 Базу знаний
👍16
🤔 В каких случаях используются array.forEach и array.map?
- forEach используется, когда нужно выполнить действие над каждым элементом без возврата значения (например, лог или побочный эффект).
- map используется, когда нужно создать новый массив, преобразуя каждый элемент. Он возвращает результат, в отличие от forEach.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
- forEach используется, когда нужно выполнить действие над каждым элементом без возврата значения (например, лог или побочный эффект).
- map используется, когда нужно создать новый массив, преобразуя каждый элемент. Он возвращает результат, в отличие от forEach.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
👍19🔥2
🤔 Как отменить обтекание картинки текстом?
Когда мы добавляем картинку в HTML, текст по умолчанию может обтекать её, если используется
🚩Отмена обтекания с `clear: both;`
Если изображение обтекается текстом из-за
🚩Сделать изображение блочным (`display: block;`)
По умолчанию
🚩Использовать `overflow: hidden;` для предотвращения наложений
Если у родителя есть
Ставь 👍 и забирай 📚 Базу знаний
Когда мы добавляем картинку в HTML, текст по умолчанию может обтекать её, если используется
float. 🚩Отмена обтекания с `clear: both;`
Если изображение обтекается текстом из-за
float, нужно очистить обтекание с помощью clear: both;. <img src="image.jpg" class="float-img">
<p class="clear-text">Этот текст не будет обтекать картинку.</p>
.float-img {
float: left; /* Изображение обтекается текстом */
margin-right: 10px;
}
.clear-text {
clear: both; /* Останавливает обтекание */
}🚩Сделать изображение блочным (`display: block;`)
По умолчанию
img – inline-block элемент, поэтому текст может располагаться рядом. Если сделать его display: block;, текст уйдёт вниз. img {
display: block;
margin: 10px auto; /* Центрирование */
}🚩Использовать `overflow: hidden;` для предотвращения наложений
Если у родителя есть
float, можно использовать overflow: hidden; для очистки потока. .container {
overflow: hidden; /* Очищает обтекание */
}Ставь 👍 и забирай 📚 Базу знаний
👍6
🤔 В каком случае функция меняет контекст?
Контекст функции может измениться при использовании методов bind, call, apply, при вызове функции как метода объекта или в стрелочных функциях, где контекст фиксирован.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
👍10
🤔 Как с помощью js можно передвигать вперед/назад по истории браузера?
В JavaScript можно перемещаться вперед и назад по истории браузера с помощью объекта
🟠Использование `history.back()` и `history.forward()`
Эти методы аналогичны кнопкам "Назад" и "Вперед" в браузере.
Пример кнопок "Назад" и "Вперед"
🟠Использование `history.go(n)`
Этот метод позволяет перемещаться на определенное количество шагов:
🟠Получение длины истории `history.length`
Если нужно узнать, сколько страниц в истории текущей сессии:
🟠Манипуляции с историей: `pushState()` и `replaceState()`
Если нужно изменить URL без перезагрузки страницы, можно использовать:
Добавляет новый URL в историю (как будто пользователь перешел по ссылке).
Заменяет текущий URL (не добавляет новую запись в историю).
Пример динамического изменения истории:
🟠Отслеживание изменений истории `popstate`
Когда пользователь нажимает "Назад" или "Вперед", можно реагировать с помощью события
Ставь 👍 и забирай 📚 Базу знаний
В 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`
Когда пользователь нажимает "Назад" или "Вперед", можно реагировать с помощью события
popstatewindow.addEventListener("popstate", (event) => {
console.log("Текущий state:", event.state);
});Ставь 👍 и забирай 📚 Базу знаний
👍10🔥1
🤔 Что такое протокол SOAP?
SOAP (Simple Object Access Protocol) — это протокол обмена структурированными сообщениями по сети, основанный на XML. Часто используется в веб-сервисах. Поддерживает строгую спецификацию, расширенные механизмы безопасности, но сложен и тяжелее, чем REST.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
SOAP (Simple Object Access Protocol) — это протокол обмена структурированными сообщениями по сети, основанный на XML. Часто используется в веб-сервисах. Поддерживает строгую спецификацию, расширенные механизмы безопасности, но сложен и тяжелее, чем REST.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🔥9
🤔 Когда используются теги div и span?
🚩Примеры использования `<div>`
Разметка секций страницы
Группировка элементов
🚩Когда использовать `<span>`?
🚩Примеры использования `<span>`
Выделение части текста
Иконки, кнопки и маленькие элементы
Ставь 👍 и забирай 📚 Базу знаний
<div> и <span> — это самые универсальные HTML-теги, но у них разные роли: <div> — блочный контейнер (для структуры). <span> — строчный контейнер (для оформления текста). 🚩Примеры использования `<div>`
Разметка секций страницы
<div class="header">Навигация</div>
<div class="content">Основной контент</div>
<div class="footer">Подвал</div>
Группировка элементов
<div class="card">
<h2>Заголовок</h2>
<p>Текст внутри карточки</p>
</div>
🚩Когда использовать `<span>`?
<span> используется для выделения части текста или небольших элементов. Это строчный элемент, который не переносится на новую строку. 🚩Примеры использования `<span>`
Выделение части текста
<p>Сегодня <span class="highlight">солнечная погода</span>.</p>
Иконки, кнопки и маленькие элементы
<button>
<span class="icon">🔍</span> Поиск
</button>
Ставь 👍 и забирай 📚 Базу знаний
👍9
🤔 В чём отличие for от while?
- for — когда знаем начало и конец.
- while — когда повторяем пока выполняется условие.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
- for — когда знаем начало и конец.
- while — когда повторяем пока выполняется условие.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
👍12
🤔 Что такое amp страницы?
AMP (Accelerated Mobile Pages) — это технология от Google, которая позволяет создавать очень быстрые и легкие веб-страницы для мобильных устройств. AMP-страницы загружаются почти мгновенно, потому что:
Используют оптимизированный HTML (AMP HTML)
Ограничивают использование JavaScript
Подключают Google AMP Cache для мгновенной загрузки
🚩Зачем нужны AMP?
Ускоряют загрузку страниц → полезно для мобильных пользователей
Улучшают SEO → Google любит быстрые сайты
Увеличивают CTR → в поиске AMP-страницы помечены ⚡️ и привлекают внимание
Снижают нагрузку на сервер
🚩Как создать AMP-страницу?
AMP-страница – это обычный HTML, но с ограничениями и своими тегами.
Ставь 👍 и забирай 📚 Базу знаний
AMP (Accelerated Mobile Pages) — это технология от Google, которая позволяет создавать очень быстрые и легкие веб-страницы для мобильных устройств. AMP-страницы загружаются почти мгновенно, потому что:
Используют оптимизированный HTML (AMP HTML)
Ограничивают использование JavaScript
Подключают Google AMP Cache для мгновенной загрузки
🚩Зачем нужны AMP?
Ускоряют загрузку страниц → полезно для мобильных пользователей
Улучшают SEO → Google любит быстрые сайты
Увеличивают CTR → в поиске AMP-страницы помечены ⚡️ и привлекают внимание
Снижают нагрузку на сервер
🚩Как создать AMP-страницу?
AMP-страница – это обычный HTML, но с ограничениями и своими тегами.
<!DOCTYPE html>
<html ⚡️ lang="ru">
<head>
<meta charset="UTF-8">
<title>AMP Страница</title>
<link rel="canonical" href="https://example.com/normal-page.html">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-boilerplate>
body { visibility: hidden; }
</style>
<noscript>
<style amp-boilerplate>
body { visibility: visible; }
</style>
</noscript>
</head>
<body>
<h1>Привет, это AMP!</h1>
<amp-img src="image.jpg" width="600" height="400" layout="responsive"></amp-img>
</body>
</html>
Ставь 👍 и забирай 📚 Базу знаний
👍9🔥1
Пожизненная PRO подписка на easyoffer по цене одного года.
Акция до 20 февраля. Покупаешь сейчас один раз – пользуешься всю жизнь без лимита, включая все будущие функции.
Запланированные новые фичи на ближайшие пол года:
1. Агрегатор вакансий
2. Улучшение резюме, чтобы проходить ATS системы
3. Генерация уникального резюме и сопроводительного письма под вакансию
Покупай на https://easyoffer.ru/
Акция до 20 февраля. Покупаешь сейчас один раз – пользуешься всю жизнь без лимита, включая все будущие функции.
Запланированные новые фичи на ближайшие пол года:
1. Агрегатор вакансий
2. Улучшение резюме, чтобы проходить ATS системы
3. Генерация уникального резюме и сопроводительного письма под вакансию
Покупай на https://easyoffer.ru/
💊5
🤔 Что такое боксинг?
Боксинг — это автоматическое оборачивание примитива в объект. Например, строка "abc" становится объектом String, если вызываешь метод: "abc".length.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Боксинг — это автоматическое оборачивание примитива в объект. Например, строка "abc" становится объектом String, если вызываешь метод: "abc".length.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
👍14🔥7🤔2
🤔 Можешь ли пояснить разницу между progressive enhancement и graceful degradation?
Оба подхода используются в веб-разработке для обеспечения доступности и совместимости веб-приложений на разных устройствах и браузерах.
🚩Progressive Enhancement (Прогрессивное улучшение)
Сначала создаём простую, но рабочую версию сайта, которая работает на всех устройствах и браузерах. Затем добавляем улучшения (CSS-анимации, сложный JavaScript), которые работают только в современных браузерах.
🚩Graceful Degradation (Постепенное упрощение)
Сначала создаём полнофункциональную версию с последними технологиями. Затем добавляем fallback'и (упрощённые версии) для старых браузеров.
Используем CSS Grid, но добавляем
Приложение на React, но показываем простой HTML, если JavaScript отключён.
Ставь 👍 и забирай 📚 Базу знаний
Оба подхода используются в веб-разработке для обеспечения доступности и совместимости веб-приложений на разных устройствах и браузерах.
🚩Progressive Enhancement (Прогрессивное улучшение)
Сначала создаём простую, но рабочую версию сайта, которая работает на всех устройствах и браузерах. Затем добавляем улучшения (CSS-анимации, сложный JavaScript), которые работают только в современных браузерах.
🚩Graceful Degradation (Постепенное упрощение)
Сначала создаём полнофункциональную версию с последними технологиями. Затем добавляем fallback'и (упрощённые версии) для старых браузеров.
Используем CSS Grid, но добавляем
@supports для fallback'а на FlexboxПриложение на React, но показываем простой HTML, если JavaScript отключён.
Ставь 👍 и забирай 📚 Базу знаний
👍9
🤔 Сравни MobX с другими системами управления state.
- Redux — декларативный, явный, работает по принципу store + reducer + dispatch;
- MobX — императивный, реактивный, простой в использовании;
- Recoil / Zustand — гибридные и легковесные решения.
MobX лучше, когда нужно меньше boilerplate и больше магии, Redux — для строгой предсказуемости и логирования.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
- Redux — декларативный, явный, работает по принципу store + reducer + dispatch;
- MobX — императивный, реактивный, простой в использовании;
- Recoil / Zustand — гибридные и легковесные решения.
MobX лучше, когда нужно меньше boilerplate и больше магии, Redux — для строгой предсказуемости и логирования.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
👍4🔥1
🤔 Какие используешь подходы для написания приложения которую проще поддерживать, чем делать первоначальную разработку?
При разработке frontend-приложений, которые в будущем будет проще поддерживать и масштабировать, я придерживаюсь ряда ключевых подходов.
🟠Разделение ответственности (Separation of Concerns)
Это значит, что код должен быть разделен по зонам ответственности. В frontend-разработке это проявляется в:
Чистом разделении логики, представления и данных (например, с помощью архитектуры MVC, MVVM или FLUX).
Использовании компонентов в React/Vue или шаблонов в Angular.
Разделении CSS, JS и HTML, либо использовании методологий, где стили хранятся рядом с компонентом (CSS Modules, Styled Components).
Вместо того, чтобы писать всю логику и разметку в одном файле:
Я разделяю бизнес-логику и представление
🟠Компонентный подход и повторное использование кода
Frontend-приложения должны строиться из переиспользуемых и изолированных компонентов. Это уменьшает дублирование кода и делает его понятным.
🟠Чистый код и читаемость
Код должен быть понятным не только мне, но и другим разработчикам.
Понятные имена переменных и функций. Вместо
Меньше вложенности. Вместо кучи
Разбиение кода на модули. Один файл = одна зона ответственности.
🟠Состояние приложения: локальное vs глобальное
В зависимости от сложности приложения нужно правильно управлять состоянием:
Локальное состояние –
Глобальное состояние – Redux, MobX, Zustand, Pinia, Context API – когда данные нужны многим компонентам.
Серверное состояние – React Query, SWR – когда данные приходят с API и их нужно кешировать.
🟠Следование принципам SOLID и DRY
DRY (Don't Repeat Yourself) – не повторяем код, используем функции, хуки, компоненты.
SOLID – например, принцип единственной ответственности (Single Responsibility Principle) гласит, что каждый компонент или функция должны решать только одну задачу.
Лучше разделить логику
🟠Использование TypeScript
TypeScript помогает избежать ошибок и делать код предсказуемым.
🟠Документация и кодстайл
ESLint + Prettier → автоформатирование и проверка стиля.
JSDoc/TypeScript → документация функций и типов данных.
Storybook → для документирования UI-компонентов.
Ставь 👍 и забирай 📚 Базу знаний
При разработке frontend-приложений, которые в будущем будет проще поддерживать и масштабировать, я придерживаюсь ряда ключевых подходов.
🟠Разделение ответственности (Separation of Concerns)
Это значит, что код должен быть разделен по зонам ответственности. В frontend-разработке это проявляется в:
Чистом разделении логики, представления и данных (например, с помощью архитектуры MVC, MVVM или FLUX).
Использовании компонентов в React/Vue или шаблонов в Angular.
Разделении CSS, JS и HTML, либо использовании методологий, где стили хранятся рядом с компонентом (CSS Modules, Styled Components).
Вместо того, чтобы писать всю логику и разметку в одном файле:
function App() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}Я разделяю бизнес-логику и представление
// CounterLogic.js
export function useCounter() {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
return { count, increment };
}
// Counter.js
import { useCounter } from "./CounterLogic";
function Counter() {
const { count, increment } = useCounter();
return <button onClick={increment}>Count: {count}</button>;
}
🟠Компонентный подход и повторное использование кода
Frontend-приложения должны строиться из переиспользуемых и изолированных компонентов. Это уменьшает дублирование кода и делает его понятным.
// Button.js (переиспользуемый компонент)
function Button({ onClick, children }) {
return <button onClick={onClick}>{children}</button>;
}
// Counter.js (использует Button)
function Counter() {
const [count, setCount] = useState(0);
return <Button onClick={() => setCount(count + 1)}>Count: {count}</Button>;
}
🟠Чистый код и читаемость
Код должен быть понятным не только мне, но и другим разработчикам.
Понятные имена переменных и функций. Вместо
x → userAge, вместо doSmth() → calculateTotalPrice(). Меньше вложенности. Вместо кучи
if и else, лучше использовать early return. Разбиение кода на модули. Один файл = одна зона ответственности.
function getDiscountedPrice(price, discount) {
if (discount <= 0) return price;
return price - price * (discount / 100);
}🟠Состояние приложения: локальное vs глобальное
В зависимости от сложности приложения нужно правильно управлять состоянием:
Локальное состояние –
useState (React), ref (Vue) для простых данных внутри компонента. Глобальное состояние – Redux, MobX, Zustand, Pinia, Context API – когда данные нужны многим компонентам.
Серверное состояние – React Query, SWR – когда данные приходят с API и их нужно кешировать.
🟠Следование принципам SOLID и DRY
DRY (Don't Repeat Yourself) – не повторяем код, используем функции, хуки, компоненты.
SOLID – например, принцип единственной ответственности (Single Responsibility Principle) гласит, что каждый компонент или функция должны решать только одну задачу.
function sendEmailAndSaveToDB(user) {
sendEmail(user.email);
saveUserToDatabase(user);
}Лучше разделить логику
function sendEmail(email) { /* отправка письма */ }
function saveUserToDatabase(user) { /* сохранение в БД */ }
function registerUser(user) {
sendEmail(user.email);
saveUserToDatabase(user);
}🟠Использование TypeScript
TypeScript помогает избежать ошибок и делать код предсказуемым.
type User = {
id: number;
name: string;
};
function getUserName(user: User): string {
return user.name;
}🟠Документация и кодстайл
ESLint + Prettier → автоформатирование и проверка стиля.
JSDoc/TypeScript → документация функций и типов данных.
Storybook → для документирования UI-компонентов.
Ставь 👍 и забирай 📚 Базу знаний
👍8💊1
🤔 Что известно про обобщённые типы?
Обобщённые типы (generics) позволяют писать универсальный и типобезопасный код, не зависящий от конкретных типов данных. Они часто применяются для функций, классов и интерфейсов, которым нужно работать с разными типами, но при этом сохранять строгую типизацию.
Такой подход помогает избежать дублирования кода и повышает гибкость без потери контроля типов.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Обобщённые типы (generics) позволяют писать универсальный и типобезопасный код, не зависящий от конкретных типов данных. Они часто применяются для функций, классов и интерфейсов, которым нужно работать с разными типами, но при этом сохранять строгую типизацию.
Такой подход помогает избежать дублирования кода и повышает гибкость без потери контроля типов.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
👍9🔥1
🤔 Что такое нечистая функция?
Нечистая функция (impure function) – это функция, результат которой зависит от внешних данных или побочных эффектов. При одном и том же входном значении она может возвращать разные результаты, что делает её непредсказуемой.
🚩Признаки нечистой функции
Зависит от внешнего состояния
Изменяет глобальные переменные
Вызывает побочные эффекты (запросы, изменения DOM, логирование, изменение переданных аргументов и т. д.)
🚩Примеры нечистых функций
Использует внешнюю переменную (зависит от внешнего состояния)
Модифицирует переданный аргумент
Выполняет побочные эффекты (например, изменяет DOM)
Генерирует случайное значение
🚩Чем отличается от чистой функции?
Чистая функция (pure function) всегда возвращает один и тот же результат при одинаковых входных данных и не изменяет внешние состояния.
Чистый вариант функции
Ставь 👍 и забирай 📚 Базу знаний
Нечистая функция (impure function) – это функция, результат которой зависит от внешних данных или побочных эффектов. При одном и том же входном значении она может возвращать разные результаты, что делает её непредсказуемой.
🚩Признаки нечистой функции
Зависит от внешнего состояния
Изменяет глобальные переменные
Вызывает побочные эффекты (запросы, изменения DOM, логирование, изменение переданных аргументов и т. д.)
🚩Примеры нечистых функций
Использует внешнюю переменную (зависит от внешнего состояния)
let count = 0;
function increment() {
count += 1;
return count;
}
console.log(increment()); // 1
console.log(increment()); // 2 (результат меняется при каждом вызове)
Модифицирует переданный аргумент
function addElement(arr, item) {
arr.push(item); // изменяет оригинальный массив
return arr;
}
let numbers = [1, 2, 3];
console.log(addElement(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3, 4] (исходный массив изменён)Выполняет побочные эффекты (например, изменяет DOM)
function changeTitle(newTitle) {
document.title = newTitle;
}
changeTitle("Новая страница");
console.log(document.title); // "Новая страница"Генерирует случайное значение
function getRandomNumber() {
return Math.random();
}
console.log(getRandomNumber()); // 0.37485647 (разный результат при каждом вызове)🚩Чем отличается от чистой функции?
Чистая функция (pure function) всегда возвращает один и тот же результат при одинаковых входных данных и не изменяет внешние состояния.
Чистый вариант функции
addElement() (не меняет исходный массив) function addElementPure(arr, item) {
return [...arr, item]; // создаёт новый массив, не изменяя старый
}
let numbers = [1, 2, 3];
console.log(addElementPure(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3] (исходный массив не изменился)Ставь 👍 и забирай 📚 Базу знаний
👍8
🤔 Что такое режим совместимости (quirks mode)?
Это режим отображения страницы в браузере с ошибками, характерными для старых версий IE. Включается, если DOCTYPE не задан или задан некорректно. Может приводить к нестандартному поведению CSS и DOM.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Это режим отображения страницы в браузере с ошибками, характерными для старых версий IE. Включается, если DOCTYPE не задан или задан некорректно. Может приводить к нестандартному поведению CSS и DOM.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🔥9