Template Method (Шаблонний метод)

Повне пояснення

1. Що це і навіщо

Template Method – паттерн поведінки, що дозволяє визначити структуру алгоритму в базовому класі і залишити реалізацію окремих кроків підкласам. Підходить, коли алгоритм має фіксовану послідовність дій, але деякі з них варіюються.

2. Принцип роботи / алгоритм

Базовий клас (Context) містить public run() – шаблонний метод, який викликає послідовно абстрактні stepX()‑методи. Підкласи реалізують ці кроки, змінюючи поведінку без зміни структури.

3. Реалізація (JS / TS)

1. Базова реалізація

   abstract class Game {
     public play() { this.init(); this.loop(); this.end(); }
     protected abstract init(): void;
     protected abstract loop(): void;
     protected abstract end(): void;
   }
   

2. Веб‑dev приклад – рендеринг різних типів форм

   abstract class Form {
     public render() { this.renderHeader(); this.renderBody(); this.renderFooter(); }
     protected abstract renderHeader(): void;
     protected abstract renderBody(): void;
     protected abstract renderFooter(): void;
   }
   class LoginForm extends Form { /* реалізація */ }
   

3. Новачковий приклад – простий калькулятор

   abstract class Calculator {
     public calculate(a:number,b:number){ this.before(); const r=this.operation(a,b); this.after(); return r; }
     protected abstract operation(a:number,b:number): number;
     protected before(){ console.log('start'); }
     protected after(){ console.log('end'); }
   }
   class AddCalc extends Calculator{ protected operation(a,b){ return a+b; } }
   

4. Тестування (Jest або Vitest)

import { AddCalc } from './calc';
test('adds correctly', () => {
  const calc = new AddCalc();
  expect(calc.calculate(2,3)).toBe(5);
});

5. Проблеми та edge cases

1. Неправильне використання ролей – підкласи змінюють порядок кроків, що порушує контракт.
2. Зайва абстракція – надмірна кількість шаблонних методів у базовому класі.
3. Cyclical dependencies – підклас викликає метод базового класу, який знову звертається до підкласа.
4. Плутанина між паттернами – схоже на Strategy, але тут порядок фіксований.
5. Performance‑пастки – кожен виклик абстрактного методу створює контекст, що збільшує накладні витрати.

6. Оптимізація та продуктивність

Шаблонний метод мінімізує дублювання коду, але кожен виклик абстрактного методу додає накладні витрати. Якщо кроки дорогі, можна кешувати результати або використовувати lazy‑інстанцювання.

7. Без JS / архітектурні альтернативи

У чистій HTML/CSS можна розділити шаблон на базовий макет і вставляти специфічні блоки через Web Components або шаблони (Handlebars, EJS). У CSS можна використовувати @extend у SCSS для спільної структури.

8. Cheatsheet + follow-up

• Cheatsheet: abstract class Template { run(){ step1(); step2(); } protected abstract step1(): void; protected abstract step2(): void; }
• Interview Q: Як Template Method відрізняється від Strategy?
• Follow‑up Q: Чи можна змінювати порядок кроків під час виконання?