设计模式之-适配器模式

介绍

适配器模式( 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 是如何使用适配器模式来解决问题的。通过本文希望大家能够对适配器模式有更加深刻的认识。

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

相关推荐
燃先生._.22 分钟前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖1 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235241 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240252 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar2 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人3 小时前
前端知识补充—CSS
前端·css
GISer_Jing3 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
m0_748245523 小时前
吉利前端、AI面试
前端·面试·职场和发展
理想不理想v3 小时前
webpack最基础的配置
前端·webpack·node.js