设计模式之适配器模式

一、基础介绍

解决类(对象)之间接口不兼容问题。

适配器 UML 类图

二、应用场景

2.1 参数适配

以参数对象传入时，不知道传递的参数是否完整，如有一些参数没有传入，一些参数有默认值等，此时可通过适配器来适配传入的参数对象。

不一定非要用下面的这种形式，重点在于理解适配器的实质是对参数进行转化。

function foo(options) {
  var _options = {
    name: 'test',
    age: 25
  }
  Object.assign(_options, options);
  // do things
}

2.2 数据适配

开发中经常遇到的场景就是：

• 后端返回的数据结构不一定是前端想要的，如果后端改起来难度较大，前端就要自行转化
• 某个公共组件对传入的参数有格式要求，此时就需要先转化数据后才能被组件正常接收。

// 现有数据结构
var arr = ['lee', 25];

// 转化成键值对
function adapter(arr) {
  return {
    name: arr[0],
    age: arr[1]
  }
}

当然实际开发中，会复杂的多，比如扁平化转树形等需求。

2.3 适配不同的库

强烈建议：轻易不要替换，即使迫不得已要替换，尽量选择用法相似的库进行替换，否则适配器要写的很复杂。

2.4 框架中的适配器场景

angular 中的 filter 和 vue 中的 computed 从某种程度上来说，很符合适配器的思想。

参考

《JavaScript 设计模式与开发实践》曾探
《JavaScript 设计模式》张容铭
Javascript设计模式系统讲解与应用