适配器模式

一、介绍

定义

适配器模式是属于结构型模式，所谓适配器模式，什么时候可以用到适配呢，在前端中，适配是用来适配不兼容，那么顾名思义，适配器模式是作为两个不兼容的接口之间的桥梁，是一种适配中间件，它存在于不匹配的二者之间，用于连接二者，将不匹配变得匹配，简单点理解就是平常所见的转接头，转换器之类的存在。。

适配器主要有3个角色组成：

客户端：调用接口的类
适配器：用来连接客户端接口和提供服务的接口的类
适配者：提供服务，但是却与客户端接口需求不兼容服务类。

举例

读卡器是作为内存卡和笔记本之间的适配器。您将内存卡插入读卡器，再将读卡器插入笔记本，这样就可以通过笔记本来读取内存卡。

优点：

可以让任何两个没有关联的类一起运行。
提高了类的复用。
增加了类的透明度。
灵活性好。

缺点：

过多地使用适配器，会让系统非常零乱，不易整体进行把握。比如，明明看到调用的是 A 接口，其实内部被适配成了 B 接口的实现，一个系统如果太多出现这种情况，无异于一场灾难。因此如果不是很有必要，可以不使用适配器，而是直接对系统进行重构。

适用场景

主要解决在软件系统中，常常要将一些"现存的对象"放到新的环境中，而新环境要求的接口是现对象不能满足的。

何时使用

系统需要使用现有的类，而此类的接口不符合系统的需要。
想要建立一个可以重复使用的类，用于与一些彼此之间没有太大关联的一些类，包括一些可能在将来引进的类一起工作，这些源类不一定有一致的接口。
通过接口转换，将一个类插入另一个类系中。（比如老虎和飞禽，现在多了一个飞虎，在不增加实体的需求下，增加一个适配器，在里面包容一个虎对象，实现飞的接口。）

如何解决

继承或依赖（推荐）。

关键代码

适配器继承或依赖已有的对象，实现想要的目标接口。

二、使用

jQuery中的适配器

我们以jQuery中的一个API为例，说说实际应用中的适配器模式的使用方法。在jQuery样式相关的API中，最方便使用的就是css()了，这个接口是把set和get的功能合二为一了：

//既可以像这样调用，取得opacity值
$('.elem').css('opacity');
// 也可以像这样，设置opacity值
$('.elem').css({'opacity': '0.9'});

举例

例子1

最简单的适配器模式

//客户端调用一个方法进行加法计算：
var result = add(1,2);
//但是我们没有提供add这个方法，提供了同样类似功能的sum方法：
function sum(v1,v2){
    return v1 + v2;
}
//为了避免修改客户端和服务端，我们增加一个包装函数
function add (v1,v2){
    reutrn sum(v1,v2);
}

例子2

两个地图接口之间的适配,两个地图都可以使用同一个方法渲染

//谷歌地图
var googleMap = {
   show: function()方法是show
       console.log( '开始渲染谷歌地图' );
   }
};
//百度地图
var baiduMap = {
   display: function(){ //方法是display
       console.log( '开始渲染百度地图' );
   }
};
//适配器
var baiduMapAdapter = {
   show: function(){//适配器也改为show,返回的是display
       return baiduMap.display();

   }
};
//下面是渲染地图的方法，传入地图对象
var renderMap = function( map ){//传入地图对象
   if ( map.show instanceof Function ){ //判断
       map.show();  //地图对象的show方法
       //在传入baiduMapAdapter对象的时候，调用show方法，返回的
       //实际是baiduMap的display方法。
   }
};

renderMap( googleMap ); // 输出：开始渲染谷歌地图
renderMap( baiduMapAdapter ); // 输出：开始渲染百度地图

例子3

鸭子（Dock）有飞（fly）和 嘎嘎叫（quack）的行为
火鸡有飞（fly）和 咯咯的叫（gobble）的行为。
如果你非要火鸡也要实现 嘎嘎叫（quack）这个动作，那我们可以复用鸭子的quack方法，但是具体的叫还应该是咯咯的

此时，我们就可以创建一个火鸡的适配器，以便让火鸡也支持quack方法，其内部还是要调用gobble。

//鸭子
var Duck = function(){

};
Duck.prototype.fly = function(){
  throw new Error("该方法必须被重写!");
};
Duck.prototype.quack = function(){
  throw new Error("该方法必须被重写!");
}

//火鸡
var Turkey = function(){

};
Turkey.prototype.fly = function(){
    throw new Error(" 该方法必须被重写 !");
};
Turkey.prototype.gobble = function(){
    throw new Error(" 该方法必须被重写 !");
};

然后再定义具体的鸭子和火鸡的构造函数，分别为：（copy的代码感觉和上面的合二为一也可以）

//鸭子
var MallardDuck = function () {
    Duck.apply(this);
};
MallardDuck.prototype = new Duck(); //原型是Duck
MallardDuck.prototype.fly = function () {
    console.log("可以飞翔很长的距离!");
};
MallardDuck.prototype.quack = function () {
    console.log("嘎嘎！嘎嘎！");
};

//火鸡
var WildTurkey = function () {
    Turkey.apply(this);
};
WildTurkey.prototype = new Turkey(); //原型是Turkey
WildTurkey.prototype.fly = function () {
    console.log("飞翔的距离貌似有点短!");
};
WildTurkey.prototype.gobble = function () {
    console.log("咯咯！咯咯！");
};

为了让火鸡也支持quack方法，我们创建了一个新的火鸡适配器TurkeyAdapter：

var TurkeyAdapter = function(oTurkey){
    Duck.apply(this);
    this.oTurkey = oTurkey;
};
TurkeyAdapter.prototype = new Duck();//原型是鸭子
TurkeyAdapter.prototype.quack = function(){
    console.log("嘎嘎！嘎嘎！");
    this.oTurkey.gobble();
};
TurkeyAdapter.prototype.fly = function(){
    var nFly = 0;
    var nLenFly = 5;
    for(; nFly < nLenFly;){
        this.oTurkey.fly();
        nFly = nFly + 1;
    }
};

该构造函数接受一个火鸡的实例对象，然后使用Duck进行apply，其适配器原型是Duck，然后要重新修改其原型的quack方法，以便内部调用oTurkey.gobble()方法。其fly方法也做了一些改变，让火鸡连续飞5次（内部也是调用自身的oTurkey.fly()方法）。

调用方法，就很明了了，测试一下便可以知道结果了：


var oMallardDuck = new MallardDuck();
var oWildTurkey = new WildTurkey();
var oTurkeyAdapter = new TurkeyAdapter(oWildTurkey);

//原有的鸭子行为
oMallardDuck.fly();
oMallardDuck.quack();

//原有的火鸡行为
oWildTurkey.fly();
oWildTurkey.gobble();

//适配器火鸡的行为（火鸡调用鸭子的方法名称）
oTurkeyAdapter.fly();
oTurkeyAdapter.quack();