JavaScript 设计模式之-适配器模式（Adapter Pattern）

面试了很多简历写着前端5,6年高级前端工程师，大部分设计模式都说不明白，其实不要把设计模式想的很难，其实是一种思想，我以前搞iOS，也偶尔搞前端，设计模式原理都是一样的，写法也差不多，只要搞清楚他的概念和使用场景就理解很容易了

什么是适配器模式?
适配器模式（有时候也称包装样式或者包装）将一个类的接口适配成用户所期待的。一个适配允许通常因为接口不兼容而不能在一起工作的类工作在一起，做法是将类自己的接口包裹在一个已存在的类中。（–百度百科）

简单点说
适配器模式（Adapter Pattern）是作为两个不兼容的接口之间的桥梁

适配器模式一般分两种，一种是类适配器，一种是对象适配器，类适配器耦合比较严重，一般情况都使用对象适配器。

适配器模式有哪些使用场景?
举个简单例子，我换了一个iPhone X手机 ，耳机孔是type C 接口，我以前iPhone 6的耳机是圆柱接口没法使用，这时候我们通常可以使用一个转接头来进行适配，这样就可以使用了。

在软件编程中，在iOS 和 Android 前端开发时候，我们封装了一个组件，组件元素显示的数据要对应接口的模型，由于接口是不同人开发的，导致接口命名各不相同，这时候我们就可以用适配器模式优雅的解决各个接口的差异。

适配器模式优缺点有哪些?

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

缺点
过多地使用适配器，会让系统非常乱，这时候你最好找服务端负责人喝个茶好好谈谈

JS 如何实现适配器模式？
假如我有个组件，性别是用sex字段，但是一个新模块返回的是gender，我们写个适配器来适配下组件

// 适配器函数
const responseAdapter = (response, mapping) => {
  return response.map(item => {
    const normalized = {}
    Object.keys(item).forEach(key => (
      normalized[mapping[key]] = item[key]))
    return normalized
  })
}


// API 返回的数据
const response = [{
  name: 'Allen',
  age: '12',
  address: '北京',
  gender: '男'
},
{
  name: 'Luc',
  age: '14',
  address: '北京',
  gender: '女'
}
]

// 适配模型
const mapping = {
  name: 'name',
  age: 'age',
  address: 'address',
  gender: 'sex'
}
// 使用
let data  = responseAdapter(response, mapping)

console.log("data==",data)

结果