Декораторы в JavaScript

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

Пример использования:

@filterMales // Это декоратор
class MyClass {
  constructor(children) {
    this.children = children
  }
}

Декораторы — это синтаксический сахар. Если вы работали с JavaScript, то, вероятно, уже сталкивались с их реализацией. Они просты в написании, но эффективны в использовании.

Рассмотрим несколько примеров декораторов в JavaScript и узнаем, как можно применять их в коде.

Когда нужно использовать декоратор?

Существует несколько случаев применения:

Добавление динамического поведения к существующим объектам

Как было сказано ранее, один из сценариев использования декораторов — динамическое добавление дополнительной логики к объектам без необходимости использовать такие альтернативы, как наследование.

Примечание: декораторы могут вводить функции в объекты не заметно для остальных частей кода.

Допустим, у нас есть класс Frog, который будет реализовывать метод lick. У лягушек есть зубы, поэтому мы также реализуем метод getTeeths, чтобы вернуть количество зубов, которое у них есть.

Реализация может выглядеть следующим образом:

function Frog(name) {
  this.name = name
}

Frog.prototype.getTeeths = function() {
  return 2
}

Frog.prototype.lick = function(target) {
  console.log(`I'm going lick you, ${target.name}. You better taste delicious`)
}

// Или с классами

class Frog {
  constructor(name) {
    this.name = name
  }

  getTeeths() {
    return 2
  }

  lick(target) {
    console.log(
      `I'm going lick you, ${target.name}. You better taste delicious`,
    )
  }
}

В реальности существуют и другие разновидности лягушек, например жаба. Жаба относится к лягушкам, но лягушка не является жабой. Это означает, что между ними должны быть отличительные особенности, которые нельзя смешивать.

Поскольку жаба — это лягушка, то можно создать декоратор withToad, который при необходимости будет представлять экземпляр frog для обозначения жаб.

Помните, что декоратор должен лишь расширять или добавлять дополнительное поведение к элементу, но не изменять его реализацию.

Реализация декоратора withToad выглядит довольно просто:

function withToad(frog) {
  frog.getTeeths = function() {
    return 0
  }
}

const mikeTheFrog = new Frog('mike')
withToad(mikeTheFrog)

console.log(mikeTheFrog.getTeeths())

Декоратор withToad повторно реализует getTeeths, возвращающий 0, поскольку у жаб нет зубов. При использовании этого декоратора лягушка «преобразуется» в жабу.

Достичь той же цели можно с помощью метода subclass с наследованием, как показано ниже:

function Toad(name) {
  Frog.call(this, name)
  
  this.getTeeths = function() {
    return 0
  }
}

const kellyTheToad = new Toad('kelly')

// или с помощью классов

class Toad extends Frog {
  getTeeths() {
    return 0
  }
}

const kellyTheToad = new Toad('kelly')

Разница между этими двумя подходами заключается в том, что при использовании декораторов не нужно создавать классы для жаб.

Теперь переходим к более интересным примерам.

Допустим, мы создаем приложение, которое поддерживает различные предварительно определенные пользовательские темы, с помощью которых можно изменять стиль панели управления.

Мы реализуем Theme с помощью метода createStylesheet для создания совместимой таблицы стилей, а также applyStyles для анализа и применения этой таблицы к DOM:

function Theme() {}

Theme.prototype.createStylesheet = function() {
  return {
    header: {
      color: '#333',
      fontStyle: 'italic',
      fontFamily: 'Roboto, sans-serif',
    },
    background: {
      backgroundColor: '#fff',
    },
    button: {
      backgroundColor: '#fff',
      color: '#333',
    },
    color: '#fff',
  }
}

Theme.prototype.applyStylesheet = function(stylesheet) {
  const bodyElem = document.querySelector('body')
  const headerElem = document.getElementById('header')
  const buttonElems = document.querySelectorAll('button')
  this.applyStyles(bodyElem, stylesheet.background)
  this.applyStyles(headerElem, stylesheet.header)
  
  buttonElems.forEach((buttonElem) => {
    this.applyStyles(buttonElem, stylesheet.button)
  })
}

Theme.prototype.applyStyles = function(elem, styles) {
  for (let key in styles) {
    if (styles.hasOwnProperty(key)) {
      elem.style[key] = styles[key]
    }
  }
}

