JavaScript设计模式与实践--适配器模式

适配器模式(Adapter)

适配器模式主要用来解决两个已有接口之间不匹配的问题,它不考虑这些接口是怎样实现的,也不考虑它们将来可能会如何演化。适配器模式不需要改变已有的接口,就能够使它们协同作用。

适配器的别名是包装器(wrapper),这是一个相对简单的模式。在程序开发中有许多这样的场景:当我们试图调用模块或者对象的某个接口时,却发现这个接口的格式并不符合目前的需求。这时候有两种解决办法,第一种是修改原来的接口实现,但如果原来的模块很复杂,或者我们拿到的模块是一段别人编写的经过压缩的代码,修改原接口就显得不太现实了。第二种办法是创建一个适配器,将原接口转换为客户希望的另一个接口,客户只需要和适配器打交道。

现实中也有很多适配器的例子:电源插座,usb适配器等等;例如iPhone7以后的耳机接口从3.5mm圆孔接口更改成为了苹果专属的 lightning接口。许多人以前的圆孔耳机就需要下面的一个适配器,才能够在自个儿新买的iPhone上面听歌。

2. 适配器模式使用场景

2.1 接口适配

当我们向googleMap 和baiduMap都发出“显示”请求时,googleMap和baiduMap` 分别以各自的方式在页面中展现了地图

这段程序得以顺利运行的关键是googleMap 和baiduMap 提供了一致的show 方法,但第三方的接口方法并不在我们自己的控制范围之内,假如baiduMap 提供的显示地图的方法不叫show 而叫display 呢?

baiduMap 这个对象来源于第三方,正常情况下我们都不应该去改动它,而且有时候我们也改不了它。此时我们可以通过增加baiduMapAdapter 来解决问题:

2.2 参数的适配

有的情况下一个方法可能需要传入多个参数,例如在做一些监控上报的SDK时,可能采集的数据比较多,这个类中有一个systemInfo,需要传入五个参数用于接收手机的相关信息:

通常在传入的参数大于3的时候,我们就可以考虑将参数合并为一个对象的形式,就像我们$.ajax的做法一样。下面我们可以将systemInfo的参数接口定义如下(String代表参数类型,?: 代表可选项)

可以看出,carrier、language,network这三个属性不是必须传入的,它们在方法内部可能被设置一些默认值。所以这个时候我们就可以在方法内部采用适配器来适配这个参数对象。这种方式在我们的插件或者npm包中是常见的;

2.3 数据的适配

数据的适配在前端中是最为常见的场景,这时适配器在解决前后端的数据依赖上有着重要的意义。通常服务器端传递的数据和我们前端需要使用的数据格式是不一致的,特别是在在使用一些UI框架时,框架所规定的数据有着固定的格式。所以,这个时候我们就需要对后端的数据格式进行适配。

例如网页中有一个使用Echarts折线图对网站每周的uv,通常后端返回的数据格式如下所示:

但是Echarts需要的x轴的数据格式和坐标点的数据是长下面这样的:

所以这是我们就可以使用一个适配器,将后端的返回数据做适配:

3 总结

适配器模式是一对相对简单的模式。但适配器模式在JS中的使用场景很多,在参数的适配上,有许多库和框架都使用适配器模式;数据的适配在解决前后端数据依赖上十分重要。我们要认识到的是适配器模式本质上是一个”亡羊补牢”的模式,它解决的是现存的两个接口之间不兼容的问题,你不应该在软件的初期开发阶段就使用该模式;如果在设计之初我们就能够统筹的规划好接口的一致性,那么适配器就应该尽量减少使用。

在JavaScript中的适配器更多应用于在对象之间,为了使对象可用,我们通常会将对象拆分并重新组装,这样就必须了解适配对象的内部结构,这也是和外观模式的区别所在,当然是配资模式同样解决了对象之间的耦合度,包装的适配代码增加了一些资源消耗,但这是微乎其微的。

感谢阅读

喜欢小编文章的,可以点个订阅,小编都会不停更新文章,分享前端学习知识,以及程序员员的趣事!

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Zephery

谈谈个人网站的建立(四)—— 日志系统的建立

谈谈个人网站的建立(四)—— 日志系统的建立 欢迎访问我的网站http://www.wenzhihuai.com/ 。感谢,如果可以,希望能在GitHub上给个...

40840
来自专栏编程

Python教学——第七天

如果你前面都跟着文章做了,相信你已经自己在私下也了解了很多知识 如果你之前全都没有跟着做,也没有关系,至少你可以了解一个概念,对将来动手的时候会有一定的帮助 如...

26350
来自专栏嵌入式程序猿

看官网一步步给你分析学习freeRTOS

在之前的公众号文章《freeRTOS源码目录结构分析》中我们简单介绍了源码目录结构,文件夹包含的内容,今天我们来分析下以NXP的kinetis K60塔式系统为...

44390
来自专栏云计算教程系列

如何在Ubuntu 14.04上为IRC安装Lita Chat Bot

许多现代DevOps团队在聊天室周围建立了越来越多的基础设施。有很多聊天室,从商业选项(如HipChat和Slack)到DIY选项(如IRC或Jabber / ...

10610
来自专栏mathor

软件破解逆向工程实战(一)

本系列教程无需任何基础,直接学习即可,对于没有c/c++基础的同学来说也没有什么坎,多看,多做就能掌握,同时说一下,我们的QQ群:689696631,因为本系列...

29620
来自专栏debugeeker的专栏

《coredump问题原理探究》Linux x86版4.1节函数的逆向之序言

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuzhina/article/detai...

14520
来自专栏有趣的Python和你

Flask学习笔记之模板(三)

我们都知道html模板中,很多内容都是有重复的,譬如前面的head和后面的footer部分,这里的部分都是重复的,我们可以通过今天的学习的技术,减少代码的使用量...

8620
来自专栏CDA数据分析师

Python 快速教程(标准库)

Python有一套很有用的标准库(standard library)。标准库会随着Python解释器,一起安装在你的电脑中的。它是Python的一个组成部分。这...

22090
来自专栏光变

1.1 ASM-简介-目的

上面所述的技术可以应用于任何编程语言,只不过在实现上的难易程度取决于编程语言。 对于Java在这种情况下,可以在源码或者字节码中应用。 如果在字节码中应用,显而...

11920
来自专栏沈唁志

写给PHP开发者的五个建议

18640

扫码关注云+社区

领取腾讯云代金券