适配器模式通过创建包装器统一不同接口，如用HTTP请求适配层整合Axios、Fetch、jQuery，实现调用标准化，提升系统兼容性与可维护性。
在前端开发中，不同项目或团队可能偏好使用不同的第三方库来实现相似功能，比如 jQuery、Axios、Fetch 用于 HTTP 请求，或 Lodash、Underscore 进行数据处理。当系统需要集成多个模块，而这些模块依赖不同的库时，就容易出现兼容性问题。为了解决这类问题，可以设计一个 JavaScript 适配器模式下的“第三方库兼容层”，统一接口调用方式，屏蔽底层差异。
什么是适配器模式？
适配器模式是一种结构型设计模式，它允许不兼容的接口之间能够协作。通过创建一个包装器（即适配器），将一个接口转换成另一个接口，使原本因接口不匹配而无法协同工作的对象可以一起工作。
在 JavaScript 中，适配器常用于：
- 封装旧有 API，使其符合新标准
- 桥接不同第三方库的调用方式
- 在不修改原有代码的前提下支持新功能
设计目标：构建统一的请求适配层
假设你的项目中部分模块使用 Axios 发送请求，另一些使用 Fetch，甚至还有使用 jQuery.ajax 的遗留代码。为了统一管理并便于未来替换底层实现，我们可以设计一个适配器层，对外暴露一致的 API。
立即学习“Java免费学习笔记（深入）”；
示例：HTTP 请求适配器定义统一接口：
const httpRequestAdapter = {
get(url, config) {
// 返回 Promise
},
post(url, data, config) {
// 返回 Promise
}
};
基于此接口，实现不同库的适配器：
import axios from 'axios';
const axiosAdapter = {
get(url, config) {
return axios.get(url, config);
},
post(url, data, config) {
return axios.post(url, data, config);
}
};
Fetch 适配器
const fetchAdapter = {
get(url, config) {
return fetch(url, { ...config, method: 'GET' }).then(res => res.json());
},
post(url, data, config) {
return fetch(url, {
...config,
method: 'POST',
headers: { 'Content-Type': 'application/json', ...config?.headers },
body: JSON.stringify(data)
}).then(res => res.json());
}
};
jQuery 适配器（适用于仍使用 jQuery 的场景）
const jqueryAdapter = {
get(url, config) {
return $.ajax({ url, type: 'GET', ...config });
},
post(url, data, config) {
return $.ajax({ url, type: 'POST', data, ...config });
}
};
运行时切换与配置管理
通过工厂函数或配置项动态选择适配器，提升灵活性。
function createHttpAdapter(type = 'fetch') {
switch (type) {
case 'axios':
return axiosAdapter;
case 'jquery':
return jqueryAdapter;
default:
return fetchAdapter;
}
}
// 使用方式
const http = createHttpAdapter('axios');
http.get('/api/user/1').then(data => {
console.log(data);
});
也可以结合环境变量或配置中心，在开发、测试、生产环境中自动选用合适的底层库。
扩展：通用工具库适配层
除了网络请求，类似思路也可应用于工具函数库。例如 Lodash 和原生方法之间的兼容。
const arrayUtilAdapter = {
map(collection, iteratee) {
if (window._) return _.map(collection, iteratee);
return Array.from(collection).map(iteratee);
},
debounce(func, wait) {
if (window._) return _.debounce(func, wait);
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
};
这样即使某些环境下未引入 Lodash，关键功能仍可降级运行。
基本上就这些。通过适配器模式搭建兼容层，能有效解耦业务逻辑与第三方依赖，提高系统的可维护性和可移植性。不复杂但容易忽略的是：保持适配器轻量，只做接口转换，不要掺杂业务判断。