Мы определили API Theme и теперь можем создать таблицу стилей следующим образом:

const theme = new Theme()
const stylesheet = theme.createStylesheet()

На данный момент stylesheet выглядит так:

{
  "header": {
    "color": "#333",
    "fontStyle": "italic",
    "fontFamily": "Roboto, sans-serif"
  },
  "background": { "backgroundColor": "#fff" },
  "button": { "backgroundColor": "#fff", "color": "#333" },
  "color": "#fff"
}

Теперь ее можно использовать для преображения веб-страницы:

theme.applyStylesheet(stylesheet)

Предоставление открытых возможностей для поддержки разработки плагинов

Как сделать так, чтобы theme возвращал пользовательскую тему при вызове createStylesheet, которую можно использовать для расширения вместо темы по умолчанию?

В таком случае могут пригодиться декораторы, так как с их помощью можно вернуть другую предварительно определенную тему по умолчанию.

Мы создадим декоратор, чтобы применить тему blood, преобразующую Theme так, чтобы он генерировал таблицу стилей по умолчанию, которая будет представлять тему blood вместо оригинала.

Назовем этот декоратор bloodTheme:

function bloodTheme(originalTheme) {
  const originalStylesheet = originalTheme.createStylesheet()
  
  originalTheme.createStylesheet = function() {
    return {
      name: 'blood',
      ...originalStylesheet,
      header: {
        ...originalStylesheet.header,
        color: '#fff',
        fontStyle: 'italic',
      },
      background: {
        ...originalStylesheet.background,
        color: '#fff',
        backgroundColor: '#C53719',
      },
      button: {
        ...originalStylesheet.button,
        backgroundColor: 'maroon',
        color: '#fff',
      },
      primary: '#C53719',
      secondary: 'maroon',
      textColor: '#fff',
    }
  }
}

Теперь нужно добавить в theme только одну строку:

const theme = new Theme()
bloodTheme(theme) // Applying the decorator
const stylesheet = theme.createStylesheet()
console.log(stylesheet)

Теперь тема предоставляет таблицу стилей blood по умолчанию:

{
  "name": "blood",
  "header": {
    "color": "#fff",
    "fontStyle": "italic",
    "fontFamily": "Roboto, sans-serif"
  },
  "background": { "backgroundColor": "#C53719", "color": "#fff" },
  "button": { "backgroundColor": "maroon", "color": "#fff" },
  "color": "#fff",
  "primary": "#C53719",
  "secondary": "maroon",
  "textColor": "#fff"
}

Как видите, код/реализация theme не изменились. Применение пользовательской таблицы стилей также не изменилось:

theme.applyStylesheet(stylesheet)

Теперь веб-страница раскрашена красным цветом:

Мы можем создать любое количество тем и применять их в любое удобное время. Это означает, что код остается открытым для таких плагинов, как пользовательские темы.

Применение временного поведения

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

Например, в рождественский сезон можно с легкостью создать рождественскую таблицу стилей и применить ее в качестве декоратора, а затем удалить из кода по окончанию сезона.

Чтобы вернуться к исходной таблице стилей нужно просто удалить строку bloodTheme(theme).

Наследование

Еще один пример использования декораторов — при создании подклассов в большом коде.

Однако этот случай не является большой проблемой в JavaScript (если только вы не используете реализации наследования классов), в отличие от статических языков, таких как Java.

Режимы отладки

Еще один полезный вариант использования — создание декоратора режима отладки, который будет регистрировать все события, происходящие в консоли. Например, декоратор debugTheme, который пригодится в режиме разработки:

function debugTheme(originalTheme) {
  const stylesheet = originalTheme.createStylesheet()
  
  console.log(
    '%cStylesheet created:',
    'color:green;font-weight:bold;',
    stylesheet,
  )
  
  if (!stylesheet.primary) {
    console.warn(
      'A stylesheet was created without a primary theme color. There may be layout glitches.',
    )
  }
}

const theme = new Theme()
bloodTheme(theme)
if (process.env.NODE_ENV === 'development') debugTheme(theme)

Теперь консоль предоставляет полезную информацию при запуске приложения в режиме development:

Читайте также:

• Чистый код на JavaScript: вертикальное форматирование
• Введение в регулярные выражения в JavaScript
• Чистый код JavaScript - объекты и классы

---

Перевод статьи jsmanifest: Learn About Decorators in JavaScript