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 条评论
登录 后参与评论

相关文章

来自专栏书山有路勤为径

Tensorflow训练网络出现了loss = NAN解决方案

注:内容来源与网络 最近用Tensorflow训练网络,在增加层数和节点之后,出现loss = NAN的情况,在网上搜寻了很多答案,最终解决了问题,在这里汇总...

781
来自专栏应兆康的专栏

100个Numpy练习【3】

Numpy是Python做数据分析必须掌握的基础库之一,非常适合刚学习完Numpy基础的同学,完成以下习题可以帮助你更好的掌握这个基础库。

3829
来自专栏北京马哥教育

Python 绘图库 Matplotlib 入门教程

Matplotlib是一个Python语言的2D绘图库,它支持各种平台,并且功能强大,能够轻易绘制出各种专业的图像。本文是对它的一个入门教程。

781
来自专栏北京马哥教育

Python3爬虫抓取网易云音乐热评实战

前一段时间刚刚入门python爬虫,有大概半个月时间没有写python了,都快遗忘了。于是准备写个简单的爬虫练练手,我觉得网易云音乐最优特色的就是其精准的歌曲推...

873
来自专栏瓜大三哥

图像分割(四)

图像分割(四) 之基于FPGA的局部自适应分割 子模块设计 窗口缓存模块win_buf 本模块不做任何算法上的处理,只是负责将当前输入像素的二维窗口元素缓存并组...

2138
来自专栏北京马哥教育

Python3爬虫抓取网易云音乐热评实战

? 前一段时间刚刚入门python爬虫,有大概半个月时间没有写python了,都快遗忘了。于是准备写个简单的爬虫练练手,我觉得网易云音乐最优特色的就是其精准的...

4566
来自专栏人工智能LeadAI

逻辑回归 | TensorFlow深度学习笔记

课程目标:学习简单的数据展示,训练一个Logistics Classifier,熟悉以后要使用的数据 Install Ipython NoteBook 可以参考...

2897

如何预先处理电影评论数据以进行情感分析

对于不同的问题,文本数据的预先处理是不同的。

2726
来自专栏数据的力量

一大波常用函数公式,值得收藏!

1434
来自专栏小巫技术博客

A008-drawable资源

关于drawable资源笔者之前有写过两篇文章: Android-自定义图像资源的使用(1) Android-自定义图像资源的使用(2) 这里笔者就不做过多的赘...

692

扫码关注云+社区