装饰器 Decorator

许多面向对象的语言都有 装饰器(Decorator) 函数,用来修改类的行为。目前,这个方法已经被引入了 ES7,但是无论是主流浏览器还是 Node.js 对它的兼容性都不是特别友好。

因此要在项目中使用Decorator的话,需要使用 Babel 进行转移,或者使用 Javascript 的超集 Typescript 来进行开发。

如果对这一语法细节还不是很了解的话,可以先进这个传送门:http://es6.ruanyifeng.com/#docs/decorator ,跟着阮一峰老师一起了解一下它的特性。

初衷

使用 装饰器 的初衷来自于不想修改原来接口的情况下,能让一件事表现得更好。就像:

  • 手机可以用,但是加了手机壳就能防摔;
  • 椅子可以坐,但是垫了垫子就能够坐的更舒服;
  • 步枪可以射击,但是加了瞄准镜就可以射的更准;
  • ......

如果要更加抽象地理解,在计算机领域,它就可以被应用到日志收集、错误捕获、安全检查、缓存、调试、持久化等等方面。

常用的装饰器

常用的装饰器一般有 类装饰器方法装饰器,当然也会有属性装饰器,但是用的不多就不多讨论了。

类装饰器

主要应用于类构造函数,其参数是类的构造函数:

function testable(target) {
    target.prototype.isTestable = true
}

@testable
class MyTestableClass {}

let obj = new MyTestableClass()
obj.isTestable // true

注意: 这里的target参数如果直接给它添加方法,获得的是一个静态方法,相当于在class的方法前添加static关键字;如果想添加实例属性,可以通过目标类的prototype对象操作。

现在我们就用 类装饰器 实现一个捕获方法执行时间的装饰器:

const sleepTimeClass = (timeHandler?: (time?: number) => void) => (target: any) => {
    Object.getOwnPropertyNames(target.prototype).forEach(key => {
        const func = target.prototype[key]
        target.prototype[key] = async (...args: any[]) => {
            const startTime = await +new Date()
            await func.apply(this, args)
            const endTime = await +new Date()
            timeHandler && await timeHandler(endTime - startTime)
        }
    })
    return target
}

之所以还在外面包了一层函数,是为了通过柯里化,让使用者可以再进一步处理得到的执行时间:

const sleepTimeClassTimer = sleepTimeClass(time => {
    console.log('执行时间', `${time}ms`)
})

@sleepTimeClassTimer
class homepageController {
    async get(ctx: any) {
        ctx.response.body = await pageService.homeHtml('/page/helloworld', '/page/404')
    }
}

这样,每次class中的方法执行完之后就会打印出相应的执行时间。

方法装饰器

function readonly(target, name, descriptor){
    // descriptor对象原来的值如下
    // {
    //   value: specifiedFunction,
    //   enumerable: false,
    //   configurable: true,
    //   writable: true
    // }
    descriptor.writable = false
    return descriptor
}

readonly(Person.prototype, 'name', descriptor)
// 类似于
Object.defineProperty(Person.prototype, 'name', descriptor)

由于在异步编程的时候,asyncawait的异常很难捕获,如果强行用try...catch来搞,捕捉不完不说,代码看起来还很难看,使用装饰器就很简单了:

const asyncMethod = (errorHandler?: (error?: Error) => void) => (...args: any[]) => {
    const func = args[2].value
    return {
        get() {
            return (...args: any[]) => {
                return Promise.resolve(func.apply(this, args)).catch(error => {
                    errorHandler && errorHandler(error)
                })
            }
        },
        set(newValue: any) {
            return newValue
        }
    }
}

接着使用方法装饰器:

const errorAsyncMethod = asyncMethod(error => {
    console.error('错误警告', error)
})

class homepageController {
    @errorAsyncMethod async get(ctx: any) {
        ctx.response.body = await pageService.homeHtml('/page/helloworld', '/page/404')
    }
}

装饰器加载顺序

一个类或者方法可以嵌套很多个装饰器,所以搞清楚它们的执行顺序也很重要:

  • 有多个参数装饰器时,从最后一个参数依次向前执行;
  • 方法和方法参数中参数装饰器先执行;
  • 类装饰器总是最后执行;
  • 方法和属性装饰器,谁在前面谁先执行;
  • 因为参数属于方法一部分,所以参数会一直紧紧挨着方法执行。

装饰器的应用

在初衷那里就已经提到了,试着想象一下,只需要几个装饰器就可以完成前后端基本的性能和日志监控,是不是很有意思?

推荐阅读更多精彩内容

  • 装饰器语法是Python中一个很重要的语法,刚学Python时就有接触,但当时理解起来很困难,不过最近这一次学习装...
    _kkk阅读 295评论 0 2
  • 装饰器(Decorator)是Python的一个重要部分。简单地说:它们是修改其它函数的功能的函数。 它们有助于让...
    hufengreborn阅读 591评论 0 1
  • 〇、前言 本文共108张图,流量党请慎重! 历时1个半月,我把自己学习Python基础知识的框架详细梳理了一遍。 ...
    Raxxie阅读 17,939评论 16 410
  • 我们逃离微信(社交工具)的几种姿势 当你开始恐慌,开始感受人群躁杂中的孤独时,你想到的第一件事就是逃走 微信在构建...
    心理治愈_树先生阅读 847评论 3 7
  • 1.对象字面量 其prototype指向Object.prototype 2.构造函数 等价于 其prototyp...
    沈墨空阅读 323评论 0 0