TS下的装饰者模式(Decorator)

1.1、装饰者模式

装饰者模式就是动态的给类或对象增加功能的设计模式。在程序运行时动态的给一个具备基础功能的类或对象添加新的功能，并且不会改变会破坏基础类和对象的功能。先提炼出产品的最小可用产品，再通过快速迭代的方式添加功能。

1.2、Typescript下的实现

Javascript里的装饰器目前处在建议征集的第二阶段，不被浏览器所支持，如果想要提前使用这个新特性就需要Babel，Typescript等工具进行转译。这里介绍Typescript下的用法。

首先在全局安装typescript

npm install typescript -g

然后新建一个后缀为.ts的typescript文件,这里我们新建一个demo.ts

• 新建一个Greeter类

class Greeter {
    constructor() {}
    greet(subject:any) {
        console.log(`hello ${subject}!`);
    }
}
const greet = new Greeter();
greet.greet(`decorator`);

将ts文件编译为js运行

tsc demo.ts --target ES5 --experimentalDecorators
# 如果本地没安装node可以把demo.js中的代码复制到chrome控制台测试
node demo.js

运行结果

hello decorator!

下面给它加上一个装饰器，使greet方法能够在成功执行后做一个日志记录

class Greeter {
    constructor() { }
    @logSuccess
    greet(subject: string) {
        console.log(`hello ${subject}!`);
    }
}
function logSuccess(target: any, key: any, descriptor: any) {
    const func = descriptor.value;
    descriptor.value = (...args: any[]) => {
        func.apply(target, args)
        console.log(`greet successfully!`)
    }
}
const greet = new Greeter();
greet.greet(`decorator`);

编译后运行结果
运行结果

hello decorator!
greet successfully!

正如我们所见Greeter的原方法greet()在执行完之后执行了console.log(`greet successfully!`)

logSuccess(target,key,descriptor)为什么需要传入这三个参数?Decorators的实现使用了ES5的 Object.defineProperty 方法，这三个参数也和这个方法的参数一致。装饰器的本质就是一个函数语法糖，通过Object.defineProperty来修改类中一些属性，descriptor参数也是一个对象，是针对key属性的描述符，里面有控制目标对象的该属性是否可写的writable属性等。

接下来我们将该日至系统简单完善一下

除了打印该方法执行成功，再添加对其运行时错误的日志输出

class Greeter {
    constructor() { }
    @log
    greet(subject: string) {
        console.log(`hello ${subjects}!`);
    }
}
function log(target: any, key: any, descriptor: any) {
    const func = descriptor.value;
    descriptor.value = (...args: any[]) => {
        try {
            func.apply(target, args)
            console.log(`greet successfully!`)
        } catch (err) {
            console.log(`greet error : ${err}`)
        }
    }
}
const greet = new Greeter();
greet.greet(`decorator`);

这里我们特意使用了一个未声明的变量subjects来触发一个错误
查看运行结果

greet error : ReferenceError: subjects is not defined

这样就实现了一个简单的日志系统

1.3 装饰者模式与工厂函数

如果想对不同的对象应用同一个decorator，但同时又需要通过传参来控制一些差别（装饰器器函数需要保留(target,key,descriptor)三个参数）,这时就需要工厂函数来帮我们生成一个装饰器函数。

通过装饰器来使一个属性变得只读