我今天如何使用装饰器？

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

第一:

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

第二:

鉴于今天有可能使用它,正如一些开源项目所暗示的那样,通常建议的设置是什么让装饰器工作？

你是对的,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装饰器的进一步阅读.

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

巴别塔 -旁边ES5编译器支持装饰的ES。

traceur -google es5编译器旁边的另一个es。

typescript-支持装饰器的javascript语言的类型化超集。

这些工具将“现代” javascript转换为较旧的javascript有所不同，因此您可以在有在线游乐场的情况下根据需要进行浏览。

@Class 装饰器支持可以在Babel / Traceur中启用

通天塔：

$ babel --optional es7.decorators

来源：Exporing 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]];
  }
}

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

更新：

看起来Babel改变了装饰器的配置方式，并且文章已过时。这是新方法的链接。

简而言之; 是的，您可以@Class在ES6 / 7中使用装饰器；ES6 / 7不支持任何属性装饰器，因此您必须使用变通办法。