有人能解释一下 es7 reflect-metadata 是什么吗?

29

我已经学习了一周的ES6、JSPM和Angular2,并发现了这个仓库ES6-loader

如果我们查看底部的index.html脚本,你会看到:

 System.import('reflect-metadata')
  .then(function() {
    return System.import('app/index');
  })
  .catch(console.log.bind(console));

这里使用 JSPM 的 systemjs polyfill 来获取 ES6 的 import

问题:在这种情况下,npm reflect-meta 真正做了什么?我越读文档,就越不理解它的作用?


不确定您指的是哪个index.html,如果是https://github.com/angular/quickstart/blob/master/index.html,则reflect-metadata / Reflect.js是一个库,它增强了:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect,有时会在TypeScript编译器(tsc)输出的代码中使用。 - dalvarezmartinez1
1个回答

54

'reflect-metadata' 是一个ES7提案的包。它允许在类或函数中包含元数据;本质上是语法糖

例如,Angular 2 ES6:

@Component({selector: "thingy"})
@View({template: "<div><h1>Hello everyone</h1></div>"})
class Thingy{};

正如您所看到的,@Component和@View后面没有分号。这是因为它们本质上是类上的(元)数据链。

现在让我们看一下在ES5中使用Angular 2编写的相同代码:

function Thingy(){}
Thingy.annotations = [
    new angular.ComponentAnnotation({
        selector: "thingy"
    }),
    new angular.ViewAnnotation({

        template: "<div><h1>Hello everyone</h1></div>"
    })
];

如你所见,@符号抽象出了类的许多注释属性,并使其更加D.R.Y

更进一步,Angular团队知道对于新用户来说注释有点抽象。此外,ES5太啰嗦了。这就是为什么他们制作了a.js,它将使与注释的接口更好:

视频了解此内容


3
好的回答。谢谢你。 - Fintan Kearney
2
什么是a.js?我的评论不够长。 - gyozo kudor
1
@gyozokudor 的 a.js 是一个基于 Angular 2 和 ES5 的项目。看起来 Angular 2 团队可能已经停止了这个项目。 - Armeen Moon

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接