设计模式之-适配器模式

介绍

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

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

相关推荐
2301_7969821412 分钟前
网页打开时,下载的文件text/html/重定向类型有什么作用?
前端·html
重生之我在20年代敲代码14 分钟前
HTML讲解(二)head部分
前端·笔记·html·web app
kimloner15 分钟前
工厂模式(二):工厂方法模式
java·设计模式·工厂方法模式
天下无贼!20 分钟前
2024年最新版TypeScript学习笔记——泛型、接口、枚举、自定义类型等知识点
前端·javascript·vue.js·笔记·学习·typescript·html
小白小白从不日白1 小时前
react 高阶组件
前端·javascript·react.js
Mingyueyixi1 小时前
Flutter Spacer引发的The ParentDataWidget Expanded(flex: 1) 惨案
前端·flutter
Rverdoser2 小时前
unocss 一直热更新打印[vite] hot updated: /__uno.css
前端·css
Bang邦3 小时前
使用nvm管理Node.js多版本
前端·node.js·node多版本管理
丶白泽3 小时前
重修设计模式-结构型-桥接模式
java·设计模式·桥接模式
podoor3 小时前
wordpress不同网站 调用同一数据表
前端·wordpress