Question

我看到装饰器今天已经在一些javascript代码中使用了。我的问题实际上是双重的。

首先：

如果装饰者还没有最终确定如何在生产代码中使用它们呢？浏览器支持不会不存在吗？

第二

鉴于今天可以使用它，正如一些开源项目所暗示的那样，通常建议的装饰设置是什么？

Answer 1

你是对的，ES2016装饰器还不是规范的一部分。但这并不意味着我们今天无法使用它。

首先让我们退后一步，然后回过头来看看什么是装饰者＆＃34;。装饰器只是为对象添加行为的包装器。它不是javascript中的新概念（或者一般的编程），它实际上已经存在了一段时间......

这是检查权限的装饰器的基本示例：

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

使用它看起来像这样：

AuthorizationDecorator(save);

你看到我们所做的只是简单地完成其他一些功能。您甚至可以通过多个装饰器传递函数，每个装饰器都添加一些功能或运行一些代码。

您甚至可以在javascript中找到一些解释装饰器模式的old articles。

既然我们理解装饰器实际上是我们（javascript社区）总是能够做到的事情，那么当我们今天使用ES2016装饰器时它们真的没有震撼它们只是简单地编译成ES5代码因此你维护浏览器兼容性所以暂时它只是语法糖（我可能会添加一些非常甜的糖）。

至于用于将ES2016代码转换为ES5代码的编译器，您有一些选择：Babel和Traceur是最受欢迎的。

此处进一步阅读Exploring ES2016 Decorators。

Answer 2

有一些使用装饰器的解决方案：

babel - es5编译器旁边的es，支持装饰器。
traceur - 谷歌旁边的es5编译器旁边的另一个。
typescript - 支持装饰器的javascript语言的类型超集。

这些工具如何在现代化的过程中产生一些差异。 javascript到较旧版本，以便您可以根据需要进行探索，因为他们有在线游乐场。

Answer 3

可以在Babel / Traceur中启用

@Class装饰器支持

巴别：

$ babel --optional es7.decorators

来源：Exporing ES7 Decorators - Medium

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]];
  }
}

来源：https://stackoverflow.com/a/34546344/290340

<强>更新

看起来Babel改变了装饰器的配置方式，文章已经过时了。 Here's a link新方法。

总之; 是您可以在ES6 / 7中使用@Class装饰器; ES6 / 7不支持没有属性装饰器，因此您必须使用变通方法。

我今天如何使用装饰器？

3 个答案:

看起来Babel改变了装饰器的配置方式，文章已经过时了。 Here's a link新方法。