设计模式之-适配器模式

介绍

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

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

相关推荐
GIS程序媛—椰子10 分钟前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山33 分钟前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享1 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
捕鲸叉2 小时前
MVC(Model-View-Controller)模式概述
开发语言·c++·设计模式
wrx繁星点点2 小时前
享元模式:高效管理共享对象的设计模式
java·开发语言·spring·设计模式·maven·intellij-idea·享元模式
凉辰2 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
菜菜-plus3 小时前
java设计模式之策略模式
java·设计模式·策略模式
暗黑起源喵3 小时前
设计模式-迭代器
设计模式
清灵xmf3 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨3 小时前
VUE+Vite之环境文件配置及使用环境变量
前端