您现在的位置是:首页 > 文章详情

JavaScript 的Decorator 装饰器介绍

日期:2018-12-08点击:309

Angular大量使用了JS的装饰器特性,先看 ruanyifeng的介绍

使用babel转换
步骤 :

  1. npm install -g babel-cli
  2. npm init; npm install --save-dev babel-plugin-transform-decorators-legacy
  3. babel --plugins transform-decorators-legacy 1.js > 1.es5.js

例1

@eat class Person { constructor() {} } function eat(target, key, descriptor) { console.log('吃饭'); console.log(target); console.log(key); console.log(descriptor); target.prototype.act = '我要吃饭'; } const jack = new Person(); console.log(jack.act); 

转换后

var _class; let Person = eat(_class = class Person { constructor() {} }) || _class; function eat(target, key, descriptor) { console.log('吃饭'); console.log(target); console.log(key); console.log(descriptor); target.prototype.act = '我要吃饭'; } const jack = new Person(); console.log(jack.act); // 吃饭 // [Function: Person] // undefined // undefined // 我要吃饭 

例2

function mixins(...list) { return function (target) { Object.assign(target.prototype, ...list); }; } const Foo = { foo() { console.log('foo') } }; @mixins(Foo) class MyClass {} let obj = new MyClass(); obj.foo() // "foo" 

babel 后

var _dec, _class; function mixins(...list) { return function (target) { Object.assign(target.prototype, ...list); }; } const Foo = { foo() { console.log('foo'); } }; let MyClass = (_dec = mixins(Foo), _dec(_class = class MyClass {}) || _class); let obj = new MyClass(); obj.foo(); // "foo" 
原文链接:https://yq.aliyun.com/articles/681804
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章