设计模式之-适配器模式

介绍

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

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

相关推荐
永乐春秋26 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿27 分钟前
【前端】CSS
前端·css
ggdpzhk29 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
哪 吒4 小时前
最简单的设计模式,抽象工厂模式,是否属于过度设计?
设计模式·抽象工厂模式
Theodore_10224 小时前
4 设计模式原则之接口隔离原则
java·开发语言·设计模式·java-ee·接口隔离原则·javaee
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app