再介绍如何用Decorator做数据处理前,让我们先来看一下Decorator是什么?
从名字上看,它是用来起装饰作用的,实际上,它是一个wrapper,作用于一个函数或者是一个对象,然后经过一系列处理后,返回一个新的函数或对象。
让我们先来看看decorator如何使用
function decoratorInit(target, key, descriptor) {
const method = descriptor.value;
descriptor.value = (arg) => {
arg = arg.replace('¥', '$')
method.call(target, arg)
}
return descriptor
}
class Man {
constructor (money = '¥100') {
this.init(money)
}
@decoratorInit
init (money) {
this.money = money
}
}
let man = new Man()
man.money // $100
是不是很神奇,100元变成了100美元!!
我们来看一下我们传递进去的参数是什么?
target -> Man.prototype
key -> init
descriptor -> 和getOwnPropertyDescriptor
拿到的大致相同
是不是和defineProperty
的传递的参数很像
那我们能通过装饰器做什么呢? 1.数据处理 往往后端返回给我们的数据格式我们并不能直接展示在前端,而这一部分又是与组件逻辑分开的一部分,那么我们往往可以通过装饰器的方式来抽离出去。 2.类型检测 类型检测是参考这篇文章,通过装饰器的方式,提高组件的可维护性 总之,利用装饰器这种很酷的语法,我们还能做更多的事情,这需要在实际场景中一点点实践!