Шаблоны проектирования JavaScript — Шаблон декоратора

Шаблон декоратора — это шаблон проектирования, который позволяет расширять поведение объекта без изменения его существующей структуры. Этот шаблон особенно полезен при разработке JavaScript, поскольку он позволяет добавлять новые функции к объектам, не изменяя их исходную реализацию.

В этом сообщении блога мы подробно рассмотрим шаблон декоратора, а также примеры, демонстрирующие его реализацию в JavaScript.

Что такое шаблон декоратора?

Шаблон декоратора включает в себя обертывание объекта декоратором, который добавляет или переопределяет свойства или методы объекта. Этот шаблон продвигает принцип единой ответственности, сохраняя функциональность исходного объекта без изменений, допуская динамические модификации.

Реализация шаблона декоратора в JavaScript

Давайте рассмотрим простой пример, чтобы понять, как шаблон декоратора можно реализовать в JavaScript.

function Coffee() {
  this.cost = function() {
    return 2;
  };
}

function Milk(coffee) {
  this.cost = function() {
    return coffee.cost() + 0.5;
  };
}

function Sugar(coffee) {
  this.cost = function() {
    return coffee.cost() + 0.25;
  };
}

const basicCoffee = new Coffee();
const coffeeWithMilk = new Milk(basicCoffee);
const coffeeWithMilkAndSugar = new Sugar(coffeeWithMilk);

console.log(basicCoffee.cost()); // Output: 2
console.log(coffeeWithMilk.cost()); // Output: 2.5
console.log(coffeeWithMilkAndSugar.cost()); // Output: 2.75

В приведенном выше примере мы определяем функцию Coffee, которая представляет базовый кофе с помощью метода cost. Затем мы создаем два декоратора, Milk и Sugar, каждый со своим собственным методом cost, который увеличивает стоимость исходного кофе.

При создании кофе с молоком и сахаром мы оборачиваем базовый кофе декораторами Milk и Sugar. Это позволяет нам расширить функциональность кофе без изменения самой функции Coffee.

Заключение

Шаблон декоратора — это мощный шаблон проектирования, позволяющий расширять функциональные возможности объектов без изменения их исходной структуры. Внедряя этот шаблон в свои проекты JavaScript, вы можете создавать гибкий и удобный для сопровождения код, соответствующий принципу единой ответственности.

Если вам понравилась статья и вы хотите выразить свою поддержку, не забудьте:

👏 Аплодируйте истории (50 хлопков), чтобы эта статья попала в топ

👉Подпишитесь на меня в Средний

Ознакомьтесь с дополнительными материалами в моем профиле Medium