我今天如何使用装饰器？

Question

我看到现在一些 javascript 代码中已经使用了装饰器。我的问题真的有两层。

第一个：

如果装饰器还没有最终确定，今天怎么可能在生产代码中使用它们？浏览器支持不会不存在吗？

第二个：

鉴于今天可以使用它，正如一些开源项目所建议的那样，让装饰器工作的典型推荐设置是什么？

Answer 1

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

首先让我们退后一步，回顾一下"what is a decorator"。装饰器只是为对象添加行为的包装器。这在 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 and Traceur 是最受欢迎的。

这里是 Exploring ES2016 Decorators 的进一步阅读。

Answer 2

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

babel - es5 编译器旁边的 es，支持装饰器。
traceur - google.
typescript - javascript 语言的类型化超集，支持装饰器。

这些工具将 "modern" javascript 转换为旧版本的方式有些不同，因此您可以根据需要探索它，因为它们有在线游乐场。

Answer 3

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

中启用

通天塔:

$ babel --optional es7.decorators

来源：Exporing ES7 Decorators - Medium

追踪器：

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

来源：

更新：

看起来 Babel 改变了装饰器的配置方式，文章是 out-of-date。 Here's a link 到新方法。

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

我今天如何使用装饰器？

How can I use decorators today?

javascript

angularjs-decorator

ecmascript-next

javascript-decorators

看起来 Babel 改变了装饰器的配置方式，文章是 out-of-date。 Here's a link 到新方法。