前端必须掌握的设计模式——适配器模式

简介: 适配器模式是一种结构型设计模式,用于使接口不兼容的对象能够相互合作。通过在客户端和系统之间引入一个“中间层”适配器,将不同类型的输入数据转换为系统能处理的标准格式,减轻系统的负担,提高扩展性和可维护性。例如,MacBook的扩展坞将多种接口(如HDMI、USB)转换为Type-C接口,实现多接口兼容。

定义

       适配器模式(Adapter Pattern)属于结构型设计模式。目的是要使接口不兼容的对象能够相互兼容,比如客户端发送的消息有很多类型,如下图的ABC三种类型,发给系统内部去处理,那么如果有10000种类型,系统的负担就会很重。

Pasted Graphic 16.png

       适配器模式就是我们需要在客户端和系统中间加入一个“中间层”,这个适配器用来将ABC等类型的数据进行转换和统一,以一种标准通用的类型交给系统去处理,从而解决多类型导致系统沉重的负担。

A类型.png

特点

       从适配器的设计来看,加入这个“中间层”解开了客户端和系统的强耦合,以一个适配器去转换为一类标准再去处理,从而解决了类型不适配的问题,具有良好的扩展性和可维护性。

举例说明

       现实中,使用macBook的用户一定不陌生,macBook的接口只有typeC类型的雷电接口,我们如果要外接屏幕需要用到HDMI接口,要拷贝U盘数据需要用到USB接口,导入导出单反相机中的照片需要用到SD/TF卡槽等等,这些接口都与typeC接口不适配。

       所以出现了一种“适配器”叫做扩展坞,这种扩展坞以多种类型的接口暴露给客户端,再以typeC接口与系统接口通信,从而达到多接口兼容的目的,这是现实中常见的适配器模式的案例。

Pasted Graphic 14.png

代码实现

       这里以类为基础的面向对象方式实现这种思想,使用TypeScript语言。首先我们知道要实现适配器模式肯定离不开客户端、系统、适配器这三个对象,于是这三个对象可以设计成三个类。IDock是适配器接口用来约束规范,客户端和适配器都要遵循这种规范。定义一个Adapter适配器类,里边需要封装一些转换的逻辑作为客户端与系统通信的“桥梁”。SystemService类是系统服务类,Client无法直接调用,而是要通过适配器间接调用,UML图如下。

C) Cllont.png

       这是扩展坞实现了接口供客户端去调用,适配器中经过处理再与系统服务交互。Adapter类中的method方法是主流程逻辑,translateData是数据转换逻辑;SystemService类中只需要关注内部的信息处理逻辑就好;Client定义了send方法与适配器进行交互。代码设计如下。

// 扩展坞接口
interface IDock {
  method(data: string): void;
}
// 适配器类
class Adapter implements IDock {
  private service: SystemService;
  constructor(service: SystemService) {
    this.service = service;
  }
  // 然后再调用系统服务类的方法进行分析
  public method(data: string): void {
    console.log('适配器开始转换系统能够识别的数据');
    const commonData = this.translateData(data);
    // 拿到通用数据后 调用系统服务类去处理信息 
    this.service.systemMain(commonData);
  }
    // 提供一个私有的转换方法 将数据转换为系统能够识别的数据
  private translateData(data: string): string {
    return `系统通用的信息{${data}}`;
  }
}
// 系统服务类 提供了系统对信息处理的方法
class SystemService {
  public systemMain(data: string) :void{
    console.log(`执行来自系统的方法,去处理:{${data}}`);
  }
} 
class Client {
  private adapter: IDock;
  constructor(adapter: IDock) {
    this.adapter = adapter;
  }
  send(data: string) {
    this.adapter.method(data);
  }
}
// 创建一个系统服务实例
const systemService = new SystemService();
// 创建适配器实例
const adapter = new Adapter(systemService);
// 创建一个客户端实例
const clt = new Client(adapter);
// 调用send方法 传递来自USB的数据
clt.send('来自USB的数据');
// 调用send方法 传递来自HDMI的数据
clt.send('来自HDMI的数据');

image.gif

       客户端使用时先创建一个系统服务对象实例,再创建适配器对象实例将系统服务对象实例传入,保证了适配器是要与系统服务类中的systemMain方法进行交互。再创建一个客户端实例对象,将适配器实例对象作为参数,保证了客户端调用了这个适配器实例对象的method方法。这里写了两个send,客户端实例对象send之后,执行结果如下。

适配器开始转换系统能够识别的数据.png

客户端实例对象调用send之后,执行了适配器对象中的method方法执行了适配器的主流程,method方法又调用了translateData方法将不同类型转换成了系统能够处理的标准通用类型,最终调用了系统服务对象的内部执行方法systemMain。

Pasted Graphic 18.png

前端中的应用

       除了基于类面向对象编程之外,前端日常应用中大量使用的是函数式编程,将适配器的思想融入,基本上就是数据结构不同时,为了不修改之前的逻辑,会定义一个转换方法作为中介处理完数据之后再连接之前的逻辑。例子如下。

const obj = {
    name: 'abc',
    age: 23
};
send(obj);

比如send方法将obj对象传给后端。如果现在后端数据结构改了,要在外边包一层data,传入当前时间戳stamp,并且使用json字符串的形式传输,为了不影响obj的代码结构,我们通常会写一个formatter方法,这也是日常函数式编程对适配器模式的思想应用。

const obj = {
    name: 'abc',
    age: 23
};
const formatter = (o) => {
    const now = new Date().valueOf();
    return JSON.stringify({
        data: { ...o },
        stamp: now
    })
};
send(formatter(obj));

