JavaScript · Синтаксис · Продвинутый уровень

Паттерны проектирования

10 задач

Повторно используемые решения для распространённых структурных и поведенческих проблем. Охватывает Observer, Strategy, Factory и Decorator на чистом JavaScript.

Краткое введение в тему и пояснения перед упражнениями (упражнения ниже):

Зачем паттерны, Observer с предупреждением об утечке, Strategy

#
**Зачем паттерны проектирования** Паттерны проектирования — именованные решения повторяющихся задач дизайна. Это не код для копирования — это словарь. Когда коллега говорит 'это должен быть Observer' — оба сразу понимают структуру. В JavaScript многие классические OOP-паттерны имеют более простые функциональные эквиваленты — знание обоих позволяет выбрать что читабельнее. **Паттерн Observer — подписка/уведомление** Observer разъединяет производителей событий от потребителей. Основа DOM-событий, Node.js EventEmitter и библиотек управления состоянием: ```js class EventEmitter { constructor() { this._listeners = {}; } on(event, fn) { (this._listeners[event] ??= []).push(fn); } off(event, fn) { this._listeners[event] = (this._listeners[event] || []).filter(l => l !== fn); } emit(event, ...args) { (this._listeners[event] || []).forEach(fn => fn(...args)); } once(event, fn) { const wrap = (...a) => { fn(...a); this.off(event, wrap); }; this.on(event, wrap); } } ``` **Внимание: утечка памяти!** Слушатели зарегистрированные через `.on()` держат ссылку на callback. Если вы прикрепляете слушателей к долгоживущему emitter из короткоживущего компонента — *обязательно* вызывайте `.off()` при уничтожении: ```js // БАГ: handler никогда не удаляется class Widget { mount() { bus.on('data', this.handleData); } // destroy() отсутствует — утечка памяти! } // ПРАВИЛЬНО: class Widget { mount() { bus.on('data', this.handleData); } destroy() { bus.off('data', this.handleData); } } ``` **Паттерн Strategy — замена алгоритмов во время выполнения** ```js class Sorter { constructor(strategy) { this.strategy = strategy; } sort(arr) { return this.strategy([...arr]); } } const asc = arr => arr.sort((a, b) => a - b); const desc = arr => arr.sort((a, b) => b - a); const s = new Sorter(asc); s.sort([3, 1, 2]); // [1, 2, 3] ``` В JavaScript Strategy часто просто 'передать функцию как аргумент' — класс не нужен.

Factory, Decorator (HOF + pipe), Command с undo/redo

#
**Паттерн Factory — скрыть детали создания** ```js function createUser(role) { const base = { role, createdAt: new Date() }; if (role === 'admin') return { ...base, permissions: ['read', 'write', 'delete'] }; if (role === 'viewer') return { ...base, permissions: ['read'] }; throw new Error(`Unknown role: ${role}`); } ``` Factory полезна когда: логика создания сложна, нужно возвращать разные подклассы в зависимости от входных данных, или нужно кэшировать экземпляры. **Паттерн Decorator — расширить через обёртку (функциональный стиль)** ```js // Декоратор таймирования const withTiming = fn => (...args) => { const t = performance.now(); const result = fn(...args); console.log(`${fn.name} took ${(performance.now() - t).toFixed(2)}ms`); return result; }; // Декоратор мемоизации const memoize = fn => { const cache = new Map(); return (...args) => { const key = JSON.stringify(args); if (!cache.has(key)) cache.set(key, fn(...args)); return cache.get(key); }; }; // Compose декораторов: const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x); const timedMemoFib = pipe(memoize, withTiming)(fib); ``` **Паттерн Command — инкапсулировать действия для undo/redo** ```js class TextEditor { constructor() { this.text = ''; this.history = []; } execute(command) { command.execute(this); this.history.push(command); } undo() { this.history.pop()?.undo(this); } } const insertCmd = text => ({ execute: editor => { editor.text += text; }, undo: editor => { editor.text = editor.text.slice(0, -text.length); }, }); const editor = new TextEditor(); editor.execute(insertCmd('Hello')); editor.execute(insertCmd(' world')); console.log(editor.text); // 'Hello world' editor.undo(); console.log(editor.text); // 'Hello' ```

