TS下的装饰者模式(Decorator)

SolomonXie 发布于2019-08-23 12:18 / 3397人阅读

摘要：装饰者模式装饰者模式就是动态的给类或对象增加功能的设计模式。下的实现里的装饰器目前处在建议征集的第二阶段，不被浏览器所支持，如果想要提前使用这个新特性就需要，等工具进行转译。这里介绍下的用法。

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)三个参数）,这时就需要工厂函数来帮我们生成一个装饰器函数。

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

GPU云服务器云服务器装饰者模式 jsp 装饰者装饰模式策略者模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98283.html

vue + typescript 项目起手式

摘要：新项目起手式最后更新于，技术文具有时效性，请知悉我知道你们早就想用上强类型了还有后续进阶篇安装安装依赖配置添加添加让识别改造文件什么是是的强类型版本。是的超集，这意味着他支持所有的语法。与此同时，也是的超集，的也宣布采用进行开发。 vue + typescript 新项目起手式最后更新于2018-06-30，技术文具有时效性，请知悉我知道你们早就想用上 vue + ts 强类型...

zhisheng 2019-08-21 17:17 评论0 收藏0
从ES6重新认识JavaScript设计模式: 装饰器模式

摘要：什么是装饰器模式向一个现有的对象添加新的功能，同时又不改变其结构的设计模式被称为装饰器模式，它是作为现有的类的一个包装。中的装饰器模式中有一个的提案，使用一个以开头的函数对中的及其属性方法进行修饰。 1 什么是装饰器模式 showImg(https://segmentfault.com/img/remote/1460000015970102?w=1127&h=563); 向一个现有的对...

wendux 2019-08-23 10:56 评论0 收藏0
设计模式之装饰者模式

摘要：相关设计模式装饰者模式和代理模式装饰者模式关注再一个对象上动态添加方法代理模式关注再对代理对象的控制访问，可以对客户隐藏被代理类的信息装饰着模式和适配器模式都叫包装模式关于新职责适配器也可以在转换时增加新的职责，但主要目的不在此。 0x01.定义与类型定义：装饰模式指的是在不必改变原类文件和使用继承的情况下，动态地扩展一个对象的功能。它是通过创建一个包装对象，也就是装饰来包裹真实的...

chuyao 2019-08-16 18:34 评论0 收藏0
Java 设计模式之装饰者模式

摘要：装饰者模式组成结构抽象构件给出抽象接口或抽象类，以规范准备接收附加功能的对象。装饰者模式图解装饰者模式应用场景需要扩展一个类的功能，或给一个类添加附加职责。装饰者对象接受所有来自客户端的请求。参考资料设计模式一、了解装饰者模式 1.1 什么是装饰者模式装饰者模式指的是在不必改变原类文件和使用继承的情况下，动态地扩展一个对象的功能。它是通过创建一个包装对象，也就是装饰者来包裹真实的对...

kumfo 2019-08-19 11:14 评论0 收藏0