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

Я вижу декораторы, используемые сегодня уже в некотором коде JavaScript. Мой вопрос действительно в два раза.

Первый:

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

Во-вторых:

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

Источник

3 ответа

Решение

Вы правы, декораторы ES2016 еще не являются частью спецификации. Но это не значит, что мы не можем использовать это сегодня.

Сначала давайте сделаем шаг назад и перейдем к "что такое декоратор". Декораторы - это просто оболочки, которые добавляют поведение к объекту. Это не новая концепция в javascript (или программировании в целом), это на самом деле уже давно...

Вот базовый пример декоратора, который проверяет разрешения:

function AuthorizationDecorator(protectedFunction) {
    return function() {
        if (user.isTrusted()) {
            protectedFunction();
        } else {
            console.log('Hey! No cheating!');
        }
    }
}

Используя это будет выглядеть так:

AuthorizationDecorator(save);

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

Вы даже можете найти несколько старых статей, объясняющих шаблон декоратора в javascript.

Теперь, когда мы понимаем, что на самом деле декораторы - это то, что мы (сообщество javascript) всегда могли сделать, вероятно, неудивительно, что когда мы сегодня используем декораторы ES2016, они просто компилируются в код ES5, поэтому вы поддерживаете совместимость браузера. Так что на данный момент это просто синтаксический сахар (я бы добавил немного сладкого сахара).

Что касается того, какой компилятор использовать для преобразования кода ES2016 в код ES5, у вас есть несколько вариантов: Babel и Traceur являются наиболее популярными.

Вот дальнейшее чтение на Изучение декораторов ES2016.

Источник

@Classподдержка декораторов может быть включена в Babel/Traceur

Бабель:

$ babel --optional es7.decorators

Источник: Экспорт ES7 Декораторы - Средний

Traceur:

traceurOptions: {
  "annotations": true
}

@Propertyдекораторы не поддерживаются

... и так как каждый @Property обеспечивает уникальную функциональность, каждый требует своего подхода к десагерингу в ES6/7.

Вот как вы используете @Inject:

Машинопись

exports class ExampleComponent {
  constructor(@Inject(Http) http: Http) {
    this.http = http;
  }
}

ES 6/7

exports class ExampleComponent {
  constructor(http) {
    this.http = http;
  }

  static get parameters() {
    return [[Http]];
  }
}

Источник: /questions/39954243/kak-vnedrit-sluzhbu-angular2-http-v-klass-es67/39954254#39954254

Обновить:

Похоже, Бабель изменил способ настройки декораторов, и статья устарела. Вот ссылка на новый подход.

Короче; да, вы можете использовать @Class декораторы в ES6/7; никакие декораторы свойств не поддерживаются в ES6 / 7, поэтому вам придется использовать обходные пути.

Источник

Есть несколько решений для использования декораторов:

  • babel - es рядом с компилятором es5 с поддержкой декораторов.
  • traceur - еще один es рядом с компилятором es5 от Google.
  • typcript - типизированный надмножество языка javascript, который поддерживает декораторы.

Есть некоторая разница в том, как эти инструменты переносят "современный" javascript к более старому, чтобы вы могли изучить его при необходимости, так как у них есть игровые площадки онлайн.

Источник
Другие вопросы по тегам