Таблица паттернов, функциональные альтернативы, когда не использовать

#
**Сравнение паттернов** | Паттерн | Какую проблему решает | JS-идиома | |---|---|---| | Observer | Разделить производителей событий от потребителей | `EventEmitter`, `addEventListener` | | Strategy | Замена алгоритма во время выполнения | Передать функцию как аргумент | | Factory | Скрыть сложность создания объектов | Функция возвращающая объект | | Decorator | Расширить без изменения оригинала | Функция высшего порядка | | Command | Инкапсулировать действия; undo/очередь | Объект с `execute`/`undo` | | Singleton | Один общий экземпляр | `const inst = new X()` на уровне модуля | **Функциональные альтернативы — часто проще в JS** ```js // Strategy — просто передать функцию: function process(data, transform) { return transform(data); } process(data, x => x * 2); // Decorator — compose с pipe: const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x); const sanitize = pipe(trim, lowercase, removeSpecialChars); // Singleton — сам модуль является singleton: // config.js export const config = { debug: false, version: '1.0' }; // Все кто импортирует config — получают один и тот же объект ``` **Когда НЕ использовать паттерны** - Не используйте Observer когда функция вызывается в одном месте - Не используйте Factory когда `new MyClass(arg)` уже достаточно читаем - Не используйте Singleton для безсостоятельных утилит — просто экспортируйте функции - Паттерны решают проблемы *коммуникации* между компонентами, не вычисления **Распознавание паттернов** | Вы видите... | Паттерн | |---|---| | `.addEventListener` / `.on()` / `.subscribe()` | Observer | | Функция как параметр конфигурации | Strategy | | `createX()` вместо `new X()` | Factory | | Функция оборачивающая функцию (`withX(fn)`) | Decorator | | Пара `execute()` + `undo()` | Command | | Кэшированный экземпляр на уровне модуля | Singleton |

Упражнения:

01

Observer: класс EventEmitter

#

Реализуйте класс `EventEmitter` с тремя методами: `on(event, listener)` — зарегистрировать слушателя; `off(event, listener)` — удалить слушателя; `emit(event, ...args)` — вызвать всех слушателей события с аргументами.

class EventEmitter {
  constructor() {
    this._listeners = {};
  }

  on(event, listener) {
    // зарегистрируйте слушателя
  }

  off(event, listener) {
    // удалите слушателя
  }

  emit(event, ...args) {
    // вызовите всех слушателей
  }
}

const emitter = new EventEmitter();
const greet = name => console.log(`Hello, ${name}!`);
emitter.on('greet', greet);
emitter.emit('greet', 'Alice');  // Hello, Alice!
emitter.off('greet', greet);
emitter.emit('greet', 'Carol');  // (ничего)
Решение 
class EventEmitter {
  constructor() {
    this._listeners = {};
  }

  on(event, listener) {
    if (!this._listeners[event]) this._listeners[event] = [];
    this._listeners[event].push(listener);
  }

  off(event, listener) {
    if (!this._listeners[event]) return;
    this._listeners[event] = this._listeners[event].filter(l => l !== listener);
  }

  emit(event, ...args) {
    (this._listeners[event] || []).forEach(l => l(...args));
  }
}

const emitter = new EventEmitter();
const greet = name => console.log(`Hello, ${name}!`);
emitter.on('greet', greet);
emitter.emit('greet', 'Alice');  // Hello, Alice!
emitter.off('greet', greet);
emitter.emit('greet', 'Carol');  // (ничего)
02

Observer: once() — сработать только раз

#

Добавьте метод `once(event, listener)` к `EventEmitter`. Он должен зарегистрировать слушателя, который автоматически удаляется после первого срабатывания.

