适配器模式

一、介绍

定义

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

适配器主要有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(); //原型是DuckMallardDuck.prototype.fly = function () {    console.log("可以飞翔很长的距离!");};MallardDuck.prototype.quack = function () {    console.log("嘎嘎！嘎嘎！");};//火鸡var WildTurkey = function () {    Turkey.apply(this);};WildTurkey.prototype = new Turkey(); //原型是TurkeyWildTurkey.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();复制代码