Пошаговое руководство о том, как создавать декораторы JavaScript и как использование средств автоматического доступа помогает улучшить опыт разработки.

Оглавление

• Контекст и спецификация
• Предисловие
• Автодоступ
• Создание декораторов
  • Простой декоратор
  • Проверка декораторами
  • Параметры декоратора
• Метаданные

Контекст и спецификация

Предложение по декораторам на GitHub уже отлично описывает основные варианты использования декораторов. Моя цель — не воссоздать эти примеры, а подчеркнуть некоторые менее известные функции и взаимодействия. Кроме того, в следующей статье этой серии я расскажу, как скомпоновать или связать несколько декораторов в одном свойстве класса.

Предисловие

Каждый пример кода будет содержать ссылку на интерактивную игровую площадку Babel REPL, так что вы сможете опробовать его самостоятельно, без необходимости настраивать полифилл или запускать репозиторий. Опция «Оценить» в левом верхнем углу (в разделе «Настройки») должна быть отмечена во всех моих примерах, а это означает, что вы сможете видеть код, редактировать его, открывать консоль разработчика вашего браузера и просматривать там журналы/результаты.

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

Подчеркнем, что консоль ваших инструментов разработчика должна отображать журналы консоли. Если это не так, убедитесь, что в левом верхнем углу установлен флажок «Оценить».

Автоматический доступ

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

В предложении декораторов здесь описан автоматический доступ. Но в конечном итоге это простая функция; давайте посмотрим на базовый рабочий пример: Babel REPL.

class MyClass {
  accessor myBoolean = false
}

В этом определении класса ключевое слово средства доступа идет перед именем свойства. Однако это пока ничего не изменило в свойстве — далее мы увидим, насколько полезны автоматические средства доступа в сочетании с декораторами.

(Обратите внимание, что вы также можете использовать static с автоматическими средствами доступа, например статическим средством доступа myBoolean = false)

Создание декораторов

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

Простой декоратор

Мы начнем с объединения автоаксессоров с декоратором, который на самом деле мало что делает, чтобы получить представление о синтаксисе.

Вот функциональный декоратор, который хранит внутреннюю переменную и позволяет вам получать и устанавливать эту переменную через свойство класса: Babel REPL

function simpleDecorator(value, context) {
  let internalValue = false
  return {
    get() {
      return internalValue
    },
    set(val) {
      internalValue = val
      return internalValue
    }
  }
}

class MyClass {
  @simpleDecorator
  accessor myBoolean
}

Этот декоратор возвращает объект двумя методами: get() и set(). Вот как декоратор для автоматического средства доступа может «украсить» или обернуть как метод установки, так и метод получения свойства в одном месте; нам не нужно создавать simpleGetterDecorator и simpleSetterDecorator. Вместо этого мы объединили их в одно определение с помощью автоматических средств доступа, что проще.

В конце концов, пока это выглядит вполне нормальной функцией — отлично подходит для знакомства!

Проверка с декораторами

Чтобы подготовиться к оставшейся части статьи, давайте обновим наш декоратор, чтобы он действительно выполнял какую-то проверку. Мы создадим декоратор, который позволит вам устанавливать только четные числа и ничего больше. Вот как это будет выглядеть: Babel REPL

function onlyEvenNumbers(value, context) {
  let internalNumber = 0
  return {
    get() {
      return internalNumber
    },
    set(val) {
      const num = Number(val)
      if(isNaN(num)) {
        // don't set the value if it's not a number or coerced to a number
        return internalNumber
      }
      if(num % 2 !== 0) {
        // don't allow odd numbers
        return internalNumber
      }
      internalNumber = val
      return internalNumber
    }
  }
}

class MyClass {
  @onlyEvenNumbers
  accessor myEvenNumber
}

Итак, мы добавляем логику в метод set(), и теперь любой, кто пытается установить свойство myEvenNumber в нашем классе, будет проходить через эту логику проверки. Хороший.

Параметры декоратора

Теперь, когда у нас есть хороший декоратор, работающий только с четами, давайте сделаем так, чтобы он обрабатывал как четные, так и нечетные числа, с возможностью настроить, какой тип числа нам нужен!

К счастью, поскольку мы пишем здесь довольно обычный JavaScript, его не так уж сложно настроить для такой работы. Мы обертываем исходный декоратор функцией, которая принимает опцию, а затем возвращаем декоратор. Бабель REPL

function evensOrOdds(onlyEvens = true) {
  return function decorator(value, context) {
    let internalNumber = 0
    return {
      get() {
        return internalNumber
      },
      set(val) {
        const num = Number(val)
        if(isNaN(num)) {
            // don't set the value if it's not a number
            return internalNumber
        }
        if(num % 2 !== (onlyEvens ? 0 : 1)) {
            return internalNumber
        }
        internalNumber = val
        return internalNumber
      }
    }
  }
}

class MyClass {
  @evensOrOdds(true)
  accessor myEvenNumber

  @evensOrOdds(false)
  accessor myOddNumber
}

Теперь мы настроили наш декоратор на использование произвольных параметров, что позволяет пользователям нашего декоратора настраивать его поведение. Ура.

Метаданные

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

Продолжить обучение

Перейдите к следующему посту этой серии, чтобы узнать, как скомпоновать (или применить несколько) декораторов к одному свойству!