class EventEmitter {
  constructor() { this._listeners = {}; }

  on(event, fn) {
    if (!this._listeners[event]) this._listeners[event] = [];
    this._listeners[event].push(fn);
  }

  off(event, fn) {
    if (!this._listeners[event]) return;
    this._listeners[event] = this._listeners[event].filter(l => l !== fn);
  }

  emit(event, ...args) {
    (this._listeners[event] || []).forEach(l => l(...args));
  }

  once(event, fn) {
    // срабатывает fn один раз, затем удаляется автоматически
  }
}

const ee = new EventEmitter();
ee.once('connect', () => console.log('connected!'));
ee.emit('connect');  // connected!
ee.emit('connect');  // (ничего)
Решение 
class EventEmitter {
  constructor() { this._listeners = {}; }

  on(event, fn) {
    if (!this._listeners[event]) this._listeners[event] = [];
    this._listeners[event].push(fn);
  }

  off(event, fn) {
    if (!this._listeners[event]) return;
    this._listeners[event] = this._listeners[event].filter(l => l !== fn);
  }

  emit(event, ...args) {
    (this._listeners[event] || []).forEach(l => l(...args));
  }

  once(event, fn) {
    const wrapper = (...args) => {
      fn(...args);
      this.off(event, wrapper);
    };
    this.on(event, wrapper);
  }
}

const ee = new EventEmitter();
ee.once('connect', () => console.log('connected!'));
ee.emit('connect');  // connected!
ee.emit('connect');  // (ничего)
03

Strategy: замена алгоритмов сортировки

#

Создайте класс `Sorter` с методом `sort(arr)`. Алгоритм сортировки вводится через конструктор как функция-стратегия. Поддержите как минимум две стратегии: bubble sort и встроенную сортировку. Продемонстрируйте замену стратегий во время выполнения.

class Sorter {
  constructor(strategy) {
    this.strategy = strategy;
  }

  sort(arr) {
    return this.strategy([...arr]);
  }
}

const bubbleSort = arr => {
  // реализуйте bubble sort
};

const nativeSort = arr => arr.sort((a, b) => a - b);

const sorter = new Sorter(bubbleSort);
console.log(sorter.sort([3, 1, 4, 1, 5])); // [1, 1, 3, 4, 5]

sorter.strategy = nativeSort;
console.log(sorter.sort([9, 2, 7]));       // [2, 7, 9]
Решение 
class Sorter {
  constructor(strategy) {
    this.strategy = strategy;
  }

  sort(arr) {
    return this.strategy([...arr]);
  }
}

const bubbleSort = arr => {
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length - i - 1; j++) {
      if (arr[j] > arr[j + 1]) [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
    }
  }
  return arr;
};

const nativeSort = arr => arr.sort((a, b) => a - b);

const sorter = new Sorter(bubbleSort);
console.log(sorter.sort([3, 1, 4, 1, 5])); // [1, 1, 3, 4, 5]

sorter.strategy = nativeSort;
console.log(sorter.sort([9, 2, 7]));        // [2, 7, 9]
04

Strategy: способы оплаты

#

Создайте класс `Checkout` с методом `pay(amount)`. Три стратегии оплаты: `creditCard`, `paypal` и `crypto` — каждая является функцией, принимающей сумму и выводящей сообщение. Стратегия устанавливается через `checkout.setStrategy(fn)`.

const creditCard = amount => console.log(`Charged $${amount} to credit card`);
const paypal = amount => console.log(`Sent $${amount} via PayPal`);
const crypto = amount => console.log(`Transferred $${amount} in BTC`);

class Checkout {
  setStrategy(strategy) {
    this.strategy = strategy;
  }

  pay(amount) {
    // вызовите this.strategy
  }
}

const checkout = new Checkout();
checkout.setStrategy(creditCard);
checkout.pay(50);   // Charged $50 to credit card
Решение 
const creditCard = amount => console.log(`Charged $${amount} to credit card`);
const paypal = amount => console.log(`Sent $${amount} via PayPal`);
const crypto = amount => console.log(`Transferred $${amount} in BTC`);