总结

       适配器模式可谓是经常用到,并且作为一种重要设计思想,能够提高代码的兼容性、扩展性和可维护性。前端必须掌握的设计模式系列持续更新,如果对您有帮助希望多多点赞哦!

temp1.png

相关文章
|
2月前
|
设计模式 前端开发 搜索推荐
前端必须掌握的设计模式——模板模式
模板模式(Template Pattern)是一种行为型设计模式,父类定义固定流程和步骤顺序,子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景,如组装汽车、包装礼物等。举例来说,公司年会节目征集时,蜘蛛侠定义了歌曲的四个步骤:前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑,子类实现个性化行为,从而减少重复代码。模板模式还支持钩子方法,允许跳过某些步骤,增加灵活性。
125 11
|
2月前
|
设计模式 存储 供应链
前端必须掌握的设计模式——观察者模式
观察者模式(Observer Pattern)是一种行为型设计模式,实现了一种订阅机制。它包含两个角色:**观察者**(订阅消息、接收通知并执行操作)和**被观察者**(维护观察者列表、发送通知)。两者通过一对多的关系实现解耦,当被观察者状态改变时,会通知所有订阅的观察者。例如,商店老板作为被观察者,记录客户的需求并在商品到货时通知他们。前端应用中,如DOM事件注册、MutationObserver等也体现了这一模式。
|
9天前
|
设计模式 Java 开发者
「全网最细 + 实战源码案例」设计模式——适配器模式
适配器模式(Adapter Pattern)是一种结构型设计模式,通过引入适配器类将一个类的接口转换为客户端期望的另一个接口,使原本因接口不兼容而无法协作的类能够协同工作。适配器模式分为类适配器和对象适配器两种,前者通过多重继承实现,后者通过组合方式实现,更常用。该模式适用于遗留系统改造、接口转换和第三方库集成等场景,能提高代码复用性和灵活性,但也可能增加代码复杂性和性能开销。
59 28
|
2月前
|
设计模式 前端开发 调度
前端必须掌握的设计模式——工厂模式
工厂模式是一种创建型设计模式,通过工厂媒介提供统一接口来创建对象,客户端只需告知创建需求,具体逻辑由工厂处理。工厂模式分为简单工厂、标准工厂和抽象工厂,分别适用于不同场景下的对象创建需求。简单工厂利用静态方法创建对象,标准工厂通过具体工厂类减少耦合,抽象工厂则用于创建一系列相关或依赖对象的家族。
|
2月前
|
设计模式 存储 缓存
前端必须掌握的设计模式——策略模式
策略模式(Strategy Pattern)是一种行为型设计模式,旨在将多分支复杂逻辑解耦。每个分支类只关心自身实现,无需处理策略切换。它避免了大量if-else或switch-case代码,符合开闭原则。常见应用场景包括表单验证、风格切换和缓存调度等。通过定义接口和上下文类,策略模式实现了灵活的逻辑分离与扩展。例如,在国际化需求中,可根据语言切换不同的词条包,使代码更加简洁优雅。总结来说,策略模式简化了多条件判断,提升了代码的可维护性和扩展性。
|
2月前
|
设计模式 消息中间件 供应链
前端必须掌握的设计模式——发布订阅模式
发布订阅模式(Publish-Subscribe Pattern)是一种设计模式,类似于观察者模式,但通过引入第三方中介实现发布者和订阅者的解耦。发布者不再直接通知订阅者,而是将消息发送给中介,由中介负责分发给订阅者。这种方式提高了异步支持和安全性,适合复杂、高并发场景,如消息队列和流处理系统。代码实现中,通过定义发布者、订阅者和中介接口,确保消息的正确传递。此模式在前端开发中广泛应用,例如Vue的数据双向绑定。
|
2月前
|
设计模式 前端开发 JavaScript
前端必须掌握的设计模式——装饰器模式
装饰器模式是一种结构型设计模式,通过创建新类来包装原始对象,实现在不修改原有结构的前提下扩展新行为。其核心在于“组合”思想,使新功能可“即插即拔”。该模式具有解耦性、灵活性和动态性等特点,广泛应用于类的面向对象编程语言中,如JavaScript的注解和TypeScript的写法。示例中,通过装饰器模式为游戏角色动态添加装备,展示了其强大的扩展性和灵活性。
|
2月前
|
设计模式 存储 前端开发
前端必须掌握的设计模式——单例模式
单例模式是一种简单的创建型设计模式,确保一个类只有一个实例,并提供一个全局访问点。适用于窗口对象、登录弹窗等场景,优点包括易于维护、访问和低消耗,但也有安全隐患、可能形成巨石对象及扩展性差等缺点。文中展示了JavaScript和TypeScript的实现方法。
|
2月前
|
设计模式 前端开发 数据安全/隐私保护
前端必须掌握的设计模式——代理模式
代理模式(Proxy Pattern)是一种结构型设计模式,通过引入“替身”对象来间接访问真实对象,从而解耦并提升性能和安全性。例如,知名艺人复出后,经纪人作为代理筛选商单,确保只处理符合团队利益的请求。代码实现中,定义接口`IService`,艺人和经纪人都实现该接口,经纪人在访问时进行过滤和转发。代理模式常用于权限控制、性能优化等场景,如前端中的Tree-shaking和ES6的Proxy构造方法。
前端必须掌握的设计模式——代理模式
|
4月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
281 14

热门文章

最新文章