设计模式之-适配器模式

介绍

适配器模式( Adapter pattern )顾名思义是为了适配不兼容的场景,使得其可以正常工作。

生活中也不乏有类似适配器的场景,最常见的就是插口适配。比如说我们手机充电插头无法与香港的插口兼容,那么这个时候就需要有一个适配器来进行转接。这就可以理解为一个简单的适配器模式场景。

工作原理

适配器通过一系列实现来对外提供一个统一的、与使用者兼容的接口。

假设现在我想要提供一个方法 request,它可以发起网络请求,方法的使用方式如下:

js 复制代码
request(config).then(data=>{
	// 做一些事情
})

现在我想要这个方法同时可以在浏览器中和 NodeJS 环境中使用,且使用方式要保持一致。我们知道在浏览器中发起请求与在 NodeJS 中发起请求的方式方法不同,浏览器中可以使用 XMLHttpRequest 对象和 Fetch API,NodeJS 中则使用 http 模块发起请求。那我们如何只提供一个方法 request 来抹平不同平台方法之间的差异呢?答案是可以使用适配器模式。

我们可以为 XMLHttpRequesthttp 分别实现一个适配器,分别记为 xhrAdapterhttpAdapter。在适配器的实现中通过一系列操作对外暴露相同的接口。这样我们在使用时只需要通过环境或者配置来判断在底层使用哪一个适配器即可,而不用担心不同环境之间的差异,因为适配器会帮我们解决这一切。

下面展示了两个适配器的的实现签名,它们都对外提供了一个 dispatchRequest 方法用于请求。

js 复制代码
// xhrAdapter
export default function dispatchRequest(config){
	...
}
js 复制代码
// httpAdapter
export default function dispatchRequest(config){
	...
}

使用

js 复制代码
// 适配器列表
const adapters = [
	xhr:xhrAdapter
	http:httpAdapter
]

// 根据入参决定返回哪个适配器
const getAdapter(adapter){
	...省略
	return adapter
}

// 使用适配器进行请求,这里在使用时感受不到不同环境的差异。
const adapter = getAdapter(config.adapter || defaultAdapter)
adapter(config).then(data=>{})

Axios 中的适配器模式

读到这里,信息的伙伴就会发现,其实上面讲的就是 Axios 中适配器的简单原理。

Axios 中关于适配器的实现在 lib/adapter 目录中,感兴趣的伙伴可以自行查看

NestJS 中的适配器模式

Nest 是一个高效、可扩展的 Node 服务端应用框架。接触过 Nest 的伙伴应该知道 Nest 是在常见的 Node. js 框架(Express、Fastify)之上做了一层抽象。

没错,Nest 底层功能由其他框架如 Express、Fastify 来实现,重要的是这是完全可配置的,我们可以根据需要选择使用 Express 还是 Fastify。

到这里你可能会有疑问,Express 与 Fastify 作为完全不同的两个 Node. js 框架,它们的 API 自然有许多不兼容的地方,那使用 Nest 时为什么感觉不到这一点呢?其实不用我说,想必你已然知道答案,Nest 通过适配器模式来实现这一切!

代码简要分析

Nest 仓库中有 express-adapter. tsfastify. adapter. ts,分别是 ExpressFastify 的适配器实现, 如下:

从代码上看,它们都继承了 AbstractHttpAdapter 这个类。重要代码如下:

express-adapter. ts

fastify. adapter. ts

AbstractHttpAdapter 是一个抽象类 ,类中定义了一个适配器类应该实现的方法和属性。如果你也想提供一个适配器,根据 AbstractHttpAdapter 编写即可实现与 Nest 的集成。

AbstractHttpAdapter 的代码如下:

Nest 使用适配器模式实现了对外提供一套统一的 API,底层可以支持多种实现,只需要编写对应的适配器即可。这体现了 Nest 的高扩展型,也让 Nest 的核心功能与第三方框架也可以实现解耦。

总结

本文主要带大家认识了适配器模式及其简单的工作原理。并通过适配器模式在前端中的具体应用分析了 Axios、Nest 是如何使用适配器模式来解决问题的。通过本文希望大家能够对适配器模式有更加深刻的认识。

有问题和可优化的地方还请指出。

相关推荐
写代码的小王吧41 分钟前
【安全】Web渗透测试(全流程)_渗透测试学习流程图
linux·前端·网络·学习·安全·网络安全·ssh
程序员沉梦听雨1 小时前
原型模式详解
设计模式·原型模式
小小小小宇1 小时前
CSS 渐变色
前端
snow@li2 小时前
前端:开源软件镜像站 / 清华大学开源软件镜像站 / 阿里云 / 网易 / 搜狐
前端·开源软件镜像站
coderzpw2 小时前
谁该处理我的请假?——责任链模式
设计模式·责任链模式
小小小小宇2 小时前
配置 Gemini Code Assist 插件
前端
one 大白(●—●)2 小时前
前端用用jsonp的方式解决跨域问题
前端·jsonp跨域
刺客-Andy2 小时前
前端加密方式 AES对称加密 RSA非对称加密 以及 MD5哈希算法详解
前端·javascript·算法·哈希算法
前端开发张小七3 小时前
13.Python Socket服务端开发指南
前端·python
前端开发张小七3 小时前
14.Python Socket客户端开发指南
前端·python