class Checkout {
  setStrategy(strategy) {
    this.strategy = strategy;
  }

  pay(amount) {
    if (!this.strategy) throw new Error('No payment strategy set');
    this.strategy(amount);
  }
}

const checkout = new Checkout();
checkout.setStrategy(creditCard);
checkout.pay(50);
checkout.setStrategy(paypal);
checkout.pay(30);
checkout.setStrategy(crypto);
checkout.pay(100);
05

Factory: создание фигур

#

Напишите фабричную функцию `createShape(type, ...dims)`, создающую объекты фигур. Поддерживаемые типы: `'circle'` (радиус), `'rect'` (ширина, высота). Каждый объект фигуры должен иметь метод `area()`. Бросайте ошибку для неизвестных типов.

function createShape(type, ...dims) {
  // верните объект фигуры в зависимости от типа
}

const c = createShape('circle', 5);
console.log(c.area().toFixed(2)); // 78.54

const r = createShape('rect', 4, 3);
console.log(r.area());             // 12
Решение 
function createShape(type, ...dims) {
  switch (type) {
    case 'circle': {
      const [r] = dims;
      return { type: 'circle', area: () => Math.PI * r * r };
    }
    case 'rect': {
      const [w, h] = dims;
      return { type: 'rect', area: () => w * h };
    }
    default:
      throw new Error(`Unknown shape: ${type}`);
  }
}

const c = createShape('circle', 5);
console.log(c.area().toFixed(2)); // 78.54

const r = createShape('rect', 4, 3);
console.log(r.area());             // 12
06

Decorator: добавить логирование к любой функции

#

Напишите декоратор `withLogging(fn)`, оборачивающий любую функцию. Перед вызовом оригинала выводите `'Calling <fn.name> with <args>'`. После возврата выводите `'<fn.name> returned <result>'`. Возвращайте новую функцию с той же сигнатурой.

function withLogging(fn) {
  return function(...args) {
    // выводите до вызова
    // вызовите fn
    // выводите после
    // верните результат
  };
}

function add(a, b) { return a + b; }

const loggedAdd = withLogging(add);
loggedAdd(2, 3);
// Calling add with 2,3
// add returned 5
Решение 
function withLogging(fn) {
  return function(...args) {
    console.log(`Calling ${fn.name} with ${args}`);
    const result = fn(...args);
    console.log(`${fn.name} returned ${result}`);
    return result;
  };
}

function add(a, b) { return a + b; }

const loggedAdd = withLogging(add);
loggedAdd(2, 3);
// Calling add with 2,3
// add returned 5
07

Decorator: memoize

#

Напишите декоратор `memoize(fn)`, кэширующий результаты по аргументам. При повторных вызовах с теми же аргументами возвращайте кэшированное значение без повторного запуска. Используйте `Map` для кэша. Протестируйте с медленным `factorial`, логирующим запуск.

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    // проверьте кэш, вычислите при промахе, сохраните и верните
  };
}

function factorial(n) {
  console.log(`Computing factorial(${n})`);
  return n <= 1 ? 1 : n * factorial(n - 1);
}

const memoFactorial = memoize(factorial);
console.log(memoFactorial(5));  // выводит Computing, возвращает 120
console.log(memoFactorial(5));  // без Computing — кэшировано
Решение 
function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}

function factorial(n) {
  console.log(`Computing factorial(${n})`);
  return n <= 1 ? 1 : n * factorial(n - 1);
}

const memoFactorial = memoize(factorial);
console.log(memoFactorial(5));
console.log(memoFactorial(5));  // без Computing
08

Singleton: экземпляр на уровне модуля

#

Реализуйте Singleton `Logger` с использованием паттерна ES-модуля. Модуль экспортирует один экземпляр `logger`. Все импортёры должны делить один экземпляр — сообщения накапливаются между вызовами. Покажите, что вызовы `logger.log()` из двух 'файлов' добавляются в тот же лог.

