在create-react-app搭建的项目中使用装饰器
执行
yarn eject
命令,暴露出配置项因为装饰器是新的提案,许多浏览器和Node环境并不支持,所以我们需要安装插件:
@babel/plugin-proposal-decorators
。使用create-react-app
创建的项目自带这个插件,不过我们需要配置一下,找到package.json
文件加入一下代码:
{
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{ "legacy": true }
]
]
}
}
另外vscode可能会提示你需要配置tsconfig
或jsconfig
文件,我们在项目根目录创建jsconfig.js
,并写入:
{
"compilerOptions": {
"experimentalDecorators": true
}
}
这样就能愉快的在项目中使用装饰器了
装饰器的使用
使用装饰器修饰类
//声明一个装饰器
function fn(target){ //这个函数的`target`指的就是装饰器要修饰的类
target.test = false
}
@fn //使用装饰器
class Person{ //声明一个类
}
@fn
class Dog{ //声明另一个类
}
console.log(Person.test) //false
console.log(Dog.test) //false
可以看到Person
类和Dog
类下面多出了一个test
属性,这就体现了装饰器的优点,无需更改类的内部代码也无需去继承就可以给类添加新功能
使用装饰器传参
@fn
@fn2(5)
class Person{
}
function fn(target){
target.test = false
}
function fn2(value){
return function(target){ //这个函数的`target`指的就是装饰器要修饰的类
target.count = value
}
}
console.log(Person.test)
console.log(Person.count)
声明一个装饰器fn2
,它接收一个值,并且返回一个函数,这个函数的target
指的就是装饰器要修饰的类
使用装饰器添加实例属性
@fn
@fn2(5)
@fn3
class Person{
}
function fn(target){
target.test = false
}
function fn2(value){
return function(target){
target.count = value
}
}
function fn3 (target){
target.prototype.foo = 'hhh' // target指的就是装饰的类,在类的原型对象上添加一个属性foo
}
const test1 = new Person() // new一个实例出来
console.log(test1.foo)
实现一个混入mixins功能
// 实现一个mixins功能
export function mixins(...list){
return function (target){
Object.assign(target.prototype,...list)
}
}
import {mixins} from './mixins'
const Test = {
test(){
console.log('这是测试')
}
}
@mixins(Test)
class Myclass{}
const newMyclass = new Myclass()
newMyclass.test() //这是测试
使用装饰器修饰类的成员
@fn
@fn2(5)
@fn3
class Person{
@readonly message = 'hello'
}
function fn(target){
target.test = false
}
function fn2(value){
return function(target){
target.count = value
}
}
function fn3 (target){
target.prototype.foo = 'hhh'
}
function readonly(target,name,descriptor){
console.log(target) //目标类的原型对象 xxx.prototype
console.log(name) // 被修饰的类的成员名称
console.log(descriptor)
/*被修饰的类的成员的描述对象:
configurable: 能否使用delete、能否需改属性特性、或能否修改访问器属性、,false为不可重新定义,默认值为true
enumerable: 是否被遍历,对象属性是否可通过for-in循环,flase为不可循环,默认值为true
initializer: 对象属性的默认值,默认值为undefined
writable: 对象属性是否可修改,flase为不可修改,默认值为true
*/
descriptor.writable=false
}
const test1 = new Person()
test1.message = '你好'
它接收三个参数,具体看以上代码注释