JavaScript 设计模式实践(1)- 适配器模式
最新回答
山河不入梦
2026-10-24 13:48:57
适配器模式在JavaScript中的实践
适配器模式是一种结构型设计模式，它允许将不兼容的接口转换为可兼容的接口，使得原本由于接口不兼容而不能一起工作的类可以一起工作。在JavaScript中，适配器模式的应用尤为广泛，因为JavaScript的灵活性使得我们经常需要处理不同来源、不同格式的数据或功能。
核心概念
- Client（使用者）：这是调用适配器功能的代码部分。
- Adapter（适配器）：这是实现转换功能的部分，它将Adaptee的接口转换为Client期望的接口。
- Adaptee（被适配者）：这是需要被适配的现有接口，它可能由于接口不兼容而无法直接被Client使用。
真实场景应用
在移动端H5开发中，我们经常需要依赖设备底层的能力，如分享、打开新webview等。然而，不同的环境（如APP内嵌H5、普通浏览器、微信浏览器）可能提供不同的API来实现这些功能。这时，适配器模式就能发挥巨大作用。
假设我们有三个对象：appSDK、window（代表普通浏览器环境）、wxSDK（代表微信环境），它们都提供了底层能力的实现，但接口各不相同。
不使用适配器模式的代码
function getEnv() { return 'app'; // 也可能是 'browser' 或 'wx'}function noop() {};function share() { switch(getEnv()) { case 'app': appSDK.jsBridge('share'); break; case 'browser': noop(); break; case 'wx': wxSDK.onMenuShareTimeline(); wxSDK.onMenuShareAppMessage(); break; }}function openUrl() { // 类似share函数的实现...}这段代码的问题在于，它直接依赖于具体的环境实现，导致代码耦合度高，难以维护。
使用适配器模式重构
我们可以为每个环境创建适配器对象，这些适配器对象提供统一的接口，内部则调用各自环境的特定实现。
const appAdapter = { share: () => { appSDK.jsBridge('share'); }, openUrl: () => { /* ... */ }};const wxAdapter = { share: () => { wxSDK.onMenuShareTimeline(); wxSDK.onMenuShareAppMessage(); }, openUrl: () => { /* ... */ }};const browserAdapter = { share: () => { noop(); }, openUrl: () => { /* ... */ }};业务代码与适配器结合
现在，我们的业务代码可以只依赖于适配器接口，而不需要关心具体是哪个环境。
function share() { let sdk = null; switch(getEnv()) { case 'app': sdk = appAdapter; break; case 'browser': sdk = browserAdapter; break; case 'wx': sdk = wxAdapter; break; } sdk.share();}// 或者使用更简洁的策略模式实现function getSDK() { return { app: appAdapter, wx: wxAdapter, browser: browserAdapter }[getEnv()];}适配器模式与外观模式的区别
虽然适配器和外观模式都提供了统一的接口来简化复杂系统的使用，但它们的意图是不同的：
- 适配器模式：主要是为了解决接口不兼容的问题，将一个接口转换成另一个接口。
- 外观模式：主要是为了简化复杂系统的接口，提供一个更简单、更统一的接口来访问子系统中的多个接口。
总结
适配器模式在JavaScript中是一种非常有用的设计模式，特别是在处理不同环境、不同库或不同API之间的接口不兼容问题时。通过创建适配器对象，我们可以将复杂的、不兼容的接口转换为简单的、统一的接口，从而降低代码的耦合度，提高代码的可维护性和可扩展性。
热门标签