// logger.js
class Logger {
  constructor() { this.messages = []; }
  log(msg) {
    this.messages.push(msg);
    console.log(`[LOG] ${msg}`);
  }
  getAll() { return this.messages; }
}

export const logger = new Logger();

// fileA.js
import { logger } from './logger.js';
logger.log('Event from A');

// fileB.js
import { logger } from './logger.js';
logger.log('Event from B');
console.log(logger.getAll()); // ['Event from A', 'Event from B']
Решение 
// logger.js — один экземпляр на всё приложение
class Logger {
  constructor() { this.messages = []; }
  log(msg) { this.messages.push(msg); console.log(`[LOG] ${msg}`); }
  getAll() { return this.messages; }
}

export const logger = new Logger();

// Симуляция двух файлов в одном скрипте:
const sharedLogger = { messages: [], log(m) { this.messages.push(m); }, getAll() { return this.messages; } };

sharedLogger.log('Event from A');
sharedLogger.log('Event from B');
console.log(sharedLogger.getAll()); // ['Event from A', 'Event from B']
09

Функциональная композиция как декорирование

#

Напишите функцию `compose(...fns)`, возвращающую новую функцию, применяющую заданные функции справа налево. Затем постройте текстовый конвейер: `trim` -> `lowercase` -> `exclaim` (добавить `!`). Композиция трёх даёт функцию, применяющую все три последовательно.

const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);

const trim = s => s.trim();
const lowercase = s => s.toLowerCase();
const exclaim = s => s + '!';

const process = compose(exclaim, lowercase, trim);
console.log(process('  Hello World  ')); // hello world!
Решение 
const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);

const trim = s => s.trim();
const lowercase = s => s.toLowerCase();
const exclaim = s => s + '!';

const process = compose(exclaim, lowercase, trim);
console.log(process('  Hello World  ')); // hello world!

// pipe (слева направо):
const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
const process2 = pipe(trim, lowercase, exclaim);
console.log(process2('  Hello World  ')); // hello world!
10

Observer: типизированная шина событий с payload

#

Создайте `EventBus`, где события несут типизированные payload. `subscribe(type, handler)` — зарегистрировать обработчик; `publish(type, payload)` — вызвать все обработчики типа с payload; `unsubscribe(type, handler)` — удалить обработчик. Продемонстрируйте с событием 'user:login', несущим `{ userId, name }`.

class EventBus {
  constructor() { this._handlers = {}; }

  subscribe(type, handler) {
    // зарегистрируйте обработчик
  }

  unsubscribe(type, handler) {
    // удалите обработчик
  }

  publish(type, payload) {
    // вызовите все обработчики
  }
}

const bus = new EventBus();
const onLogin = ({ userId, name }) => console.log(`User ${name} (${userId}) logged in`);
bus.subscribe('user:login', onLogin);
bus.publish('user:login', { userId: 42, name: 'Alice' });
bus.unsubscribe('user:login', onLogin);
bus.publish('user:login', { userId: 99, name: 'Bob' }); // (ничего)
Решение 
class EventBus {
  constructor() { this._handlers = {}; }

  subscribe(type, handler) {
    if (!this._handlers[type]) this._handlers[type] = [];
    this._handlers[type].push(handler);
  }

  unsubscribe(type, handler) {
    if (!this._handlers[type]) return;
    this._handlers[type] = this._handlers[type].filter(h => h !== handler);
  }

  publish(type, payload) {
    (this._handlers[type] || []).forEach(h => h(payload));
  }
}

const bus = new EventBus();
const onLogin = ({ userId, name }) => console.log(`User ${name} (${userId}) logged in`);
bus.subscribe('user:login', onLogin);
bus.publish('user:login', { userId: 42, name: 'Alice' });
bus.unsubscribe('user:login', onLogin);
bus.publish('user:login', { userId: 99, name: 'Bob' });