JavaScript适配器模式详解：原理与实现

适配器模式概述

适配器模式说明

适配器模式通常应用于以下场景：当现有接口不符合当前应用或系统的直接使用要求时，需要引入一个中间适配层（类或对象）来进行转换。

生活场景中，这类似于购买手机后发现充电插头为三脚插头，而家中仅有两孔插座。为解决此问题，需购买通用充电适配器，使手机能在本地充电，否则只能携带设备至具备对应插座的场所充电。

在实际开发中，旧系统或第三方应用提供的接口往往与当前定义的接口不匹配。在面向接口编程的架构下，无法直接调用这些旧接口。此时，可通过创建适配类继承待适配的类，并实现目标接口的方式，将旧系统或第三方接口引入当前系统。

通过这种方式，在采用接口编程时，即可利用适配类间接调用旧系统或第三方应用的接口，从而实现接口的兼容与复用。

在JavaScript中实现类似动态面向对象语言的适配器模式，可利用prototype原型继承机制。由于JavaScript原生不支持接口概念，此处省略接口层，直接实现目标类Target，以模拟相关源码逻辑。

JavaScript代码实现

源码实例

1. 待适配的类及接口方法:

function Adaptee() {
this.name = 'Adaptee';
}
Adaptee.prototype.getName = function() {
return this.name;
}

2. 普通实现类 [由于 Javascript 中没有接口，所以就直接提供实现类]

function Target() {
this.name = 'Target';
}
Target.prototype.queryName= function() {
 return this.name;
}

3. 适配类:

function Adapte() {
this.name = '';
}
Adapte.prototype = new Adaptee();
Adapte.prototype.queryName = function() {
 this.getName();
}

4.使用方法:

var local = new Target();
local.queryName(); //调用普通实现类
var adapte = new Adapte();
adapte.queryName(); //调用旧的系统或第三方应用接口;

与其他语言对比说明

其他说明

上述第四步中，var local 及 var adapte 的用法类似于Java、C#等面向对象语言中的接口引用赋值，例如：

interface Target {
public String queryName();
}
//接口引用指向
Target local = new RealTarget(); //即上面 Javascript 的 Target 实现类
local.queryName();
//适配器
Target adapte = new Adapte();
adapte.queryName();

由此可见，适配器类充当了目标接口与现有类之间的中间层。该模式旨在解决目标已存在但无法直接使用的情况，通过适配器模式（亦称转换模式或包装模式）实现代码协同。