前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >利用Decorator(装饰器)做数据层处理

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

作者头像
2014v
发布2019-11-20 11:31:13
3710
发布2019-11-20 11:31:13
举报
文章被收录于专栏:2014前端笔记2014前端笔记

再介绍如何用Decorator做数据处理前,让我们先来看一下Decorator是什么?

从名字上看,它是用来起装饰作用的,实际上,它是一个wrapper,作用于一个函数或者是一个对象,然后经过一系列处理后,返回一个新的函数或对象。

让我们先来看看decorator如何使用

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档