前端的设计模式系列-适配器模式-linux运维-PHP中文网

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

雪夜

发布： 2025-07-21 10:38:35

原创

707人浏览过

在学习和总结设计模式的过程中，确实有必要根据具体的编程语言来调整和理解这些模式。在javascript中，由于其基于原型的动态特性，设计模式的实现可能与传统的静态类型语言有所不同。以下是关于适配器模式的详细总结，按照您提出的“场景” - “设计模式定义” - “代码实现” - “更多场景” - “总”的顺序进行：

场景

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

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

登录后复制

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

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

登录后复制

此时，可以通过适配器模式进行数据格式的转换。

设计模式定义

维基百科对适配器模式的定义是：在不改变现有类的基础上，让它们能够正常使用另一个类。适配器模式在基于类的语言中有两种实现方式：

立即学习“前端免费学习笔记（深入）”；

组合方式：适配器类内部包含原对象的实例。
继承方式：适配器类直接继承原类。

以下是UML类图的示例：

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

左边的Adapter内部拥有Adaptee的实例，右边的Adapter类直接继承Adaptee类。适配器会将Adaptee的specificOperation方法进行相应的处理，包装为operation方法供client使用。

代码实现

在JavaScript中，我们可以使用函数来实现适配器模式。让我们用一个简单的例子来说明：现实生活中，iPhone有两种耳机插口，一种是Lightning，一种是传统的3.5毫米接口。如果是Lightning插口的耳机想要插到传统的3.5毫米接口的电脑上，就需要适配器。

首先，我们用Java来展示传统的适配器模式实现：

百灵大模型

蚂蚁集团自研的多模态AI大模型系列

177

查看详情

class Lightning耳机 {
    public void 插入Lighting接口() {
        System.out.println("插入到Lighting耳机接口成功");
    }
}
<p>class 传统耳机 {
public void 插入到传统耳机孔() {
System.out.println("插入到传统耳机孔成功");
}
}</p><p>class Lightning耳机到传统耳机适配器 extends 传统耳机 {
public Lightning耳机 Lightning耳机;</p><pre class="brush:php;toolbar:false;"><code>public Lightning耳机到传统耳机适配器(Lightning耳机 耳机) {
    Lightning耳机 = 耳机;
}

public void 插入到传统耳机孔() {
    Lightning耳机.插入Lighting接口();
}

登录后复制

}

class 电脑传统耳机孔 { public 传统耳机耳机;

<code>public 电脑传统耳机孔(传统耳机 传统耳机) {
    耳机 = 传统耳机;
}

public void 插入耳机() {
    耳机.插入到传统耳机孔();
}</code>

登录后复制

}

public class Main { public static void main(String[] args) { 传统耳机传统耳机 = new 传统耳机(); 电脑传统耳机孔电脑传统耳机孔 = new 电脑传统耳机孔(传统耳机); 电脑传统耳机孔.插入耳机(); // 插入到传统耳机孔成功

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

登录后复制

}

接下来，我们将其转换为JavaScript的实现：

const Lightning耳机 = {
插入Lighting接口() {
console.log("插入到Lighting耳机接口成功");
}
};</p><p>const 传统耳机 = {
插入到传统耳机孔() {
console.log("插入到传统耳机孔成功");
}
};</p><p>const 电脑传统耳机孔 = {
插入耳机(耳机) {
耳机.插入到传统耳机孔();
}
};</p><p>const Lightning耳机到传统耳机适配器 = function(Lightning耳机) {
return {
插入到传统耳机孔() {
Lightning耳机.插入Lighting接口();
}
};
};</p><p>电脑传统耳机孔.插入耳机(传统耳机); // 插入到传统耳机孔成功
电脑传统耳机孔.插入耳机(Lightning耳机到传统耳机适配器(Lightning耳机)); // 插入到Lighting耳机接口成功

登录后复制

回到开头的问题，Table组件提供了一个responseProcessor的钩子，我们可以通过这个钩子将接口返回的数据进行包装：

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

登录后复制