update typescript, update docs
This commit is contained in:
@@ -84,5 +84,4 @@ Content-Length: 1234
|
||||
|
||||
HTTP является фундаментальным протоколом для работы в Интернете и используется практически во всех веб-технологиях.
|
||||
|
||||
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -36,4 +36,6 @@ sidebar_position: 2
|
||||
- Банковские приложения.
|
||||
- Социальные сети и почтовые сервисы.
|
||||
|
||||
HTTPS стал стандартом для современных веб-сайтов, обеспечивая безопасность и конфиденциальность пользователей.
|
||||
HTTPS стал стандартом для современных веб-сайтов, обеспечивая безопасность и конфиденциальность пользователей.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -50,4 +50,6 @@ sidebar_position: 3
|
||||
|
||||
## Разница между REST API и RESTful API:
|
||||
- **REST API** — это общий термин, описывающий API, которое следует принципам REST.
|
||||
- **RESTful API** — это более строгий термин, подразумевающий, что API полностью соответствует всем принципам REST.
|
||||
- **RESTful API** — это более строгий термин, подразумевающий, что API полностью соответствует всем принципам REST.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -54,3 +54,4 @@ mutation {
|
||||
- **Гибкость:** Легко изменять запросы без необходимости изменять API.
|
||||
- **Интеграция с состоянием:** Apollo Client интегрируется с состоянием React, что упрощает управление данными.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -75,3 +75,5 @@ export default PollingExample;
|
||||
1. **WebSockets:** Для реального времени с двусторонней связью.
|
||||
2. **Server-Sent Events (SSE):** Для односторонней передачи данных от сервера к клиенту.
|
||||
3. **Long Polling:** Клиент отправляет запрос и ждет, пока сервер не вернет новые данные.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -116,3 +116,4 @@ export default LongPollingWithAxios;
|
||||
2. Server-Sent Events (SSE): Для односторонней передачи данных от сервера к клиенту.
|
||||
3. Обычный Polling: Когда данные обновляются часто, и long polling не нужен.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -130,3 +130,5 @@ app.listen(3000, () => {
|
||||
1. WebSockets: Для двусторонней связи в реальном времени.
|
||||
2. Long Polling: Когда SSE недоступен.
|
||||
3. Polling: Для простых сценариев.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -159,4 +159,6 @@ console.log('WebSocket server is running on ws://localhost:8080');
|
||||
## Альтернативы WebSocket:
|
||||
1. **Server-Sent Events (SSE):** Для односторонней связи (сервер → клиент).
|
||||
2. **Long Polling:** Когда WebSocket недоступен.
|
||||
3. **Polling:** Для простых сценариев.
|
||||
3. **Polling:** Для простых сценариев.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 2
|
||||
---
|
||||
|
||||
# Классическая архитектура
|
||||
Источник: DeepSeek
|
||||
|
||||
Layer-based architecture (архитектура на основе слоёв) — это подход к организации кода, при котором приложение разделяется на несколько логических слоёв, каждый из которых отвечает за определённый аспект функциональности. Этот метод широко используется как во фронтенд-, так и в бэкенд-разработке и помогает создавать структурированные, поддерживаемые и масштабируемые приложения.
|
||||
|
||||
@@ -107,4 +106,6 @@ src/
|
||||
- Подходит для крупных проектов с множеством фич.
|
||||
2. **Domain-driven Design (DDD):**
|
||||
- Организация кода вокруг доменных областей (например, `user`, `order`, `product`).
|
||||
- Часто используется в бэкенд-разработке.
|
||||
- Часто используется в бэкенд-разработке.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 3
|
||||
---
|
||||
|
||||
# Atomic design
|
||||
Источник: DeepSeek
|
||||
|
||||
Atomic Design — это методология проектирования и организации пользовательских интерфейсов, предложенная Брэдом Фростом (Brad Frost). Она основана на идее разделения интерфейса на небольшие, независимые и переиспользуемые компоненты, которые затем комбинируются для создания более сложных структур. Название методологии вдохновлено химией: так же, как молекулы состоят из атомов, интерфейсы состоят из базовых компонентов.
|
||||
|
||||
@@ -96,6 +95,4 @@ src/
|
||||
- Когда требуется высокая согласованность интерфейса.
|
||||
- В командах, где дизайнеры и разработчики тесно взаимодействуют.
|
||||
|
||||
|
||||
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 4
|
||||
---
|
||||
|
||||
# Доменная архитектура
|
||||
Источник: DeepSeek
|
||||
|
||||
**Domain-Driven Design (DDD)** — это подход к разработке программного обеспечения, который фокусируется на моделировании бизнес-логики и организации кода вокруг доменных областей (бизнес-контекстов). Хотя DDD изначально был разработан для бэкенд-разработки, его принципы могут быть успешно применены и во фронтенде, особенно в сложных приложениях с богатой бизнес-логикой.
|
||||
|
||||
@@ -100,4 +99,6 @@ src/
|
||||
## Когда использовать DDD во фронтенде
|
||||
В сложных приложениях с богатой бизнес-логикой.
|
||||
В командах, где разработчики и бизнес-эксперты тесно взаимодействуют.
|
||||
Когда требуется высокая степень модульности и переиспользуемости.
|
||||
Когда требуется высокая степень модульности и переиспользуемости.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 5
|
||||
---
|
||||
|
||||
# Feature slice design
|
||||
Источник: DeepSeek
|
||||
|
||||
**Feature Slice Design (FSD)** — это методология проектирования и организации кода во фронтенд-разработке, которая фокусируется на разделении приложения на независимые, функционально завершённые блоки (срезы), каждый из которых соответствует определённой фиче (функциональности) продукта. Этот подход помогает создавать более структурированные, масштабируемые и поддерживаемые приложения.
|
||||
|
||||
@@ -113,4 +112,6 @@ src/
|
||||
|
||||
## Альтернативы:
|
||||
- **Layer-based architecture** (разделение на слои, например, components, pages, store).
|
||||
- **Domain-driven design (DDD)** (организация кода вокруг доменных областей).
|
||||
- **Domain-driven design (DDD)** (организация кода вокруг доменных областей).
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 6
|
||||
---
|
||||
|
||||
# Micro frontend
|
||||
Источник: DeepSeek
|
||||
|
||||
Микрофронтенды (Micro Frontends) — это архитектурный подход, который позволяет разделить фронтенд-приложение на независимые, слабо связанные части, каждая из которых может разрабатываться, тестироваться и развертываться отдельно. Этот подход вдохновлен микросервисной архитектурой и применяется для создания масштабируемых и поддерживаемых фронтенд-приложений.
|
||||
|
||||
@@ -114,4 +113,6 @@ sidebar_position: 6
|
||||
## Недостатки микрофронтендов:
|
||||
1. Сложность интеграции: Требуется четкая организация взаимодействия между микрофронтендами.
|
||||
2. Дублирование кода: Возможно дублирование общих ресурсов, если они не вынесены в отдельные модули.
|
||||
3. Производительность: Загрузка нескольких микрофронтендов может увеличить время загрузки приложения.
|
||||
3. Производительность: Загрузка нескольких микрофронтендов может увеличить время загрузки приложения.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 7
|
||||
---
|
||||
|
||||
# Test driven development
|
||||
Источник: DeepSeek
|
||||
|
||||
TDD (Test-Driven Development) — это методология разработки программного обеспечения, в которой написание тестов предшествует написанию кода. Основная идея TDD заключается в том, что разработчик сначала пишет тест для новой функциональности, а затем реализует код, который делает этот тест успешным. Этот процесс повторяется для каждой новой функции или улучшения.
|
||||
|
||||
@@ -66,3 +65,4 @@ TDD основан на нескольких ключевых принципах
|
||||
3. Не всегда подходит:
|
||||
- TDD может быть избыточным для небольших проектов или прототипов.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,8 +3,6 @@ sidebar_position: 8
|
||||
---
|
||||
|
||||
# Принципы разработки
|
||||
Источник: DeepSeek \
|
||||
Дополнительный источник: [https://habr.com/ru/companies/itelma/articles/546372/](https://habr.com/ru/companies/itelma/articles/546372/)
|
||||
|
||||
## YAGNI
|
||||
_You Aren’t Gonna Need It / Вам это не понадобится_
|
||||
@@ -153,3 +151,6 @@ _Keep It Simple, Stupid / Будь проще_
|
||||
2. **Поддерживаемость:** Упрощается понимание и исправление ошибок.
|
||||
3. **Тестируемость:** Код, соответствующий SOLID, легче тестировать.
|
||||
4. **Масштабируемость:** Система становится более устойчивой к изменениям и росту.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
dДополнительный источник: [https://habr.com/ru/companies/itelma/articles/546372/](https://habr.com/ru/companies/itelma/articles/546372/)
|
||||
|
||||
107
docs/architecture/09-oop.md
Normal file
107
docs/architecture/09-oop.md
Normal file
@@ -0,0 +1,107 @@
|
||||
---
|
||||
sidebar_position: 9
|
||||
---
|
||||
|
||||
# ООП
|
||||
Принципы ООП (Объектно-ориентированного программирования)
|
||||
|
||||
Объектно-ориентированное программирование (ООП) — это парадигма, основанная на концепции объектов, которые объединяют данные и методы для работы с ними. Основные принципы ООП:
|
||||
|
||||
## 1. Инкапсуляция
|
||||
**Смысл:** Объединение данных (свойств) и методов внутри объекта с контролем доступа. \
|
||||
**Зачем?** Защита данных, предотвращение прямого изменения извне.
|
||||
```ts
|
||||
class User {
|
||||
private password: string;
|
||||
|
||||
constructor(public name: string, password: string) {
|
||||
this.password = password;
|
||||
}
|
||||
|
||||
checkPassword(input: string): boolean {
|
||||
return this.password === input;
|
||||
}
|
||||
}
|
||||
|
||||
const user = new User("Alice", "secret123");
|
||||
console.log(user.checkPassword("wrong")); // false
|
||||
console.log(user.checkPassword("secret123")); // true
|
||||
```
|
||||
📌 `private` скрывает `password`, и его нельзя изменить напрямую.
|
||||
|
||||
## 2. Наследование
|
||||
**Смысл:** Позволяет создавать новые классы на основе существующих. \
|
||||
**Зачем?** Повторное использование кода и расширение функциональности.
|
||||
```ts
|
||||
class Animal {
|
||||
constructor(public name: string) {}
|
||||
makeSound() {
|
||||
console.log("Some sound...");
|
||||
}
|
||||
}
|
||||
|
||||
class Dog extends Animal {
|
||||
makeSound() {
|
||||
console.log("Woof!");
|
||||
}
|
||||
}
|
||||
|
||||
const dog = new Dog("Buddy");
|
||||
dog.makeSound(); // Woof!
|
||||
```
|
||||
|
||||
📌 `Dog` наследует `Animal`, но переопределяет метод `makeSound()`.
|
||||
|
||||
## 3. Полиморфизм
|
||||
**Смысл:** Разные объекты могут иметь **одинаковый интерфейс**, но разное поведение. \
|
||||
**Зачем?** Универсальный код, который работает с разными типами объектов.
|
||||
```ts
|
||||
class Animal {
|
||||
constructor(public name: string) {}
|
||||
makeSound() {
|
||||
console.log("Some sound...");
|
||||
}
|
||||
}
|
||||
|
||||
class Dog extends Animal {
|
||||
makeSound() {
|
||||
console.log("Woof!");
|
||||
}
|
||||
}
|
||||
|
||||
const dog = new Dog("Buddy");
|
||||
dog.makeSound(); // Woof!
|
||||
```
|
||||
📌 `Penguin` изменяет логику `fly()`, но всё ещё является `Bird`.
|
||||
|
||||
## 4. Абстракция
|
||||
**Смысл:** Выделение **важных деталей**, скрытие реализации. \
|
||||
**Зачем?** Упрощение работы с кодом, фокус только на важном.
|
||||
```ts
|
||||
abstract class Transport {
|
||||
constructor(public speed: number) {}
|
||||
|
||||
abstract move(): void;
|
||||
}
|
||||
|
||||
class Car extends Transport {
|
||||
move() {
|
||||
console.log(`Driving at ${this.speed} km/h`);
|
||||
}
|
||||
}
|
||||
|
||||
const car = new Car(100);
|
||||
car.move(); // Driving at 100 km/h
|
||||
```
|
||||
📌 `abstract` запрещает создавать `Transport`, но заставляет `Car` реализовать `move()`.
|
||||
|
||||
## Итог
|
||||
- ✅ **Инкапсуляция** — скрываем детали и контролируем доступ.
|
||||
- ✅ **Наследование** — создаём новые классы на основе существующих.
|
||||
- ✅ **Полиморфизм** — разные классы могут вести себя по-разному.
|
||||
- ✅ **Абстракция** — скрываем сложные детали, оставляем главное.
|
||||
|
||||
🚀 ООП помогает писать **гибкий, переиспользуемый и читаемый код!**
|
||||
|
||||
|
||||
🚀 **_Источник: ChatGPT_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 1
|
||||
---
|
||||
|
||||
# Браузер
|
||||
Источник: DeepSeek
|
||||
|
||||
Из каких модулей(интерфейс, домпарсер, js-движок, рендер, хранилища) состоит браузер?
|
||||
|
||||
@@ -70,4 +69,6 @@ sidebar_position: 1
|
||||
4. JavaScript-движок выполняет JS-код, который может изменять DOM и CSSOM.
|
||||
5. Движок рендеринга строит дерево рендеринга и рассчитывает компоновку.
|
||||
6. Модуль отрисовки отображает пиксели на экране.
|
||||
7. Пользователь видит страницу и взаимодействует с ней через интерфейс.
|
||||
7. Пользователь видит страницу и взаимодействует с ней через интерфейс.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 2
|
||||
---
|
||||
|
||||
# DOM
|
||||
Источник: DeepSeek
|
||||
|
||||
**DOM (Document Object Model)** — это программный интерфейс для работы с HTML и XML документами. Он представляет структуру документа в виде дерева объектов, где каждый узел соответствует элементу, атрибуту или тексту на странице. DOM позволяет программам (например, JavaScript) динамически изменять содержимое, структуру и стили веб-страницы.
|
||||
|
||||
@@ -63,4 +62,6 @@ sidebar_position: 2
|
||||
- `element.remove()` — удаление элемента.
|
||||
5. Работа с атрибутами:
|
||||
- `element.getAttribute('href')` — получение значения атрибута.
|
||||
- `element.setAttribute('class', 'new-class')` — установка атрибута.
|
||||
- `element.setAttribute('class', 'new-class')` — установка атрибута.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 3
|
||||
---
|
||||
|
||||
# CSSOM
|
||||
Источник: DeepSeek
|
||||
|
||||
CSSOM (CSS Object Model) — это программное представление CSS-стилей в виде иерархической структуры объектов, аналогично
|
||||
тому, как DOM (Document Object Model) представляет HTML-документ. CSSOM позволяет JavaScript и другим программам
|
||||
@@ -95,4 +94,6 @@ JavaScript может взаимодействовать с CSSOM через о
|
||||
| Используется для изменения содержимого страницы. | Используется для изменения стилей. |
|
||||
| Создается из HTML. | Создается из CSS. |
|
||||
|
||||
CSSOM — это важная часть процесса рендеринга веб-страниц, которая позволяет браузеру применять стили к элементам и динамически изменять их с помощью JavaScript.
|
||||
CSSOM — это важная часть процесса рендеринга веб-страниц, которая позволяет браузеру применять стили к элементам и динамически изменять их с помощью JavaScript.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 4
|
||||
---
|
||||
|
||||
# Critical render path
|
||||
Источник: DeepSeek
|
||||
|
||||
Критический путь рендеринга (Critical Rendering Path, CRP) — это последовательность шагов, которые браузер выполняет для преобразования HTML, CSS и JavaScript в пиксели на экране. Оптимизация критического пути рендеринга важна для ускорения загрузки и отображения веб-страниц, что напрямую влияет на пользовательский опыт.
|
||||
|
||||
@@ -70,3 +69,5 @@ sidebar_position: 4
|
||||
- **Ускорение загрузки:** Оптимизация CRP уменьшает время до первого отображения контента (First Contentful Paint, FCP).
|
||||
- **Улучшение пользовательского опыта:** Быстрая загрузка страницы повышает удовлетворенность пользователей.
|
||||
- **SEO:** Скорость загрузки страницы влияет на ранжирование в поисковых системах.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 5
|
||||
---
|
||||
|
||||
# Dev-tools
|
||||
Источник: DeepSeek
|
||||
|
||||
DevTools (Инструменты разработчика) — это встроенный в браузер набор инструментов, предназначенный для отладки, анализа и оптимизации веб-страниц. Они предоставляют разработчикам возможность исследовать HTML, CSS, JavaScript, сетевые запросы, производительность и многое другое.
|
||||
|
||||
@@ -99,4 +98,6 @@ DevTools (Инструменты разработчика) — это встро
|
||||
2. **Ограниченная поддержка в старых браузерах:**
|
||||
- Некоторые функции могут отсутствовать в устаревших версиях браузеров.
|
||||
|
||||
**DevTools** — это незаменимый инструмент для веб-разработчиков, который помогает создавать, отлаживать и оптимизировать веб-страницы.
|
||||
**DevTools** — это незаменимый инструмент для веб-разработчиков, который помогает создавать, отлаживать и оптимизировать веб-страницы.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -36,4 +36,6 @@ sidebar_position: 6
|
||||
|
||||
## Важно:
|
||||
CORS работает только в браузерах. Серверные приложения (например, на Node.js или Python) не ограничены политикой CORS.
|
||||
Если сервер не настроен для поддержки CORS, браузер заблокирует запрос, даже если сервер возвращает данные.
|
||||
Если сервер не настроен для поддержки CORS, браузер заблокирует запрос, даже если сервер возвращает данные.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 1
|
||||
---
|
||||
|
||||
# Git
|
||||
Источник: DeepSeek
|
||||
|
||||
Git — это распределённая система управления версиями, которая позволяет отслеживать изменения в файлах и проектах. Она широко используется в разработке программного обеспечения для управления исходным кодом, но может применяться и для других типов файлов.
|
||||
|
||||
@@ -24,4 +23,6 @@ Git — это распределённая система управления
|
||||
- `git branch` — управляет ветками.
|
||||
- `git merge` — объединяет ветки.
|
||||
|
||||
Git был создан Линусом Торвальдсом в 2005 году для разработки ядра Linux и с тех пор стал стандартом в индустрии разработки.
|
||||
Git был создан Линусом Торвальдсом в 2005 году для разработки ядра Linux и с тех пор стал стандартом в индустрии разработки.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 2
|
||||
---
|
||||
|
||||
# CI/CD
|
||||
Источник: DeepSeek
|
||||
|
||||
CI/CD (Continuous Integration / Continuous Deployment или Continuous Delivery) — это набор практик и инструментов, направленных на автоматизацию процессов разработки, тестирования и развертывания программного обеспечения. CI/CD помогает командам разработчиков быстрее и надежнее выпускать качественные продукты.
|
||||
|
||||
@@ -52,4 +51,6 @@ Continuous Deployment / Continuous Delivery — Непрерывное разв
|
||||
3. Если тесты проходят успешно, код автоматически развертывается на staging-сервере.
|
||||
4. После ручного или автоматического подтверждения код развертывается в production.
|
||||
|
||||
**CI/CD** — это ключевая часть современной DevOps-культуры, которая помогает командам быть более эффективными и гибкими.
|
||||
**CI/CD** — это ключевая часть современной DevOps-культуры, которая помогает командам быть более эффективными и гибкими.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 1
|
||||
---
|
||||
|
||||
# Position
|
||||
Источник: DeepSeek
|
||||
|
||||
Свойство position в CSS используется для определения способа позиционирования элемента на веб-странице. Оно позволяет управлять расположением элемента относительно его обычного положения в потоке документа или относительно других элементов.
|
||||
|
||||
@@ -48,4 +47,6 @@ sidebar_position: 1
|
||||
- `z-index` работает только для элементов с позиционированием, отличным от `static`.
|
||||
- `sticky` работает только если у родительского элемента есть высота, иначе поведение может быть непредсказуемым.
|
||||
|
||||
Использование свойства `position` позволяет гибко управлять расположением элементов на странице, создавая сложные макеты и интерактивные интерфейсы.
|
||||
Использование свойства `position` позволяет гибко управлять расположением элементов на странице, создавая сложные макеты и интерактивные интерфейсы.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,10 +3,11 @@ sidebar_position: 2
|
||||
---
|
||||
|
||||
# Сетка flexbox, grid
|
||||
Источник: DeepSeek
|
||||
|
||||
Предназначены для создания гибких и адаптивных макетов.
|
||||
|
||||
## Flexbox
|
||||
Flexbox (Flexible Box Layout) — это мощная модульная система CSS, предназначенная для создания гибких и адаптивных макетов. Она позволяет легко выравнивать элементы, распределять пространство и управлять их поведением в контейнере, даже если размеры элементов неизвестны или динамически изменяются.
|
||||
Flexbox — это одномерная система компоновки, предназначенная для выравнивания элементов по одной оси (горизонтально или вертикально).
|
||||
|
||||
#### Основные концепции Flexbox
|
||||
|
||||
@@ -25,7 +26,7 @@ Flexbox работает с двумя основными сущностями:
|
||||
- Для создания адаптивных интерфейсов.
|
||||
|
||||
## Grid
|
||||
**CSS Grid Layout** (или просто **Grid**) — это мощная система для создания двумерных макетов в CSS. В отличие от Flexbox, который работает с одномерными макетами (либо строка, либо столбец), Grid позволяет управлять как строками, так и столбцами одновременно. Это делает Grid идеальным инструментом для создания сложных, адаптивных сеток.
|
||||
Grid — это двумерная система компоновки, позволяющая работать и с колонками, и со строками одновременно.
|
||||
|
||||
#### Основные концепции Grid
|
||||
1. **Grid Container** (контейнер) — элемент, который содержит дочерние элементы (grid items). Чтобы сделать элемент grid-контейнером, нужно задать ему свойство `display: grid` или `display: inline-grid`.
|
||||
@@ -43,4 +44,6 @@ Flexbox работает с двумя основными сущностями:
|
||||
#### Когда использовать Grid:
|
||||
- Для создания двумерных макетов (например, страницы с боковой панелью, заголовком и футером).
|
||||
- Когда нужно точно контролировать расположение элементов.
|
||||
- Для создания адаптивных интерфейсов с минимальным количеством медиазапросов.
|
||||
- Для создания адаптивных интерфейсов с минимальным количеством медиазапросов.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -4,8 +4,6 @@ sidebar_position: 3
|
||||
|
||||
# Семантические тэги
|
||||
|
||||
Источник: DeepSeek
|
||||
|
||||
Семантические теги HTML — это теги, которые четко описывают их содержимое и предназначение, делая код более понятным как для разработчиков, так и для поисковых систем. Они помогают улучшить структуру документа, упростить его чтение и повысить доступность для людей с ограниченными возможностями.
|
||||
|
||||
Основные семантические теги
|
||||
@@ -64,3 +62,5 @@ sidebar_position: 3
|
||||
- Для создания структурированных и понятных веб-страниц.
|
||||
- Для улучшения доступности и SEO.
|
||||
- Для упрощения работы с кодом в команде.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 4
|
||||
---
|
||||
|
||||
# Блочная модель
|
||||
Источник: DeepSeek
|
||||
|
||||
**Блочная модель CSS** (или **Box Model**) — это фундаментальная концепция, которая описывает, как элементы HTML отображаются на веб-странице. Каждый элемент на странице рассматривается как прямоугольный блок, который состоит из нескольких частей: содержимого, отступов, границ и внешних отступов. Понимание блочной модели важно для управления размерами, расположением и отступами элементов.
|
||||
|
||||
@@ -58,3 +57,5 @@ sidebar_position: 4
|
||||
- Блочная модель CSS состоит из **содержимого**, **внутренних отступов**, **границ** и **внешних отступов**.
|
||||
- Свойство `box-sizing` позволяет управлять тем, как учитываются отступы и границы в размерах элемента.
|
||||
- Понимание блочной модели важно для создания точных и предсказуемых макетов.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 5
|
||||
---
|
||||
|
||||
# Селекторы, специфичность
|
||||
Источник: DeepSeek
|
||||
|
||||
**Специфичность селекторов** в CSS — это механизм, который определяет, какие стили будут применены к элементу, если на него влияют несколько конфликтующих правил. Специфичность рассчитывается на основе типа селекторов, и чем выше специфичность, тем выше приоритет стиля.
|
||||
|
||||
@@ -50,4 +49,6 @@ sidebar_position: 5
|
||||
## Вывод
|
||||
- Специфичность определяет приоритет CSS-правил.
|
||||
- Инлайновые стили и !important имеют наивысший приоритет.
|
||||
- Используйте классы и избегайте избыточной специфичности для поддержания чистоты кода.
|
||||
- Используйте классы и избегайте избыточной специфичности для поддержания чистоты кода.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 6
|
||||
---
|
||||
|
||||
# Препроцессоры
|
||||
Источник: DeepSeek
|
||||
|
||||
**Препроцессоры CSS** — это инструменты, которые расширяют возможности стандартного CSS, добавляя такие функции, как переменные, вложенность, миксины, функции и многое другое. Они позволяют писать более структурированный, поддерживаемый и удобный код, который затем компилируется в стандартный CSS. Если вы работаете над большим проектом, использование препроцессора может сэкономить время и усилия. Наиболее популярные препроцессоры: **Sass**, **Less** и **Stylus**.
|
||||
|
||||
@@ -72,4 +71,6 @@ sidebar_position: 6
|
||||
2. **Кривая обучения:**
|
||||
- Необходимо изучить новый синтаксис и возможности.
|
||||
3. **Сложность отладки:**
|
||||
- Скомпилированный CSS может быть сложнее отлаживать.
|
||||
- Скомпилированный CSS может быть сложнее отлаживать.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 7
|
||||
---
|
||||
|
||||
# Единицы измерения в CSS
|
||||
Источник: DeepSeek
|
||||
|
||||
В CSS существует множество единиц измерения, которые используются для задания размеров, отступов, шрифтов и других свойств элементов. Эти единицы можно разделить на несколько категорий: **абсолютные**, **относительные** и **специальные**.
|
||||
|
||||
@@ -112,3 +111,5 @@ sidebar_position: 7
|
||||
- `vw` и `vh`: Для создания полноэкранных блоков или адаптивных шрифтов.
|
||||
- `ch`: Для работы с текстом (например, ограничение ширины текстового поля).
|
||||
- `deg`, `rad`, `turn`: Для трансформаций и анимаций.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 1
|
||||
---
|
||||
|
||||
# Зачем нужен React
|
||||
Источник: DeepSeek
|
||||
|
||||
Библиотека React — это одна из самых популярных библиотек для создания пользовательских интерфейсов (UI) на JavaScript. Она разработана Facebook (ныне Meta) и активно используется для разработки веб-приложений, мобильных приложений (с помощью React Native) и даже десктопных приложений. Вот основные причины, зачем нужна React, её преимущества и недостатки:
|
||||
|
||||
@@ -57,4 +56,6 @@ sidebar_position: 1
|
||||
- Кроссплатформенная разработка (веб + мобильные приложения).
|
||||
|
||||
## Итог
|
||||
**React** — это мощная и гибкая библиотека, которая подходит для создания современных веб-приложений. Её компонентный подход, высокая производительность и огромная экосистема делают её одним из лучших инструментов для разработки интерфейсов. Однако для простых проектов или статических сайтов React может быть избыточным, и в таких случаях стоит рассмотреть более легкие решения.
|
||||
**React** — это мощная и гибкая библиотека, которая подходит для создания современных веб-приложений. Её компонентный подход, высокая производительность и огромная экосистема делают её одним из лучших инструментов для разработки интерфейсов. Однако для простых проектов или статических сайтов React может быть избыточным, и в таких случаях стоит рассмотреть более легкие решения.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 2
|
||||
---
|
||||
|
||||
# Виртуальный DOM
|
||||
Источник: DeepSeek
|
||||
|
||||
Механизм работы **Virtual DOM** и **Reconciliation** — это ключевые особенности React, которые делают его быстрым и эффективным для обновления пользовательских интерфейсов. Давайте разберём, как это работает.
|
||||
|
||||
@@ -59,4 +58,6 @@ Reconciliation — это процесс сравнения старого и н
|
||||
## Итог
|
||||
- **Virtual DOM** — это оптимизированная копия реального DOM, которая позволяет React быстро обновлять интерфейс.
|
||||
- **Reconciliation** — это процесс сравнения старого и нового Virtual DOM для определения минимального набора изменений.
|
||||
Вместе эти механизмы делают React быстрым, эффективным и удобным для разработки сложных интерфейсов.
|
||||
Вместе эти механизмы делают React быстрым, эффективным и удобным для разработки сложных интерфейсов.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 3
|
||||
---
|
||||
|
||||
# Жизненный цикл компонента
|
||||
Источник: DeepSeek
|
||||
|
||||
Жизненный цикл компонента в React описывает этапы, через которые проходит компонент от момента его создания до удаления из DOM. Эти этапы включают инициализацию, обновление и удаление компонента. React предоставляет методы жизненного цикла, которые позволяют разработчикам управлять поведением компонента на каждом этапе.
|
||||
|
||||
@@ -32,4 +31,6 @@ React также предоставляет методы для обработк
|
||||
|
||||
С появлением React Hooks в версии 16.8, функциональные компоненты также получили возможность использовать аналогичные методы жизненного цикла с помощью хуков, таких как `useEffect`. Это сделало функциональные компоненты более мощными и гибкими.
|
||||
|
||||
Таким образом, жизненный цикл компонента в React позволяет разработчикам контролировать поведение компонента на всех этапах его существования, что делает React мощным инструментом для создания динамических и отзывчивых пользовательских интерфейсов.
|
||||
Таким образом, жизненный цикл компонента в React позволяет разработчикам контролировать поведение компонента на всех этапах его существования, что делает React мощным инструментом для создания динамических и отзывчивых пользовательских интерфейсов.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 4
|
||||
---
|
||||
|
||||
# Состояние и пропсы компонентов
|
||||
Источник: DeepSeek
|
||||
|
||||
В React состояние (state) и пропсы (props) — это два основных способа управления данными в компонентах. Они позволяют
|
||||
компонентам быть динамичными и реагировать на изменения данных. Однако они используются в разных ситуациях и имеют свои
|
||||
@@ -64,3 +63,5 @@ sidebar_position: 4
|
||||
Часто состояние родительского компонента передается в дочерний компонент через пропсы. Если дочерний компонент должен
|
||||
изменить эти данные, он может вызвать callback-функцию, переданную через пропсы, которая изменит состояние родительского
|
||||
компонента.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 5
|
||||
---
|
||||
|
||||
# Базовые хуки React
|
||||
Источник: DeepSeek
|
||||
|
||||
React предоставляет несколько основных хуков, которые позволяют использовать состояние и другие возможности React в функциональных компонентах. Вот основные хуки:
|
||||
|
||||
@@ -78,4 +77,6 @@ useLayoutEffect(() => {
|
||||
- Позволяет отображать метку для пользовательских хуков в инструментах разработчика React.
|
||||
```js
|
||||
useDebugValue(isOnline ? 'Online' : 'Offline');
|
||||
```
|
||||
```
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 6
|
||||
---
|
||||
|
||||
# Что такое HOC
|
||||
Источник: DeepSeek
|
||||
|
||||
Higher-Order Components (HOC) — это продвинутая техника в React для повторного использования логики компонентов. HOC — это функция, которая принимает компонент и возвращает новый компонент с дополнительными свойствами или поведением. Это похоже на паттерн декоратора в программировании.
|
||||
|
||||
@@ -40,4 +39,6 @@ Higher-Order Components (HOC) — это продвинутая техника
|
||||
- Если вы работаете с классовыми компонентами (хуки доступны только в функциональных компонентах).
|
||||
- Если вы предпочитаете паттерн декоратора.
|
||||
|
||||
В остальных случаях, особенно в новых проектах, рекомендуется использовать хуки, так как они проще и удобнее.
|
||||
В остальных случаях, особенно в новых проектах, рекомендуется использовать хуки, так как они проще и удобнее.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,8 @@ sidebar_position: 7
|
||||
---
|
||||
|
||||
# Хуки оптимизации и кэширования
|
||||
Источник: DeepSeek
|
||||
|
||||
useCallback, useMemo, React.Memo (HOC)
|
||||
|
||||
## useCallback
|
||||
`useCallback` — это хук в React, который используется для мемоизации функций. Он помогает оптимизировать производительность компонентов, особенно когда речь идет о передаче функций в дочерние компоненты или их использование в зависимостях других хуков, таких как `useEffect`.
|
||||
@@ -109,4 +110,6 @@ const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
|
||||
|
||||
### Важные моменты:
|
||||
- `useMemo` не гарантирует, что функция не будет выполнена. Она может быть вызвана React для "подстраховки" (например, при изменении приоритетов рендеринга).
|
||||
- Используйте `useMemo` только там, где это действительно необходимо, чтобы не усложнять код без нужды.
|
||||
- Используйте `useMemo` только там, где это действительно необходимо, чтобы не усложнять код без нужды.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 8
|
||||
---
|
||||
|
||||
# Пользовательские хуки
|
||||
Источник: DeepSeek
|
||||
|
||||
Пользовательские хуки в React — это функции, которые позволяют вам использовать состояние и другие возможности React (например, эффекты, контекст и т.д.) в ваших компонентах, но с возможностью повторного использования логики. Пользовательские хуки помогают избежать дублирования кода и делают его более читаемым и поддерживаемым.
|
||||
|
||||
@@ -64,4 +63,6 @@ function App() {
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
```
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 9
|
||||
---
|
||||
|
||||
# Render portal
|
||||
Источник: DeepSeek
|
||||
|
||||
В контексте библиотеки **React**, **Portal (портал)** — это механизм, который позволяет рендерить дочерние элементы
|
||||
|
||||
@@ -106,4 +105,6 @@ export default App;
|
||||
- Модальные окна.
|
||||
- Всплывающие подсказки (tooltips).
|
||||
- Уведомления.
|
||||
- Любые элементы, которые должны отображаться поверх основного интерфейса.
|
||||
- Любые элементы, которые должны отображаться поверх основного интерфейса.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
84
docs/react/10-pure-function.md
Normal file
84
docs/react/10-pure-function.md
Normal file
@@ -0,0 +1,84 @@
|
||||
---
|
||||
sidebar_position: 10
|
||||
---
|
||||
|
||||
# Pure function
|
||||
|
||||
В контексте **React** чистая функция — это **функция, которая**:
|
||||
1. **Детерминирована** — при одинаковых входных данных всегда возвращает одинаковый результат.
|
||||
2. **Не изменяет внешнее состояние** — не мутирует `props`, `state` или глобальные переменные.
|
||||
|
||||
## Примеры чистых и нечистых функций в React
|
||||
✅ Чистая функция (без побочных эффектов):
|
||||
```tsx
|
||||
function add(a: number, b: number) {
|
||||
return a + b;
|
||||
}
|
||||
|
||||
console.log(add(2, 3)); // 5
|
||||
console.log(add(2, 3)); // 5 (всегда один и тот же результат)
|
||||
|
||||
```
|
||||
|
||||
❌ Нечистая функция (изменяет внешнее состояние):
|
||||
```tsx
|
||||
let total = 0;
|
||||
function addToTotal(value: number) {
|
||||
total += value;
|
||||
return total;
|
||||
}
|
||||
|
||||
console.log(addToTotal(5)); // 5
|
||||
console.log(addToTotal(5)); // 10 (изменяется внешнее состояние!)
|
||||
|
||||
```
|
||||
|
||||
## Чистые функции в React-компонентах
|
||||
✅ Функциональные компоненты в React должны быть чистыми!
|
||||
```tsx
|
||||
function Greeting({ name }: { name: string }) {
|
||||
return <h1>Hello, {name}!</h1>;
|
||||
}
|
||||
```
|
||||
📌 Этот компонент:
|
||||
- Всегда рендерит один и тот же вывод для одного name.
|
||||
- Не изменяет props и state.
|
||||
|
||||
❌ Нечистая компонента (мутирует пропсы!):
|
||||
```tsx
|
||||
function BadComponent(props: { user: { name: string } }) {
|
||||
props.user.name = "Hacked!"; // ❌ Изменяем пропсы — это плохо!
|
||||
return <h1>Hello, {props.user.name}!</h1>;
|
||||
}
|
||||
```
|
||||
📌 Почему плохо?
|
||||
- Нарушает принципы React.
|
||||
- Может вызвать неожиданные баги.
|
||||
|
||||
## Где React использует чистые функции?
|
||||
|
||||
✔️ useReducer
|
||||
|
||||
```tsx
|
||||
function reducer(state: number, action: { type: string }) {
|
||||
switch (action.type) {
|
||||
case "increment":
|
||||
return state + 1;
|
||||
case "decrement":
|
||||
return state - 1;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
```
|
||||
📌 reducer — чистая функция: всегда возвращает новый state, не мутируя старый.
|
||||
✔️ useMemo и useCallback
|
||||
Используются для оптимизации **чистых функций** и предотвращения лишних ререндеров.
|
||||
|
||||
## Итог
|
||||
- ✅ Чистые функции не мутируют props и state, не создают побочные эффекты.
|
||||
- ✅ Функциональные компоненты должны быть чистыми.
|
||||
- ✅ useReducer, useMemo, useCallback — инструменты для работы с чистыми функциями.
|
||||
- ❌ Нечистые функции могут вызывать баги и ухудшать производительность.
|
||||
|
||||
🚀 **_Источник: ChatGPT_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 1
|
||||
---
|
||||
|
||||
# Зачем нужны state менеджеры
|
||||
Источник: DeepSeek
|
||||
|
||||
**State Managers** (менеджеры состояния) в контексте React — это инструменты или библиотеки, которые помогают управлять состоянием приложения. В React состояние (state) — это данные, которые определяют, как компонент должен отображаться и вести себя. Однако, когда приложение становится сложным, управление состоянием только с помощью встроенного `useState` или `useReducer` может стать трудным. Здесь на помощь приходят **state managers**.
|
||||
|
||||
@@ -33,4 +32,6 @@ sidebar_position: 1
|
||||
- Если приложение большое и сложное, с множеством компонентов, которые зависят от общего состояния, лучше использовать специализированные state managers (Redux, MobX, Recoil и т.д.).
|
||||
|
||||
## Выбор state manager
|
||||
Выбор зависит от сложности приложения, предпочтений команды и необходимости в дополнительных функциях (например, middleware в Redux). Для небольших проектов часто достаточно Context API или Zustand, а для крупных — Redux или Recoil.
|
||||
Выбор зависит от сложности приложения, предпочтений команды и необходимости в дополнительных функциях (например, middleware в Redux). Для небольших проектов часто достаточно Context API или Zustand, а для крупных — Redux или Recoil.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -150,4 +150,6 @@ export default store;
|
||||
- Когда требуется централизованное управление состоянием.
|
||||
- Когда нужно отслеживать и отлаживать изменения состояния (например, с помощью Redux DevTools).
|
||||
|
||||
Для небольших приложений **Redux** может быть избыточным, и в таких случаях лучше использовать **Context API** или другие более простые решения.
|
||||
Для небольших приложений **Redux** может быть избыточным, и в таких случаях лучше использовать **Context API** или другие более простые решения.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -56,3 +56,5 @@ sidebar_position: 3
|
||||
- Если в приложении много запросов к API и нужно управлять кэшированием.
|
||||
- Если уже используется Redux Toolkit и нужно упростить работу с API.
|
||||
- Для приложений, где требуется минимум boilerplate-кода.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -61,3 +61,5 @@ Zustand — это минималистичная и современная би
|
||||
| Производительность | Оптимизирован для минимизации ререндеров | Может требовать дополнительной оптимизации |
|
||||
| Инструменты отладки | Ограниченные | Redux DevTools |
|
||||
| Сообщество | Меньше | Огромное сообщество |
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -41,4 +41,6 @@ sidebar_position: 5
|
||||
## Когда использовать Apollo Client?
|
||||
- Если ваше приложение использует GraphQL API.
|
||||
- Если требуется кэширование данных и автоматическое обновление UI.
|
||||
- Для сложных приложений с множеством запросов и мутаций.
|
||||
- Для сложных приложений с множеством запросов и мутаций.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -43,3 +43,5 @@ sidebar_position: 6
|
||||
- Если ваше приложение активно взаимодействует с API.
|
||||
- Если требуется кэширование данных и автоматическое обновление UI.
|
||||
- Для приложений с большим количеством асинхронных запросов.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -53,4 +53,6 @@ MobX легко работает с асинхронными операциям
|
||||
## Когда использовать MobX?
|
||||
- Для небольших и средних приложений, где требуется простое и эффективное управление состоянием.
|
||||
- Если вы хотите избежать boilerplate-кода, характерного для Redux.
|
||||
- Для приложений с большим количеством реактивных данных.
|
||||
- Для приложений с большим количеством реактивных данных.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 1
|
||||
---
|
||||
|
||||
# Методологии разработки
|
||||
Источник: DeepSeek
|
||||
|
||||
## Waterfall
|
||||
|
||||
@@ -161,4 +160,6 @@ Kanban часто сравнивают с Scrum, но в отличие от Scr
|
||||
### Когда использовать Kanban:
|
||||
- Для проектов с постоянно меняющимися требованиями.
|
||||
- Для поддержки и улучшения существующих процессов.
|
||||
- Для команд, которые хотят улучшить прозрачность и управление workflow.
|
||||
- Для команд, которые хотят улучшить прозрачность и управление workflow.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 2
|
||||
---
|
||||
|
||||
# Процессы в команде
|
||||
Источник: https://www.youtube.com/watch?v=zCamBnDSbxs
|
||||
|
||||
01:52 Методологии работы
|
||||
В канбан-методологии нет четкого планирования на следующий день.
|
||||
@@ -184,3 +183,5 @@ sidebar_position: 2
|
||||
Срез – это актуальная версия кода для тестировщиков.
|
||||
Срез может называться по-разному, но суть остается той же.
|
||||
Важно понимать, что это просто актуальная версия приложения.
|
||||
|
||||
🚀 **Источник: https://www.youtube.com/watch?v=zCamBnDSbxs**
|
||||
@@ -60,3 +60,5 @@ sidebar_position: 1
|
||||
- Тестирование отдельных компонентов или функций приложения (например, тестирование отдельной функции JavaScript).
|
||||
5. Интеграционное тестирование
|
||||
- Проверка взаимодействия между различными модулями или компонентами приложения.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -4,7 +4,6 @@ sidebar_position: 2
|
||||
|
||||
|
||||
# Типы тестов в приложениях React
|
||||
Источник: [https://open.zeba.academy/testirovanie-prilozheniy-react-luchshie-praktiki-instrumenty/](https://open.zeba.academy/testirovanie-prilozheniy-react-luchshie-praktiki-instrumenty/)
|
||||
Тестирование в приложениях React можно разделить на три основных типа: **модульные тесты**, **интеграционные тесты** и **комплексные (E2E) тесты**. Модульные тесты фокусируются на отдельных компонентах, обеспечивая их корректную работу в изоляции, проверяя такие аспекты, как рендеринг, изменения состояния и обработка событий. Интеграционные тесты проверяют, как компоненты взаимодействуют друг с другом, проверяя поток данных и взаимодействие между различными частями приложения. С другой стороны, тесты E2E моделируют реальные пользовательские сценарии для тестирования всего стека приложений, от пользовательского интерфейса до внутренних служб, гарантируя, что приложение работает так, как задумано с точки зрения пользователя. Каждый тип тестирования играет решающую роль в поддержании надежности приложений React.
|
||||
|
||||
## Модульное тестирование
|
||||
@@ -340,3 +339,5 @@ test('My first test', async t => {
|
||||
.expect(Selector('#article-header').innerText).eql('Thank you, John Doe!');
|
||||
});
|
||||
```
|
||||
|
||||
🚀 **Источник: [https://open.zeba.academy/testirovanie-prilozheniy-react-luchshie-praktiki-instrumenty/](https://open.zeba.academy/testirovanie-prilozheniy-react-luchshie-praktiki-instrumenty/)**
|
||||
@@ -57,4 +57,6 @@ Babel и TypeScript могут использоваться вместе. Нап
|
||||
- TypeScript используется только для проверки типов, а транспиляцию выполняет Babel.
|
||||
- Это позволяет использовать все возможности Babel (например, экспериментальные функции JavaScript).
|
||||
2. **Babel для транспиляции:**
|
||||
- Babel может транспилировать TypeScript-код с помощью плагина `@babel/preset-typescripts`. Этот плагин удаляет типы и преобразует код в JavaScript.
|
||||
- Babel может транспилировать TypeScript-код с помощью плагина `@babel/preset-typescripts`. Этот плагин удаляет типы и преобразует код в JavaScript.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -132,4 +132,6 @@ TypeScript предоставляет богатую систему типов,
|
||||
- Объектные типы (массивы, кортежи, функции, классы).
|
||||
- Продвинутые типы (интерфейсы, объединения, пересечения, дженерики).
|
||||
|
||||
Эти типы помогают писать более безопасный и поддерживаемый код, а также улучшают инструменты разработки, такие как автодополнение и проверка ошибок.
|
||||
Эти типы помогают писать более безопасный и поддерживаемый код, а также улучшают инструменты разработки, такие как автодополнение и проверка ошибок.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -154,4 +154,6 @@ class User implements Person {
|
||||
- `type` и `interface` во многом похожи, но имеют свои уникальные особенности.
|
||||
- `type` более гибок и подходит для сложных типов.
|
||||
- `interface` лучше подходит для объектов и классов, а также поддерживает слияние.
|
||||
- В большинстве случаев выбор между ними зависит от предпочтений разработчика и конкретной задачи.
|
||||
- В большинстве случаев выбор между ними зависит от предпочтений разработчика и конкретной задачи.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -219,4 +219,6 @@ type UserWithoutEmail = Omit<User, "email">;
|
||||
- Уменьшать дублирование кода.
|
||||
- Повышать читаемость и поддерживаемость кода.
|
||||
|
||||
Использование **Utility Types** делает TypeScript более гибким и выразительным, особенно в больших проектах.
|
||||
Использование **Utility Types** делает TypeScript более гибким и выразительным, особенно в больших проектах.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -84,3 +84,5 @@ let numbers = createArray<number>(3, 42); // number[]
|
||||
- **Универсальность:** Generics позволяют писать код, который работает с разными типами.
|
||||
- **Безопасность типов:** TypeScript проверяет типы на этапе компиляции, что помогает избежать ошибок.
|
||||
- **Читаемость:** Generics делают код более выразительным и понятным.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,6 +3,7 @@ sidebar_position: 6
|
||||
---
|
||||
|
||||
# Type guards
|
||||
|
||||
**Type Guards (защитники типов)** в TypeScript — это механизм, который позволяет сужать тип переменной внутри блока кода на основе проверки условий. Это помогает TypeScript лучше понимать, с каким типом данных он работает, и обеспечивает безопасность типов.
|
||||
|
||||
## Зачем нужны Type Guards?
|
||||
@@ -110,4 +111,6 @@ function move(vehicle: Car | Boat) {
|
||||
- Повышать безопасность кода.
|
||||
- Делать код более читаемым и выразительным.
|
||||
|
||||
Используйте **Type Guards**, чтобы TypeScript лучше понимал ваши намерения и помогал избегать ошибок.
|
||||
Используйте **Type Guards**, чтобы TypeScript лучше понимал ваши намерения и помогал избегать ошибок.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -94,4 +94,6 @@ console.log(currentStatus); // 1
|
||||
- **Enum** — это классический способ определения набора констант, но он имеет недостатки.
|
||||
- **`as const`** — это современная альтернатива, которая более гибкая и эффективная.
|
||||
|
||||
Используйте **`as const`**, если хотите избежать недостатков Enum и сделать код более легковесным и оптимизированным.
|
||||
Используйте **`as const`**, если хотите избежать недостатков Enum и сделать код более легковесным и оптимизированным.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
33
docs/typescript/08-namespaces.md
Normal file
33
docs/typescript/08-namespaces.md
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
sidebar_position: 8
|
||||
---
|
||||
|
||||
# Namespaces
|
||||
|
||||
В TypeScript **namespace** (пространство имён) — это способ группировки логически связанных объектов, функций и интерфейсов. Они помогают избежать конфликтов имён в больших кодовых базах, инкапсулируя объявления внутри единого блока.
|
||||
|
||||
Основные особенности:
|
||||
- Определяются с помощью ключевого слова `namespace`.
|
||||
- Внутри можно объявлять переменные, функции, интерфейсы, классы и другие элементы.
|
||||
- Для экспорта элементов используется `export`, иначе они остаются приватными.
|
||||
- Для доступа к элементам снаружи используется `namespaceName.elementName`.
|
||||
|
||||
|
||||
```ts
|
||||
namespace MyNamespace {
|
||||
export class Person {
|
||||
constructor(public name: string) {}
|
||||
greet() {
|
||||
return `Hello, ${this.name}!`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Использование
|
||||
const user = new MyNamespace.Person("Alice");
|
||||
console.log(user.greet()); // Hello, Alice!
|
||||
```
|
||||
|
||||
**Важно: В современных проектах вместо `namespace` чаще используют модули (ES6 modules), так как они поддерживаются нативно и лучше интегрируются с инструментами сборки.**
|
||||
|
||||
🚀 **_Источник: ChatGPT_**
|
||||
89
docs/typescript/09-decorators.md
Normal file
89
docs/typescript/09-decorators.md
Normal file
@@ -0,0 +1,89 @@
|
||||
---
|
||||
sidebar_position: 9
|
||||
---
|
||||
|
||||
# Декораторы
|
||||
|
||||
Декораторы — это специальный вид функций, которые позволяют изменять или дополнять поведение классов, их методов, свойств и параметров. Они используются для метапрограммирования и широко применяются, например, в Angular.
|
||||
|
||||
Особенности:
|
||||
- Включаются флагом experimentalDecorators в tsconfig.json.
|
||||
- Представляют собой функции, принимающие конструктор или описание метода/свойства.
|
||||
- Применяются с @ перед именем.
|
||||
|
||||
Типы декораторов:
|
||||
1. Класс (@ClassDecorator)
|
||||
2. Метод (@MethodDecorator)
|
||||
3. Свойство (@PropertyDecorator)
|
||||
4. Аксессор (@AccessorDecorator)
|
||||
5. Параметр (@ParameterDecorator)
|
||||
|
||||
## Примеры использования
|
||||
1. **Декоратор класса** - Добавляет новое свойство или изменяет поведение класса.
|
||||
```ts
|
||||
function WithTimestamp(constructor: Function) {
|
||||
constructor.prototype.timestamp = new Date();
|
||||
}
|
||||
|
||||
@WithTimestamp
|
||||
class MyClass {}
|
||||
|
||||
const obj = new MyClass();
|
||||
console.log((obj as any).timestamp); // Выведет текущую дату
|
||||
```
|
||||
|
||||
2. **Декоратор метода** - Логирует вызов метода.
|
||||
```ts
|
||||
function Log(target: any, methodName: string, descriptor: PropertyDescriptor) {
|
||||
const original = descriptor.value;
|
||||
descriptor.value = function (...args: any[]) {
|
||||
console.log(`Вызван метод: ${methodName}, аргументы: ${args}`);
|
||||
return original.apply(this, args);
|
||||
};
|
||||
}
|
||||
|
||||
class MyClass {
|
||||
@Log
|
||||
sayHello(name: string) {
|
||||
console.log(`Привет, ${name}!`);
|
||||
}
|
||||
}
|
||||
|
||||
new MyClass().sayHello("Алиса");
|
||||
// В консоли:
|
||||
// Вызван метод: sayHello, аргументы: Алиса
|
||||
// Привет, Алиса!
|
||||
```
|
||||
|
||||
3. **Декоратор свойства** - Изменяет значение свойства при создании объекта.
|
||||
```ts
|
||||
function DefaultValue(value: any) {
|
||||
return function (target: any, propertyKey: string) {
|
||||
let _val = value;
|
||||
Object.defineProperty(target, propertyKey, {
|
||||
get: () => _val,
|
||||
set: (newVal) => _val = newVal,
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
class User {
|
||||
@DefaultValue("Гость")
|
||||
name: string;
|
||||
}
|
||||
|
||||
const user = new User();
|
||||
console.log(user.name); // "Гость"
|
||||
```
|
||||
|
||||
## Итог
|
||||
- Декораторы позволяют изменять классы и их члены.
|
||||
- Их часто используют **в фреймворках (например, Angular)**.
|
||||
- Требуют включения `experimentalDecorators`.
|
||||
- Альтернативой являются **метапрограммирование и DI (dependency injection)**.
|
||||
|
||||
❗ Важно: В JavaScript декораторы пока находятся в стадии разработки (TC39 Stage 3).
|
||||
|
||||
🚀 **_Источник: ChatGPT_**
|
||||
Reference in New Issue
Block a user