🌍 Привет мир!

🌍 Привет мир!

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

🚀 Мотивация

Один из ключевых принципов проектирования — разделение ответственности. Proxy позволяет легко добавлять к основному объекту дополнительное поведение без его изменения.

⁉️ Где можно применить proxy?

1️⃣ Логирование: Отслеживание вызовов методов.
2️⃣ Кэширование: Хранение результатов вычислений для повышения производительности.
3️⃣ Проверка доступа: Ограничение доступа к методам и данным на основе определенных условий.

📎 Примеры реализации proxy

1️⃣ Axios — Перехватчик для изменения запросов и ответов.
2️⃣ Redux — Middleware для перехвата и модификации действий, отправляемых в стор.
3️⃣ JavaScript (ES6) — Объект Proxy для перехвата и переопределения операций с объектами.
4️⃣ Vue.js — Реактивное связывание данных с использованием прокси (в Vue 3) для отслеживания изменений и обновления компонентов.

🔍 Что такое proxy pattern?

Proxy Pattern — структурный паттерн проектирования, который позволяет создать объект, который управляет доступом к другому объекту. Можно использовать в связке с Observer Pattern (уведомлять об изменении таргет объекта) и Decorator Pattern (декоратор добавляет функционал к объекту).

📝 Пример реализации proxy:

Используем прокси для кэширования, чтобы уменьшить количество обращений к базе данных.

interface ProductService {
  getProductDetails(id: string): string;
}

class ProductDatabase implements ProductService {
  public getProductDetails(id: string): string {
    console.log(`ProductDatabase: Извлечение деталей о продукте ${id}.`);
    // Симуляция вызова базы данных
    return `Информация о продукте: ${id}`;
  }
}

Реальный (класс) объект, в котором содержится core business logic.

class ProductProxy implements ProductService {
  private productDatabase: ProductDatabase;
  private cache: { [key: string]: string } = {};

  constructor(productDatabase: ProductDatabase) {
    this.productDatabase = productDatabase;
  }

  public getProductDetails(id: string): string {
    if (this.cache[id]) {
      console.log(`Proxy: Возврат продукта ${id} из кэша.`);
      return this.cache[id];
    }

    console.log(`Proxy: Пусто, извлечение из базы данных.`);
    const details = this.productDatabase.getProductDetails(id);
    this.cache[id] = details;
    return details;
  }
}

Прокси в котором кэшируются данные, полученные от базы данных в случае если их там не было, или возвращаются уже имеющиеся из cache.

// Реализация
function clientCode(productService: ProductService, id: string) {
  console.log(productService.getProductDetails(id));
}

// Пример без прокси
const productDatabase = new ProductDatabase();
clientCode(productDatabase, 'молоко');

 // Результат
ProductDatabase: Извлечение деталей о продукте молоко.
Информация о продукте: молоко

// Пример с прокси
const productProxy = new ProductProxy(productDatabase);

clientCode(productProxy, 'кефир'); // Первый вызов
clientCode(productProxy, 'кефир'); // Второй вызов

// Результат
// Первый вызов
Proxy: Пусто, извлечение из базы данных.
ProductDatabase: Извлечение деталей о продукте кефир.
Информация о продукте: кефир

// Второй вызов
Proxy: Возврат продукта кефир из кэша.
Информация о продукте: кефир

Происходит взаимодействие с интерфейсом ProductService, который может быть как прямым подключением к ProductDatabase, так и через ProductProxy. При использовании прокси повторные запросы на те же данные о продукте обслуживаются из кэша.

‼️ Внимание

💡 Добавление прокси может повлиять на производительность из-за дополнительного уровня абстракции.
💡 Не злоупотребляйте прокси для задач, которые можно решить более простыми способами.
💡 Использование Proxy может усложнить дебаг и чтение кода, особенно если прокси оборачивает другой прокси.

💬 Делитесь своим мнением в комментариях👇! Если вам понравилась статья, не забудьте поставить лайк! 👍

#PATTERNS