前端的设计模式系列-适配器模式

大部分讲设计模式的文章都是使用的 Java、C++ 这样的以类为基础的静态类型语言，作为前端开发者，js 这门基于原型的动态语言，函数成为了一等公民，在实现一些设计模式上稍显不同，甚至简单到不像使用了设计模式，有时候也会产生些困惑。

站在用户的角度思考问题，与客户深入沟通，找到环江网站设计与环江网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：做网站、成都网站建设、企业官网、英文网站、手机端网站、网站推广、域名申请、网络空间、企业邮箱。业务覆盖环江地区。

下面按照「场景」-「设计模式定义」- 「代码实现」- 「更多场景」-「总」的顺序来总结一下，如有不当之处，欢迎交流讨论。

场景

当我们使用第三方库的时候，常常会遇到当前接口和第三方接口不匹配的情况，比如使用一个 Table 的组件，它要求我们返回的表格数据格式如下：

{
  code: 0, // 业务 code
  msg: '', // 出错时候的提示
  data: {
     total: , // 总数量
     list: [], // 表格列表
  }
};

但后端返回的数据可能是这样的：

{
  code: 0, // 业务 code
  message: '', // 出错时候的提示
  data: {
     total: , // 总数量
     records: [], // 表格列表
  }
};

此时就可以通过适配器模式进行转换。

适配器模式

看一下维基百科给的定义：

In software engineering, the adapter pattern is a software design pattern that allows the interface of an existing class to be used as another interface.[1] It is often used to make existing classes work with others without modifying their source code.”通过适配器模式可以让当前 class 不改变的情况下正常使用另一个 class。

在以 class 为基础的语言中有两种实现方式，一种是通过组合的方式，适配器类内部包含原对象的实例。一种是通过类继承，适配器类继承原 class 。可以看下 UML 类图：

image-20220213124112500

左边的 Adapter 内部拥有 Adaptee的实例，右边的 Adapter 类直接继承 Adaptee 类。

适配器会将 Adaptee 的 specificOperation 方法进行相应的处理包装为operation 方法供 client 使用。

看一个简单的例子，现实生活中iPhone 有两种耳机插口，一种是 Lightning，一种是传统的 3.5 毫米接口。如果是 lightning 插口的耳机想要插到传统的 3.5 毫米接口的电脑上就需要适配器了。

class Lightning耳机 {
 public void 插入Lighting接口(){
  System.out.println("插入到Lighting耳机接口成功");
 }
}
class 传统耳机 {
 public void 插入到传统耳机孔(){
  System.out.println("插入到传统耳机孔成功");
 }
}
class Lightning耳机到传统耳机适配器 extends 传统耳机 {
 public Lightning耳机 Lightning耳机;
 public Lightning耳机到传统耳机适配器(Lightning耳机 耳机) {
  Lightning耳机 = 耳机;
 }
 public void 插入到传统耳机孔(){
  Lightning耳机.插入Lighting接口();
 }
}
class 电脑传统耳机孔 {
 public 传统耳机 耳机;
 public 电脑传统耳机孔(传统耳机 传统耳机) {
  耳机 = 传统耳机;
 }
 public void 插入耳机() {
  耳机.插入到传统耳机孔();
 }
}
public class Main {
 public static void main(String[] args) {
  传统耳机 传统耳机 = new 传统耳机();
  电脑传统耳机孔  电脑传统耳机孔 = new 电脑传统耳机孔(传统耳机);
  电脑传统耳机孔.插入耳机(); // 插入到传统耳机孔成功


  Lightning耳机 Lightning耳机 = new Lightning耳机();
  电脑传统耳机孔  电脑传统耳机孔2 = new 电脑传统耳机孔(new Lightning耳机到传统耳机适配器(Lightning耳机)); 
  电脑传统耳机孔2.插入耳机(); // 插入到Lighting耳机接口成功
 }
}

通过适配器我们成功将 Lightning 耳机插入到了电脑传统耳机孔，让我们再用js 改写一下。

const Lightning耳机 = {
    插入Lighting接口(){
  console.log("插入到Lighting耳机接口成功");
 }
}

const 传统耳机 = {
    插入到传统耳机孔(){
  console.log("插入到传统耳机孔成功");
 }
}

const 电脑传统耳机孔 = {
    插入耳机(耳机) {
        耳机.插入到传统耳机孔();
    }
}

const Lightning耳机到传统耳机适配器 = function(Lightning耳机) {
    return {
        插入到传统耳机孔(){
            Lightning耳机.插入Lighting接口()
        }
    }
}

电脑传统耳机孔.插入耳机(传统耳机) // 插入到传统耳机孔成功
电脑传统耳机孔.插入耳机(Lightning耳机到传统耳机适配器(Lightning耳机)) // 插入到Lighting耳机接口成功

代码实现

回到开头接口不匹配的问题上，Table组件提供了一个 responseProcessor的钩子，我们只需要通过这个钩子将接口返回的数据进行包装即可。

{
  ...
  responseProcessor(res) {
    return {
      ...res,
      msg: res.message, // 出错时候的提示
      data: {
         ...res.data
         list: res?.data?.records || [], // 表格列表
      }
    };
  },
  ...
  
}

易混设计模式

适配器模式和代理模式在代码结构上很像，代理模式也是对原对象进行包装处理。区别在于它们的意图不同：

适配器模式是为了解决两个对象之间不匹配的问题，而原对象又不适合直接修改，此时可以使用适配器模式进行一层转换。
代理模式是为了增强原对象的功能，提供的接口不会改变。

总

适配器模式是一种比较简单的设计模式，在 js 中也会很自然的应用，一般通过一个函数进行转换即可。

本文标题：前端的设计模式系列-适配器模式
文章网址：http://www.shufengxianlan.com/qtweb/news23/480873.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容