前言

定义

适配器模式（Adapter Pattern）是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式，它结合了两个独立接口的功能。

这种模式涉及到一个单一的类，该类负责加入独立的或不兼容的接口功能。举个真实的例子，读卡器是作为内存卡和笔记本之间的适配器。将内存卡插入读卡器，再将读卡器插入笔记本，这样就可以通过笔记本来读取内存卡。

生活中的适配器

1、转接头，如数据线、插排等的转接头、要合适的适配
2、转压器，如家庭电路用的是220v （伏特），一些电器是小电压或者大电压的就需要转压器。

程序中的适配器

1、封装旧接口的时候

--例如--

在代码中使用ajax 请求封装，现在要用这种方式。

ajax({
  url: 'getUser',
  type: 'POST',
  dataType: 'json',
  data: {
    id: 1
  }
}).done(function(){})

--然而--

项目中之前有很多写法是下面这样的几十万行代码

$ajax({...})

要怎么优雅的替换呢？

这时候就可以考虑到使用适配器模式的方法。可以尝试这样去替换。


let $ = {
  ajax: function (options) {
    return this.ajax(options);
  }
}

这样上面的$ajax({...})中的ajax就会走上面这个路线来转换了，就不用去全文中替换那么多了。新老情况格式不同是就很合适使用适配器的去兼容，而不是全文替换，因为全局替换坑多。

2、 vue 框架中的computed 方法

适配器的实现

UML　建模

代码类

// 适配器类
class Adaptee {
  specificRequest () {
    return '苹果数据线插头'
  }
}

class Target {
  constructor() {
    this.adaptee = new Adaptee()
  }
  request() {
    let info = this.adaptee.specificRequest()
    return `${info} - 转换器 - 安卓数据线插头`
  }
}

let target = new Target()
let res = target.request()
console.log(res);

前端设计模式-适配器模式

前言

定义