什么是decorator
decoratotor, 即装饰器，本质其实就是一个函数，用来拓展类属性和类方法
ES6 引入了这项功能，目前 Babel 转码器已经支持Decorator
首先，安装babel-core和babel-plugin-transform-decorators。由于后者包括在babel-preset-stage-0之中，所以改为安装babel-preset-stage-0亦可
1
| $ npm install babel-core babel-plugin-transform-decorators
|
然后，设置配置文件.babelrc
1
2
3
| {
"plugins": ["transform-decorators"]
}
|
这时，Babel就可以对Decorator转码了
脚本中打开的命令如下
1
| babel.transform("code", {plugins: ["transform-decorators"]})
|
用法
decorator修饰对象为下面两种：、
1、类的修饰
2、类属性的修饰
类的修饰
对类本身进行修饰的时候，装饰器接受一个参数，这个参数是要修饰的类本身
1
2
3
4
5
6
7
8
9
10
| @testable
class MyTestableClass{
//.....
}
//target指代MyTestableClass，为MyTestableClass添加静态属性
function testable(target) {
target.isTestable = true
}
console.log(MyTestableClass.isTestable); //true
|
如果想要传递参数，可以在装饰器外面再封装一个函数
1
2
3
4
5
6
7
8
9
10
11
12
| @testable(true)
class MyTestableClass{
//.....
}
function testable(isTestable) {
return function (target) {
target.isTestable = isTestable;
}
}
console.log(MyTestableClass.isTestable); //true
|
类属性的修饰
当对类属性进行修饰时，可接受三个参数
1、类的原型对象
2、需要封装的属性名
3、装饰属性名的描述对象
1
2
3
4
5
6
7
8
9
10
11
12
| function readOnly(target, name, descriptor) {
descriptor.writable = false;
return descriptor;
}
//使用readOnly方法修饰类的name方法
class Person{
@readOnly
name(){
return `${this.first}${this.last}`
}
}
|
使用场景
1、使用react-redux的时候，如果写成下面这种形式，既不雅观也比较麻烦，可以写成装饰器的模式
1
2
3
4
5
6
7
| class MyReactComponent extends React.Comment {}
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);
//装饰器模式
@connect(mapDispatchToProps, mapStateToProps)
// eslint-disable-next-line prettier/prettier
export default class MyReactComponent extends React.Component{}
|
mixins也可以写成装饰器的模式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| function mixins(...list) {
return function (target) {
Object.assign(target.proptype, ...list);
};
}
//使用
const Foo = {
foo() {
console.log('foo');
},
};
@mixins(Foo)
class MyClass {}
let obj = new MyClass();
obj.foo(); //foo
|