Стратегія проектування: Потужний інструмент для гнучкого коду
Шаблон проектування Стратегії (Strategy Design Pattern) — це один з найпотужніших і найбільш універсальних шаблонів поведінки для тих, хто хоче писати гнучкий, модульний та легкий у підтримці код. У цій статті ми розглянемо, як цей шаблон може бути застосований для вирішення повсякденних задач, використовуючи практичні приклади на node та react.
Що таке шаблон Стратегії? Шаблон проектування Стратегії дозволяє визначити сімейство алгоритмів, інкапсулювати їх і зробити їх взаємозамінними. Це означає, що ви можете змінювати поведінку об'єкта без зміни його коду — просто замінюючи стратегію, яка використовується. Замість того, щоб дотримуватись фіксованої поведінки, ви маєте гнучкість змінювати спосіб виконання задач залежно від контексту.
Веселий приклад: Уявіть футбольну команду. Під час гри команда може змінювати тактику: атакувати, захищатися або контролювати середину поля. Кожна з цих тактик має свою поведінку, але вони всі є частиною однієї «команди». Замість того, щоб дотримуватись однієї тактики, ви можете змінювати її під час гри, залежно від ситуації. Це і є основна ідея шаблону Стратегії.
Застосування Стратегії в коді
Тепер, коли ми розібрали концепцію, давайте подивимося, як це виглядає в коді. Нижче ми наводимо два практичні приклади використання шаблону Стратегії: один на node для зміни тактики футбольної команди, і інший на react для вирішення, чи показувати промоцію користувачу.
Node.js — Футбольні тактики
Ось фрагмент коду, що імітує зміну футбольних тактик.
Залежно від ситуації на полі, команда може вибирати різні стратегії гри, такі як атака, захист або контроль середини поля.
// Стратегії тактик
class Attack {
applyTactic() {
return "Тактика команди — зосередитись на атаці!";
}
}
class Defense {
applyTactic() {
return "Тактика команди — зосередитись на захисті!";
}
}
class Midfield {
applyTactic() {
return "Тактика команди — домінувати на середній лінії!";
}
}
// Контекст
class FootballTeam {
constructor(tactic) {
this.tactic = tactic;
}
setTactic(tactic) {
this.tactic = tactic;
}
applyTactic() {
return this.tactic.applyTactic();
}
}
// Використання
const team = new FootballTeam(new Attack());
console.log(team.applyTactic());
team.setTactic(new Defense());
console.log(team.applyTactic());
team.setTactic(new Midfield());
console.log(team.applyTactic());
React.js — Промоція чи ні
У цьому прикладі показано, як можна використати шаблон Стратегії в React-додатку для перемикання між показом або непоказом промоції користувачу, в залежності від стану.
import React, { useState } from "react";
// Стратегії відображення
const Promotion = () =>
Вітаємо! Ви отримали промоцію зі знижкою 20%!
;
const NoPromotion = () =>
На жаль, зараз немає промоції.
;
// Компонент контексту
const PromoContext = ({ strategy }) => {
return (
{strategy === "promotion" ? : }
);
};
const App = () => {
const [hasPromotion, setHasPromotion] = useState(false);
return (
setHasPromotion(true)}>Активувати промоцію
setHasPromotion(false)}>Деактивувати промоцію
);
};
export default App;
Переваги шаблону Стратегії:
- Гнучкість: Дозволяє змінювати поведінку об'єкта під час виконання без змін основного коду.
- Розв'язання: Окремо інкапсулює алгоритм від контексту, який його використовує, що полегшує підтримку та розширення коду.
- Динамічна заміна: Дозволяє легко змінювати поведінки залежно від контексту, не змінюючи клієнтський код.
- Легша підтримка: Оскільки кожна стратегія інкапсулюється в класі або функції, змінювати чи додавати нові поведінки простіше, не впливаючи на інші частини системи.
- Чистіший, організованіший код: Уникає складних умов (як if/else чи switch) в одному класі, централізуючи специфічні поведінки.
- Легше тестування: Стратегії можна тестувати окремо, роблячи тести більш фокусованими та простими.
- Повторне використання: Стратегії можна використовувати в різних контекстах або проектах, сприяючи повторному використанню коду.
- Масштабованість: Полегшує додавання нових поведінок або алгоритмів без зміни класів, які вже використовують цей шаблон.
Висновок
Шаблон проектування Стратегії — це чудовий спосіб додати гнучкість у ваш код, дозволяючи змінювати поведінку в реальному часі без змін основного коду. Чи то в бекенд-системах на node, чи в інтерфейсах користувача на react, Стратегія може стати рішенням, яке зробить ваш код більш модульним, масштабованим і зрозумілим.
Посилання:
Перекладено з: How the Strategy Design Pattern Can Make Your Code More Flexible and Modular