我今天如何使用装饰器?
Posted
技术标签:
【中文标题】我今天如何使用装饰器?【英文标题】:How can I use decorators today? 【发布时间】:2016-03-31 09:58:23 【问题描述】:我看到今天已经在一些 javascript 代码中使用了装饰器。我的问题实际上是两方面的。
第一:
如果装饰器还没有最终确定,那么今天如何在生产代码中使用它们?浏览器支持会不存在吗?
第二:
鉴于今天可以使用它,正如一些开源项目所建议的那样,让装饰器工作的典型推荐设置是什么?
【问题讨论】:
这两个问题的答案都是babeljs.io。 所有解释都在这里:medium.com/google-developers/…(有关背景信息,请参阅接受的答案) kangax.github.io/compat-table/es7 提供有关哪些转译器和浏览器当前支持使用(类)装饰器的信息 【参考方案1】:@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]];
来源:https://***.com/a/34546344/290340
更新:
看起来 Babel 改变了装饰器的配置方式,文章已经过时了。 Here's a link 新方法。
简而言之; 是的 你可以在 ES6/7 中使用 @Class
装饰器; no ES6/7 不支持属性装饰器,因此您必须使用变通方法。
【讨论】:
【参考方案2】:你说得对,ES2016 装饰器还不是规范的一部分。但这并不意味着我们今天不能使用它。
首先让我们退后一步,回顾一下“什么是装饰器”。装饰器只是将行为添加到对象的包装器。这不是 javascript(或一般编程)中的新概念,它实际上已经存在了一段时间......
这是一个检查权限的装饰器的基本示例:
function AuthorizationDecorator(protectedFunction)
return function()
if (user.isTrusted())
protectedFunction();
else
console.log('Hey! No cheating!');
使用它看起来像这样:
AuthorizationDecorator(save);
你看我们所做的只是简单地包装一些其他功能。您甚至可以通过多个装饰器传递一个函数,每个装饰器添加一个功能或运行一些代码。
你甚至可以找到一些 old articles 解释 javascript 中的装饰器模式。
既然我们知道装饰器实际上是我们(javascript 社区)一直能够做到的事情,那么当我们今天使用 ES2016 装饰器时,它们只是被编译成 ES5 代码,因此你为什么要维护,这可能并不令人震惊浏览器兼容性。所以暂时它只是语法糖(我可能会添加一些非常甜的糖)。
至于使用哪个编译器将您的 ES2016 代码转换为 ES5 代码,您有一些选择:Babel 和 Traceur 是最受欢迎的。
这里是Exploring ES2016 Decorators的进一步阅读。
【讨论】:
【参考方案3】:有一些使用装饰器的解决方案:
babel - 支持装饰器的 es5 编译器旁边的 es。 traceur - 谷歌 es5 编译器旁边的另一个 es。 typescript - 支持装饰器的 javascript 语言的类型化超集。这些工具在将“现代”javascript 转换为较旧的 javascript 方面存在一些差异,因此您可以在需要时探索它,因为它们有在线游乐场。
【讨论】:
以上是关于我今天如何使用装饰器?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 QML 中将 @pyqtSlot 装饰器与其他装饰器一起使用?