TypeScript设计模式之门面、适配器

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

适配器模式 Adapter

特点:把类或接口转换成另一个接口以便系统调用。

用处:当系统需要引入多个功能类并且这些功能的接口不统一时可以考虑用适配器模式把它们转成统一的接口,现实中的例子很多,比如充电器接口适配器。

注意:分为对象适配器和类适配器。

适配器模式的目的主要在于解决接口兼容性。

下面用TypeScript简单实现一下适配器模式: 假定现在项目已经在用一个画图接口Graph以及它的实现Canvas2D:

interface Graph{
    drawLine();

    drawPie();
}

class Canvas2D implements Graph{
    drawLine(){
        console.log('draw 2d line');
    }

    drawPie(){
        console.log('draw 2d pie');
    }
}

项目升级需要提高UI美观,引入3D画图库Canvas3D,两者接口不一样:

class Canvas3D{
    draw3DLine(){
        console.log('draw 3d line');
    }

    draw3DPie(){
        console.log('draw 3d pie');
    }
}

项目是依赖接口Graph的,如果要直接加上3d功能就需要改接口,这个代价比较大,这时适配器派上用场:

class Canvas3DAdapter implements Graph{
    private canvas3D: Canvas3D = new Canvas3D();

    drawLine(){
        this.canvas3D.draw3DLine();
    }

    drawPie(){
        this.canvas3D.draw3DPie();
    }
}

let canvas2D: Graph = new Canvas2D();
canvas2D.drawLine();
canvas2D.drawPie();

let canvas3D: Graph = new Canvas3DAdapter();
canvas3D.drawLine();
canvas3D.drawPie();

//输出
draw 2d line
draw 2d pie

draw 3d line
draw 3d pie

这样,使用时用Canvas3DAdapter就可以了,项目还是只依赖Graph这个接口就可以画出3D图。 在Canvas3DAdapter里引入了Canvas3D对象,可以看出这是对象上的行为适配,所以叫对象适配器。 另外还有一种叫类适配器,使用多重继承来使新的适配类继承原来接口并且拥有两个类的功能,在TypeScript里虽然不能用多重继承,但是可以用mixins方式强行加起来,这里就不写例子了。

外观模式 Facade

特点:给子系统定义一个统一的接口来方便外面调用,并且可以减少对子系统的直接依赖。

用处:当系统实现一个功能需要调用其他库或第三方库的很多功能时,需要有个统一调用维护的地方,这时可以考虑外观模式。

注意:和适配器的区别。

外观模式的目的主要在于简化调用,只需要一个简单的接口就可以解除对其他类的依赖。

下面用TypeScript简单实现一下外观模式: 假定现在项目的需求是实现一个简单图表的功能来画出近年来收入曲线图和收入来源配比图,引入一个第三方绘图库。

//第三方绘图库
class Axis{
    draw(); // 画坐标轴
}

class Line{
    draw(); // 画曲线
}

class FanShape{
    draw(angle: number); // 画扇形
}

项目没必要和第三方的库紧耦合,所以按需求抽象出一个接口Graph:

// 项目接口
interface Graph{ // 只需要两种图表, 线图和饼图
    drawLineChart();

    drawPieChart();
}

再用第三方库里的画图功能实现这个接口:

class Chart implements Graph{ // 实现接口
    drawLineChart(){
        new Axis().draw();
        new Line().draw();
    }

    drawPieChart(){
        new FanShape().draw(90);
        new FanShape().draw(180);
        new FanShape().draw(90);
    }
}

这样项目只需要通过Graph接口来画图表就好了,而不用知道具体的细节。

与适配器相同的点是同样是一种封装处理,不同的是适配器已有一个接口,而用这个接口不能使用另外一个系统,这时需要把那个系统做个适配来匹配现有接口,重点在于兼容接口,解决冲突。 而外观则是封装现有系统来对外提供一种简单的使用方式,重点在于简化调用。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Ryan Miao

Dagger2 入门解析

前言 在为dropwizard选择DI框架的时候考虑了很久。Guice比较成熟,Dagger2主要用于Android。虽然都是google维护的,但Dagger...

42612
来自专栏進无尽的文章

简述OC语言

对于一门语言的学习是需要时间领悟的,而对于一些原理性的问题,我们需要清楚其核心思想,知其然而知其所以然,这样才能有利于自己的后续发展。本文只是简述,没有面面具到...

852
来自专栏battcn

一起来学SpringBoot | 第十八篇:轻松搞定全局异常

实际项目开发中,程序往往会发生各式各样的异常情况,特别是身为服务端开发人员的我们,总是不停的编写接口提供给前端调用,分工协作的情况下,避免不了异常的发生,如果直...

762
来自专栏java一日一条

Java 元编程及其应用

同样是实现一个投票系统,一个是python程序员,基于django-framework,用了半小时就搭建了一个完整系统,另外一个是标准的SSM(Spring-S...

531
来自专栏州的先生

对Django模型对象进行序列化和反序列化

1163
来自专栏nimomeng的自我进阶

View官方文档

552
来自专栏Create Sun

基础拾遗------------依赖注入

前言   好久没有写微博了,因为前段时间由于家庭原因决定从工作了3年多的北京转移到上海去。依赖注入在学习net core的时候也有写过类似的东西,只是实践的较少...

34510
来自专栏互联网大杂烩

Spring MVC中servlet架构

控制反转,用一句话解释这个概念就是将对象的创建和获取提取到外部。由外部容器提供需要的组件。

682
来自专栏大内老A

我的WCF之旅(6):在Winform Application中调用Duplex Service出现TimeoutException的原因和解决方案

几个星期之前写了一篇关于如何通过WCF进行 双向通信的文章([原创]我的WCF之旅(3):在WCF中实现双向通信(Bi-directional Communic...

1636
来自专栏Java Web

JavaWeb中使用JSON

JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

1654

扫码关注云+社区