TypeScript设计模式之装饰、代理

看看用TypeScript怎样实现常见的设计模式,顺便复习一下。 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想记住就好。 这里尽量用原创的,实际中能碰到的例子来说明模式的特点和用处。

装饰模式 Decorator

特点:在不改变接口的情况下,装饰器通过组合方式引用对象,并由此在保持对象原有功能的基础上给对象加上新功能。

用处:当需要不影响现有类并增加新的功能时,可以考虑装饰模式,它可以动态透明的给对象增加功能。

注意:与继承的优劣。

下面用TypeScript简单实现一下装饰模式: 现在有一辆小轿车,加速到100km/h需要10秒:

interface Movable{
    accelerate();
}

class Car implements Movable{
    accelerate(){
        console.log('加速到100km/h需要10秒');
    }
}

现在想改装下,提高加速度,加个涡轮增压器。

class TurboCharger{
    use(){
        console.log('使用涡轮增压');
    }
}

class RefittedCar implements Movable{
    construct(private car: Car){
    }

    turboCharger = new TurboCharger();

    accelerate(){
        this.car.accelerate();
        this.turboCharger.use();
        console.log('加速到100km/h需要5秒'); 
    }
}

let refitterCar: Movable = new RefittedCar(new Car());

refitterCar.accelerate();

//输出:
加速到100km/h需要10秒
使用涡轮增压
加速到100km/h需要5秒

这样改装后的车用的还是原来的接口,但新对象却可以在保持原对象的功能基础上添加新的加速功能。 代码实现的特点主要还是在于使用同样接口,并在新对象里有对原对象的引用,这样才能使用原对象的功能。

上面的功能其实通过继承也很容易做到:

class TurboCharger{
    use(){
        console.log('使用涡轮增压');
    }
}

class RefittedCar extends Car{
    turboCharger = new TurboCharger();

    accelerate(){
        super.accelerate();
        this.turboCharger.use();
        console.log('加速到100km/h需要5秒'); 
    }
}

let refitterCar: Movable = new RefittedCar();
refitterCar.accelerate();

//输出同样是:
加速到100km/h需要10秒
使用涡轮增压
加速到100km/h需要5秒

用哪个好呢?对比看下各自的优缺点:(装饰器用的是组合) 继承的优点是 直观,容易理解,缺点是继承链太长的话将很难维护,并且耦合度较高,相对死板,不够灵活。 组合的优点是 灵活,但如果装饰器本身也比较多且复杂时,代码的复杂度也会增加不少。

就我个人来说在这种场景下还是用组合比较舒服,不是很喜欢在已经使用的类上继承出子类。 接上面的例子,有个皮卡也要增加加速功能,继承的话又得再实现一个皮卡子类,而用装饰模式的话使用时传进来就好了,本身不需要做任何更改。

当然,如果是从新设计,改下接口的话可能会选继承,毕竟直观很多,以后的需求有改动时再重构就好了,代码保持简单,怎么简单怎么来,所谓组合优于继承也要根据实际情况来定夺。

代理模式 Proxy

特点:在对象前面加了一层,外部需要通过这层代理来操作原对象,代理可以加一些控制来过滤或简化操作。

用处:当对象不希望被外部直接访问时可以考虑代理模式,典型的有远程代理、保护代理、透明代理、虚拟代理等。

注意:与外观、装饰器模式的区别。

远程代理:在Visual Studio里很容易用到,Web Reference,直接把web service当本地引用使用。 保护代理:通常用来对一个对象做权限控制。 虚拟代理:做web页面时对图像经常使用虚拟代理,看不到的图像先用个统一的图像替代,页面滑到哪就加载到哪,省资源。

下面用TypeScript简单实现一下远程代理模式: 数据接口:

interface DataService{
    getData(): string | Promise<string>;
}

在server端的远程服务:

class RemoteService implements DataService{
    getData(): string{
        return 'get remote data';
    }
}

假设一个Reqeuster类,可以取server端数据:

class Requester{
    Request(): Promise<string>{
        return Promise.resolve(new RemoteService().getData()); //这里本来应该从网络取,现在只是演示一下
    }
}

本地代理:

class DataProxy implements DataService{

    async getData(): string{
        return await new Requester().Request();
    }
}

function isPromise(p: string | Promise<string>): p is Promise<string> { //用来判断是否是promise
    return (<Promise<string>>p).then !== undefined;
}

let dataService: DataService = new DataProxy();
let data = dataService.getData();

if(isPromise(data)){
    data.then(o=>console.log(o));
} else {
    console.log(data);
}

//输出
get remote data

DataProxy和远程的RemoteService使用同样的接口,client像调用本地功能一样通过DataProxy使用远程功能。

代理模式与外观模式的差别在于: 代理和被代理使用同一抽象,并且代理着重于访问控制。 外观则着重于简化原本复杂的操作,并在此基础上提取新抽象。

代理模式与装饰器模式的差别在于: 代理的目的一般不是为了增加新功能而在于访问控制,同时代理通常是自己来创建被代理对象。 装饰器则着重于增加新功能,且被装饰对象通常是作为引用传给装饰器的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java面试通关手册

深入理解工厂模式

Java面试通关手册(Java学习指南,欢迎Star,会一直完善下去,欢迎建议和指导):https://github.com/Snailclimb/Java_G...

21813
来自专栏about云

spark零基础学习线路指导

问题导读 1.你认为spark该如何入门? 2.你认为spark入门编程需要哪些步骤? 3.本文介绍了spark哪些编程知识? ? spark...

3315
来自专栏我就是马云飞

设计模式二十四章经之工厂模式

1012
来自专栏大内老A

[WCF安全系列]消息的保护等级[下篇]

一、契约的保护等级为绑定进行消息保护设置了“最低标准” 二、显式地将保护等级设置成ProtectionLevel.None与没有设置保护等级有区...

1917
来自专栏微服务生态

跟着小程学微服务-自己动手扩展分布式调用链

微服务是当下最火的词语,现在很多公司都在推广微服务,当服务越来越多的时候,我们是否会纠结以下几个问题:

894
来自专栏大内老A

WCF后续之旅(9):通过WCF的双向通信实现Session管理[上篇]

我们都知道,WCF支持Duplex的消息交换模式,它允许在service的执行过程中实现对client的回调。WCF这种双向通信的方式是我们可以以Event B...

1687
来自专栏haifeiWu与他朋友们的专栏

造个轮子之基于 Netty 实现自己的 RPC 框架

服务端开发都会或多或少的涉及到 RPC 的使用,当然如果止步于会用,对自己的成长很是不利,所以楼主今天本着知其然,且知其所以然的精神来探讨一下 RPC 这个东西...

1173
来自专栏用户画像

北理(2014年)813计算机专业基础

1.理解数据结构的基本概念;掌握数据的逻辑结构、存储结构及其差异,以及各种基本操作的实现。

791
来自专栏大内老A

如何编写没有Try/Catch的程序

在上面一篇文章《谈谈关于MVP模式中V-P交互问题》中,我提到最近一直为一个项目进行Code Review的工作,从中发现了一些问题,同时也有了一些想法。上次谈...

20210
来自专栏大内老A

使命必达: 深入剖析WCF的可靠会话[实例篇](内含美女图片,定力差者慎入)

通过前面一系列的博文(《WCF 并发(Concurrency)的本质》、《并发中的同步》、《实践重于理论》、《并发与实例上下文模式》、《回调与并发》、《Conc...

1679

扫码关注云+社区