利用Decorator(装饰器)做数据层处理

[z2014]

再介绍如何用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.类型检测
类型检测是参考这篇文章,通过装饰器的方式，提高组件的可维护性
总之，利用装饰器这种很酷的语法，我们还能做更多的事情，这需要在实际场景中一点点实践！